表格单元格的合并

我们可以在<td></td>标签里面设置属性控制行与行之间的合并，也可设置列与列之间单元格的合并。列与列，就写colspan="2";行与行就是：rowspan="2"，这都表示合并两个，记得合并后一定要把合并的那个单元格的代码删除！如下所示：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>为梦而狂</title>
 5     <meta http-equiv="Content-Type" content=
 6     "text/html;charset=utf-8"/>
 7 </head>
 8 <body>
 9 <table border="1px" width="50%" height="400px" align="center">
10 <caption>给我冲！</caption>
11 <tr>
12 <!-- th=table head -->
13     <th colspan="2">详情</th><th>姓名</th><th>分数</th><th>录取大学</th>
14 </tr>
15 <tr>
16     <td>内容</td><td>内容</td><td>内容</td><td colspan="2" rowspan="2">内容</td>
17 </tr>
18 <tr>
19     <td rowspan="2">内容</td><td>内容</td><td>内容</td>
20 </tr>
21 <tr>
22     <td>内容</td><td>内容</td><td>内容</td><td>内容</td>
23 </tr>
24 </table>
25 </body>
26 </html>

当然，也可设置标题，<th></th>就是标题，会把设置成标题的单元格里面的内容居中加粗。也可给整个表格设置标题，在table标签下面加入标签<caption></caption>，就可给整个表格添加标题。

（当然这个表格做出来没有任何实际意义哈哈哈哈纯粹是为了测试各种功能，乱搞的）

 

posted @ 2021-02-04 11:16  EvanTheBoy  阅读(288)  评论(0)    收藏  举报