Table of contents
1.colspan attribute (span column)
example
<table width="500" height="500" cellspacing="0" border="1">
<tr>
<!--因为rowspan是跨列，导致1.1这个单元格跨列后占了2个单元格宽度的位置-->
<td colspan="2">1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
</table>
running result
Question: Here you will find that there is an extra cell behind the 2.5 cell in the second row. That is because: the 1.1 cell spans 2 columns, which is equivalent to occupying the width of 2 cells; making the first row The width becomes 6 (assuming that a cell has a width of 1 and a length of 1), while the width of the second row has not changed. Based on the complete structure of the table, an empty cell will be automatically added at the end of the second row to complete.
Solution: So you need to delete a cell in the first row, so that the cell width of the first row is equal to that of the second row, and there will be no extra empty cells.
Revise:
<tr>
<td colspan="2">1.1</td>
<!--<td>1.2</td> 去掉一个单元格-->
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
running result:
2.rowspan attribute (cross row)
example
<table width="500" height="500" cellspacing="0" border="1">
<tr>
<!--因为colspan是跨列，导致1.1这个单元格跨列后占了2个单元格宽度的位置-->
<td colspan="2">1.1</td>
<!--<td>1.2</td>-->
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<!--因为rowspan是跨行，导致2.1这个单元格跨行后占了2个单元格高度的位置-->
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
Running effect
Problem: Similar to the above-mentioned problem of crossing columns, the height of cells will change when crossing rows, thus affecting the structure of other rows.
Solution: Here we delete a cell in the third row.
Revise
<tr>
<!--<td>3.1</td>-->
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
running result
3. Comprehensive exercises
需求：
1.新建一个五行， 五列的表格
2.第一行的第一列的单元格要跨两列
3.第二行第一列的单元格跨两行
4.第四行第四列的单元格跨两行两列
source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格跨行跨列</title>
</head>
<body>
<!--
colspan 属性设置跨列
rowspan 属性设置跨行
-->
<table width="500" height="500" cellspacing="0" border="1">
<tr>
<td colspan="2">1.1</td>
<!--<td>1.2</td>-->
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<!--<td>3.1</td>-->
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td rowspan="2" colspan="2">4.4</td>
<!--<td>4.5</td>-->
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
<!--<td>5.4</td>-->
<!--<td>5.5</td>-->
</tr>
</table>
</body>
</html>
running result
