Detailed explanation of the solution to the problem of merging rows and columns in tables in HTML
|
Because we were going to build a website, in addition to long paragraphs of text, the content also included a large number of tables, which led to the problem of table layout. A simple table such as:
This form is relatively simple, just simply <tr></tr><td></td> (or <th></th> The code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a target=_blank href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a target=_blank href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
td{width:200px;
height:100px;
border:#000 2px solid;
margin:0px;
padding:0px;
}
</style>
</head></p><p><body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>However, when there are some uneven spaces, you need to use colspan (across columns) and rowspan (across rows). colspan (across columns) and rowspan (across rows) have the same meaning as the surface meaning, and can also be seen as the merging of rows and columns. colspan (across columns):
The red part in the above picture indicates that the cell has spanned two columns. <table> <tr> <td colspan="2" style="background:#F00"></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> If you want such a neat table, you must first estimate the number of cells in the row below the row where the cell to be spanned is located, which determines the number of cells to be spanned. Taking the above picture as an example, the number of grids in the second and third rows is 3. So if you want to achieve the effect in the above picture, the first row and the first column want to span two columns, so colspan="2" The rowspan (across rows) method is similar to colspan (across columns). Examples of rowspan (across rows) and colspan (across columns) appearing at the same time:
The code is as follows (only part of the code): <table> <tr> <th></th> <th colspan="5"></th> </tr> <tr> <th></th> <th <span style="color:#000000;">colspan</span>="3"></th> <th></th> <th></th> </tr> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr> <th rowspan="3"></th> <th></th> <th colspan="2"></th> <th></th> <th></th> </tr> <tr> <th></th> <th colspan="2"></th> <th></th> <th></th> </tr> <tr> <th></th> <th colspan="2"></th> <th></th> <th></th> </tr> </table> <table> <tr class="zj"> <th rowspan="4"></th> <th colspan="8"></th> </tr> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr> <th></th> <th colspan="4"></th> <th></th> <th colspan="2"></th> </tr> <tr> <th></th> <th colspan="7"></tr> </table> This is the end of this article on how to solve the problem of merging rows and columns in html tables. For more information about merging rows and columns in html tables, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Understanding and solutions of 1px line in mobile development
>>: How to use Typescript to encapsulate local storage
Recommend
How to use shell scripts in node
background During development, we may need some s...
Some suggestions on Vue code readability
Table of contents 1. Make good use of components ...
A brief introduction to mysql mycat middleware
1. What is mycat A completely open source large d...
How to quickly insert 10 million records into MySQL
I heard that there is an interview question: How ...
Windows10 mysql 8.0.12 non-installation version configuration startup method
This article shares the specific steps for config...
MySQL 8.0.12 decompression version installation tutorial
This article shares the installation tutorial of ...
Summary of using MySQL isolation columns and prefix indexes
Table of contents Isolate Data Columns Prefix Ind...
A brief discussion on the magic of parseInt() in JavaScript
cause The reason for writing this blog is that I ...
MySQL 5.7.17 installation and use graphic tutorial
MySQL is a relational database management system ...
Detailed tutorial on installing MySQL database in Linux environment
1. Install the database 1) yum -y install mysql-s...
Summary of several commonly used CentOS7 images based on Docker
Table of contents 1 Install Docker 2 Configuring ...
UDP DUP timeout UPD port status detection code example
I have written an example before, a simple UDP se...
How to delete an image in Docker
The command to delete images in docker is docker ...
Use Docker to create a distributed lnmp image
Table of contents 1. Docker distributed lnmp imag...
Detailed explanation of the problem that the space is not released after the Linux file is deleted
Preface When the system space usage is too large ...