HTML和CSS第一天
8.8跨行跨列表格（次重点，必须掌握）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>9-表格的跨行跨列</title>
</head>
<body>
<!--需求： 一个五行五列的表格
第一行，第一列的单元格要跨两列
第二行第一列的单元格跨两行，
第四行第四列的单元格跨两行两列。
colspan 属性设置跨列
rowspan 属性设置跨行
-->
<table border="1" width="300" height="300" cellspacing="0" align="center">
<tr>
<th colspan="2">1.1</th>
<!-- <td>1.2</td>-->
<!-- 第一行第二列 删掉 被第一行第一列覆盖-->
<td align="center">1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<th rowspan="2">2.1</th>
<!-- 覆盖掉第三行第一列-->
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<!-- <th>3.1</th>-->
<!-- 被第二行第一列所覆盖 删掉-->
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<th>4.1</th>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2" align="center"><b>4.4</b></td>
<!-- 覆盖掉原本的第四行第五列和第五行第四列，第五行第五列-->
<!-- <td>4.5</td>-->
<!-- 被第四行第四列所覆盖掉-->
</tr>
<tr>
<th>5.1</th>
<td>5.2</td>
<td>5.3</td>
<!-- <td>5.4</td>-->
<!-- <td>5.5</td>-->
<!-- 上两个单元格都被第四行第四列所覆盖掉了-->
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
