标签之文本标签
列表标签之有序列表
列表标签之无序列表
表格标签
实操
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="400" height="400">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<table>
<tr>
<td>wc</td>
<td>wc</td>
<td>wc</td>
<td>wc</td>
</tr>
<tr>
<td>wc</td>
<td>wc</td>
<td>wc</td>
<td>wc</td>
</tr>
<tr>
<td>wc</td>
<td>wc</td>
<td>wc</td>
<td>wc</td>
</tr>
</table>
</body>
</html>
1 | 2 | 3 |
4 | 5 | 6 |
7 | 8 | 9 |
wc | wc | wc | wc |
wc | wc | wc | wc |
wc | wc | wc | wc |
合并表格
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>合并6,7:colspan</p>
<p>合并15,20:rowspan</p>
<p>水平合并:保留左边,删除右边</p>
<p>垂直合并:保留上边,删除下边</p>
<table border="1" width="500px" height="400px">
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
<td>单元格4</td>
<td>单元格5</td>
</tr>
<tr>
<td colspan="2">单元格6,7</td>
<td>单元格8</td>
<td>单元格9</td>
<td>单元格10</td>
</tr>
<tr>
<td>单元格11</td>
<td>单元格12</td>
<td>单元格13</td>
<td>单元格14</td>
<td rowspan="2">单元格15,20</td>
</tr>
<tr>
<td colspan="2" rowspan="2">单元格16,17,21,22</td>
<td>单元格18</td>
<td>单元格19</td>
</tr>
<tr>
<td>单元格23</td>
<td>单元格24</td>
<td>单元格25</td>
</tr>
</table>
</body>
</html>
合并6,7:colspan
合并15,20:rowspan
水平合并:保留左边,删除右边
垂直合并:保留上边,删除下边
单元格1 | 单元格2 | 单元格3 | 单元格4 | 单元格5 |
单元格6,7 | 单元格8 | 单元格9 | 单元格10 | |
单元格11 | 单元格12 | 单元格13 | 单元格14 | 单元格15,20 |
单元格16,17,21,22 | 单元格18 | 单元格19 | ||
单元格23 | 单元格24 | 单元格25 |