没事造轮子没事造轮子

没事造轮子

HTML 表格

  • W_Z_C
  • 阅读约 2 分钟
HTML 表格

表格算是一种很古老的数据展示形式，HTML 提供几个专门构建表格的元素，你可以使用 table 元素创建表格，在其内部，可以使用 tr 元素创建行，td 元素创建列，还可以使用 th 创建表格标题。

在互联网早期的时候，表格布局风靡一时，不过现如今已经被淘汰了，表格元素基本上回归了本质，仅用来展示数据而已。

下面是最基本的表格代码：

<table>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Peter Parker</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Clark Kent</td>
        <td>34</td>
    </tr>
</table>

显示结果如下：

HTML 表格

默认情况下表格不会显示边框效果，并且表格的单元格的大小刚好足以容纳单元格的内容。

合并单元格

如果你使用过 Execl 就知道合并单元格是表格的常见操作，在 HTML 中，你可是使用 rowspan 和 colspan 来完成类似的操作。

colspan 用于合并列：

<table border="1">
    <tr>
        <th>Name</th>
        <th colspan="2">Phone</th>
    </tr>
    <tr>
        <td>John Carter</td>
        <td>5550192</td>
        <td>5550152</td>
    </tr>
</table>

为了显示明显一点，我这里给表格增加了 1 像素的边框：

HTML 合并单元格

rowspan 用户合并列：

<table border="1">
    <tr>
        <th>Name:</th>
        <td>John Carter</td>
    </tr>
    <tr>
        <th rowspan="2">Phone:</th>
        <td>55577854</td>
    </tr>
    <tr>
        <td>55577855</td>
    </tr>
</table>

效果如下：

HTML 合并单元格

表格标题

你可以使用 caption 元素为表格添加指定的标题。该元素必须直接放置在 table 元素的开始元素之后，默认标题会显示在表格的顶部。

<table>
    <caption>Users Info</caption>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Peter Parker</td>
        <td>16</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Clark Kent</td>
        <td>34</td>
    </tr>
</table>

效果如下：

HTML 表格标题

表头、表尾和正文

除了上面的标签之外，HTML 还提供了一系列的标签 <thead> 、<tbody>、<tfoot> 来结构化表格的内容。thead 标记表格的头部，常用于显示表格的标题，tbody 标记表格的正文，而 tfoot 标记表格尾部，常用于表格的汇总。

<table>
    <thead>
        <tr>
            <th>Items</th>
            <th scope="col">Expenditure</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Donuts</th>
            <td>3,000</td>
        </tr>
        <tr>
            <th scope="row">Stationery</th>
            <td>18,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Totals</th>
            <td>21,000</td>
        </tr>
    </tfoot>
</table>

显示效果如下：

表头、表尾和正文