html表格
5、表格
(一)、表格语义记忆
通过语义化记忆表格标签：
表1 表格基本标签
标签 语义 说明
table table（表格） 表格
tr table row（表格行） 行
td table data cell（表格单元格） 单元格
表2 表格结构标签
标签 语义 说明
thead table head 表头
tbody table body 表身
tfoot table foot 表脚
th table header 表头单元格
(二)、表格基本结构
<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。
语法：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>说明：
<table>和</table>标记着表格的开始和结束，<tr>和</tr>标记着行的开始和结束，在表格中包含几组<tr></tr>就表示该表格为几行。<td>和</td>标记着单元格的开始和结束。
(三)、表格完整结构
表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。
表格语义化之后，使得代码更清晰和更利于后期维护。
语法：
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>
</tr>
</tfoot>
</table>
说明：
<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“<tr></tr>”表示一行。
(四)、合并行和合并列
合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。
(1)、合并行
语法：
<td rowspan="跨度的行数">
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>合并行rowspan</title>
</head>
<body>
<table>
<!--第1行-->
<tr>
<td>姓名:</td>
<td>小明</td>
</tr>
<!--第2行-->
<tr>
<td rowspan="2">喜欢水果:</td>
<td>苹果</td>
</tr>
<!--第3行-->
<tr>
<td>香蕉</td>
</tr>
</table>
</body>
</html>在浏览器预览效果如下：
(2)、合并列
语法：
<td colspan="跨度的列数">
举例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>合并列colspan</title>
</head>
<body>
<table>
<!--第1行-->
<tr>
<td colspan="2">绿叶学习网精品教程</td>
</tr>
<!--第2行-->
<tr>
<td>HTML教程</td>
<td>CSS教程</td>
</tr>
<!--第3行-->
<tr>
<td>jQuery教程</td>
<td>SEO教程</td>
</tr>
</table>
</body>
</html>在浏览器预览效果如下：
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
