如何使用HTML TABLE表格

表格由table标签来定义。每个表格均有若干行(由tr标签定义),每行被分割为若干单元格(由td标签定义)。在本教程中,您将学习如何使用 HTML 表格显示表格数据。文章包括4个知识点:在 HTML 中创建表格、跨越多行和多列、为表格添加标题和定义表头、正文和页脚。

在 HTML 中创建表格

HTML 表格允许您将数据排列成行和列。HTML 表格通常用于显示表格数据,如产品列表、客户详细信息、财务报告等。

您可以使用<table>元素创建表格。在<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>

默认情况下,表格没有任何边框。您可以使用 CSS border属性为表格添加边框。此外,默认情况下,表格单元格的大小刚好足以容纳内容。要在表格单元格的内容周围添加更多空间,您可以使用 CSS padding属性。

以下样式规则为表格添加 1 像素的边框,并为其单元格添加 10 像素的内边距。

table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
}

默认情况下,表格周围的边框和它们的单元格是相互分离的。但是您可以通过使用<table>元素的border-collapse属性将它们折叠成一个。

此外,<th>元素内的文本以粗体显示,默认情况下在单元格中水平居中对齐。要更改默认对齐方式,您可以使用 CSS text-align属性。

以下样式规则折叠表格边框并将表格标题文本左对齐。

table {
    border-collapse: collapse;
}
th {
    text-align: left;
}

注意:大多数<table>元素的属性,如bordercellpaddingcellspacingwidth,align等在早期版本中用于样式化表格外观,但在 HTML5 中已被删除,因此请避免使用它们。改用 CSS 来设置HTML 表格的样式。

 

跨越多行和多列

跨越允许您跨多个其他行和列扩展表行和列。

通常,一个表格单元格不能越过另一个表格单元格下方或上方的空间。但是,您可以使用rowspancolspan属性来跨越表中的多行或多列。

让我们尝试以下示例来了解其colspan基本工作原理:

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

同样,您可以使用rowspan属性创建一个跨越多行的单元格。让我们尝试一个示例来了解行跨越的基本工作原理:

<table>
    <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>元素为表格指定标题。

<caption>元素必须直接放在<table>开始标签之后。默认情况下,标题显示在表格的顶部,但您可以使用 CSS caption-side属性更改其位置。

以下示例显示了如何在表格中使用<caption>元素。

<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>,它们分别通过定义页眉、正文和页脚区域来帮助您创建更有条理的表格。

下面的示例演示了这些标签元素的使用。

<table>
    <thead>
        <tr>
            <th>Items</th>
            <th>Expenditure</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stationary</td>
            <td>2,000</td>
        </tr>
        <tr>
            <td>Furniture</td>
            <td>10,000</td>
        </tr>        
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <td>12,000</td>
        </tr>
    </tfoot>
</table>

注意:在 HTML5 中,<tfoot>元素可以放在<tbody><tr>元素之前或之后,但必须出现在<caption><colgroup>, 和<thead>元素之后。

提示:不要使用HTML TABLE来创建网页布局。TABLE表格布局的渲染速度较慢,并且很难维护。它应该只用于显示表格数据。