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 属性：

示例

th {  text-align: left; }尝试一下一键复制

多列标题

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

为此，请使用元素 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> 标签之后。