第十一章 表格元素

表格元素

该章节内容主要学习表格的相关元素。

table、tr、td--表格，行，格

• table是表格外围标签
• tr代表的是一行
• td代表的是数据内容
• th表头
• caption表标题

table中有border属性，用于设置表格边框。

<table>
    <caption>...</caption>
    <tr>
        <th>...</th>
        <th>...</th>
        <th>...</th>
    </tr>
    <tr>
        <th>...</th>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

thead、tbody、tfoot--添加表格结构

• thead表头标签
• tbody表身体标签
• tfoot表脚标签

<table>
    <thead>
        <tr>
            <th>...</th>
            <th>...</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>...</th>
            <td>...</td>
            <td>...</td>
        </tr>
        <tr>
            <th>...</th>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>...</th>
            <td>...</td>
            <td>...</td>
        </tr>
    </tfoot>
</table>

rowspan、colspan--制作不规则表格

• rowspan合并行
• colspan合并列

<table>
    <thead>
        <tr>
            <th>...</th>
            <th>...</th>
            <th>...</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th rowspan="2">...</th>
            <td colspan="2">...</td>
        </tr>
        <tr>
            <td>...</td>
            <td>...</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>...</th>
            <td>...</td>
            <td>...</td>
        </tr>
    </tfoot>
</table>

colgroup、col--处理列元素

colgroup代表的是列表的列整体，内部有span属性可以选择指定的列数，通过对该标签加入id来实现对不同列的css样式设计。 colgroup标签内部有col代表一组列中的一列。col也拥有span属性，可以用来设置多个列。

<table>
    <colgroup span="3">
        <col id="a">...</col>
        <col id="b" span="2">...</col>
    </colgroup>
</table>