<table>标签内可以只有<tr>、<td>标签,也可以加入完整的结构<caption>、<thead>、<tbody>、<tfoot>
对表格调样式的时候,一般推荐的是用css来设置。可以给表格添加边框,border-collapse: collapse;–>用来合并边框。
合并列或者行:colspan表示跨列数,rowspan表示跨行数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
<style>
table {
border: 1px solid blueviolet;
width: 400px;
/* 合并边框 */
border-collapse: collapse;
/* background-color: brown; */
}
td,
th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<!-- <caption> 表示表格的标题信息,align的属性值可以调整标题的位置 -->
<!-- align的取值 top bottom left right -->
<caption align="top">学生信息表</caption>
<!-- <colgroup>是定义一个表中的一组列。它只能作为table的子元素,位于<caption>元素后,其他元素之前。-->
<colgroup>
<!-- <col>作为<colgroup>的子元素,可以在给定span属性的时候,可以指定某几列可以作为同一列 -->
<col span="2" style="background-color:chocolate;">
<col style="background-color: cyan;">
</colgroup>
<!-- 表头标签 -->
<thead>
<tr>
<!-- <th> 常用表头单元格,可以把文字加粗。也可换成<td>,但是文字不会有加粗的效果 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<!-- 表体标签 -->
<tbody>
<tr>
<!-- 在td标签内可以加俩个属性:colspan表示跨列数,rowspan表示跨行数 -->
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</tbody>
<!-- 表脚标签 -->
<tfoot>
<tr>
<td>小小</td>
<td>女</td>
<td>4</td>
</tr>
</tfoot>
</table>
</body>
</html>