表格其他属性(选学)+合并单元格

th标签

专门存储第一列标题的标签，自动居中且加粗。

表格的结构(了解就好)

由于表格存储数据比较复杂，为了方便管理和阅读以及提升语义，我们对表格中存储的数据进行了分类

如果我们指定了thead和tfoot,那么在需改整个表格高度时，thead和tfoot有自己默认高度，不会随着表格高度变化而变化。

1.表格的标题

<caption><h2>9月7日到13日运动运动排行榜</h2>

caption标签

caption 标签必须紧随 table 标签之后，否则无效。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

<caption><h2>今日小说排行榜</h2></caption>

2.表格的表头信息

thead标签

标签定义表格的表头。该标签用于组合 HTML 表格的表头内容

<thead>
<tr bgcolor="#f1f1f1">
    <th>排名</th>
    <th>日期</th>
    <th>步数</th>
    <th>趋势</th>
    <th>相关链接</th>
</tr>
</thead>

3.表格的主体信息

tbody标签

tbody 元素用于对 HTML 表格中的主体内容进行分组,如果我们没有添加tbody标签，浏览器会替我们自动添加。

<tbody>
<tr align="center" bgcolor="#f0f8ff">
    <td>5</td>
    <td>9/7</td>
    <td>7321</td>
    <td><img src="up.jpg" alt="图片走失了"></td>
    <td>
        <a href="#">社区</a>
        <a href="#">好友</a>
    </td>
</tr>
<tr align="center" bgcolor="#f0f8ff">
    <td>7</td>
    <td>9/8</td>
    <td>5127</td>
    <td><img src="down.jpg" alt="图片走失了"></td>
    <td>
        <a href="#">社区</a>
        <a href="#">好友</a>
    </td>
</tr>
<tr align="center" bgcolor="#f0f8ff">
    <td>4</td>
    <td>9/9</td>
    <td>10411</td>
    <td><img src="up.jpg" alt="图片走失了"></td>
    <td>
        <a href="#">社区</a>
        <a href="#">好友</a>
    </td>
</tr>
<tr align="center" bgcolor="#f0f8ff">
    <td>2</td>
    <td>9/10</td>
    <td>11310</td>
    <td><img src="up.jpg" alt="图片走失了"></td>
    <td>
        <a href="#">社区</a>
        <a href="#">好友</a>
    </td>
</tr>
<tr align="center" bgcolor="#f0f8ff">
    <td>6</td>
    <td>9/11</td>
    <td>7371</td>
    <td><img src="down.jpg" alt="图片走失了"></td>
    <td>
        <a href="#">社区</a>
        <a href="#">好友</a>
    </td>
</tr>
<tr align="center" bgcolor="#f0f8ff">
    <td>1</td>
    <td>9/12</td>
    <td>14482</td>
    <td><img src="up.jpg" alt="图片走失了"></td>
    <td>
        <a href="#">社区</a>
        <a href="#">好友</a>
    </td>
</tr>
<tr align="center" bgcolor="#f0f8ff">
    <td>4</td>
    <td>9/13</td>
    <td>10375</td>
    <td><img src="down.jpg" alt="图片走失了"></td>
    <td>
        <a href="#">社区</a>
        <a href="#">好友</a>
    </td>
</tr>
</tbody>

4.表格的页尾信息

tfoot标签

tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。

<tfoot>
<tr align="center" bgcolor="#f0f8ff">
    <td colspan="3">平均步数</td>
    <td colspan="2">9485</td>
</tr>
</tfoot>

合并单元格(都是向后向下合并)

1.水平方向上的单元格合并

colspan 属性

colspan 属性规定表头单元格可横跨的列数。数字是几就把几个表格当做一个表格看待。

注意：如果把一个单元格当作多个单元格使用，那就要小心不要多出一个单元格，比如4个标题，我合并3个，这时候我只要写3个th，而不是4个.

<tr align="center" bgcolor="#f0f8ff">
    <td colspan="3">平均步数</td>
    <td colspan="2">9485</td>
</tr>

2.竖直方向上的单元格合并

rowspan属性

rowspan 属性规定表头单元格可向下包含的行数。数字是几就把几个表格当做一个表格看待。

注意：如果把一个单元格当作多个单元格使用，那就要小心不要多出一个单元格，比如我5列，如果某1行的第1列向下合并3行，那么接下来的两行里都要删除第一列标签