2021/10/18 table：tr标签，th标签，td标签，caption标签，thead标签，tbody标签，tfoot标签，colgroup标签，col标签

13.1 表格　tr:table row; th:table header cell; td:table date cell

　　<tr>
　　　　<th>外号</th>
　　　　<th>原名</th>
　　　　<th>特长</th>
　　　　<th>照片</th>
　　</tr>
　　<tr>
　　　　<th>美国队长</th>
　　　　<td>史蒂芬·罗杰斯</td>
　　　　<td>强化体格</td>
　　　　<td><img src="img/CaptainAmerica.jpg" alt="美国队长" width="300"></td>
　　</tr>

13.2 表格边框

　　<style>
　　　　table {
　　　　　　border: 1px solid black;
　　　　　　border-collapse: collapse;
　　　　　　}
　　　　th {
　　　　　　border: 1px solid red;
　　　　　　}
　　　　td {
　　　　　　border: 1px solid blue;
　　　　　　}
　　</style>

13.3 给表格加标题：caption

　　caption 标签需要紧挨着 table 标签的开始标签。

　　<table>
　　　　<caption>复仇者联盟主要成员技能表</caption>

　　　　...,

14.1 设置单元格背景色（css属性）

　　th {
　　　　background: grey;
　　　　color: white;
　　　 }

 

14.2 更严密地划分表格结构

　　thead、tbody、tfoot 标签用于将表格大致划分为表头、主体和表尾三个部分。

 

14.3 跨列和跨行显示

　　th 和 td 标签内部有一个 colspan 和 rowspan 属性，用于设置该单元格横跨的列数和纵跨的行数。　

　　<tr>
　　　　<td>1</td>
　　　　<td rowspan="3">2</td>
　　　　<td>3</td>
　　</tr>

14.4 colgroup 标签和 col 标签　

　　通常情况下，表格是按行进行绘制的，每个 tr 标签代表表格中的一行。

　　但有的时候，我们可能会想要批量地设置表格中一列或多列的样式：colgroup 标签和 col 标签　

　　<!-- 将第 1 列的背景颜色设置为红色 -->
　　<!-- 将第 2、3 列的背景颜色设置为绿色 -->
　　<colgroup>
　　　　<col style="background: red">
　　　　<col span="2" style="background: green">
　　</colgroup>