HTML 表格

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 像素的边框:

合并单元格

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>

效果如下:

表格标题

表格标题

你可以使用 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 还提供了一系列的标签 <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>

显示效果如下:

表头、表尾和正文

大佬,给点反馈?

平均评分 / 5. 投票数:

很抱歉,这篇文章不能帮助到你

请让我们改进这篇文章

告诉我们我们如何改善这篇文章?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top