HTML表头

本页内容

HTML 表格可以为每列或每行或许多列/行有标题。

HTML 表头

表头是用 th 元素定义的,每个 th 元素代表一个表格单元格。


示例

<style>
table, th, td {
  border: 1px solid black;
}
</style>
    <table>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>

纵向表头

要将第一列用作表格标题,请将每行中的第一个单元格定义为一个 th 元素:


示例

<style>
table, th, td {
  border: 1px solid black;
}
</style>
    <table>
        <tr>
            <th>Firstname</th>
            <td>Jill</td>
            <td>Eve</td>
        </tr>
        <tr>
            <th>Lastname</th>
            <td>Smith</td>
            <td>Jackson</td>
        </tr>
        <tr>
            <th>Age</th>
            <td>94</td>
            <td>50</td>
        </tr>
    </table>

对齐表格标题

默认情况下,表格标题为粗体并居中:

要左对齐表格标题,请使用 CSS text-align 属性:


示例

<style>
table, th, td {
  border: 1px solid black;
}
th {  text-align: left; }
</style>
    <table>
        <tr>
            <th>Firstname</th>
            <td>Jill</td>
            <td>Eve</td>
        </tr>
        <tr>
            <th>Lastname</th>
            <td>Smith</td>
            <td>Jackson</td>
        </tr>
        <tr>
            <th>Age</th>
            <td>94</td>
            <td>50</td>
        </tr>
    </table>

多列标题

您可以有一个跨越两列或多列的标题。

为此,请使用元素 colspan 上的属性 : <th>


示例

<style>
table, th, td {
  border: 1px solid black;
}
</style>
    <table>
        <tr>
            <th colspan="2">Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>


表格标题

您可以添加一个标题作为整个表格的标题。


要为表格添加标题,请使用 <caption> 标签:


示例

<style>
table, th, td {
  border: 1px solid black;
}
</style>
    <table style="width:100%">
        <caption>Monthly savings</caption>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$50</td>
        </tr>
    </table>

注意:标签 <caption> 应该紧跟在 <table> 标签之后。

此页面最后编辑于2022年8月4日 (星期四) 22:37。