跳到主要内容

表格表头

表格可以使用一行或多行作为表头，也可以使用多行的单元格作为表头。

about:blank

定义表头​

表头由th元素定义。 每个th元素代表一个表格单元格。

下例中，整行作为表头。

<style>
    table { width: 100%; }
    table,th,td{
        border:1px solid black;
        border-collapse:collapse;
    }
    th{
        background: #eeeeee;
        /** 
        表头文字对齐方式（text-align）： 
        left 左对齐，
        center 居中对齐，
        right 右对齐
        */
        text-align:center; 
    }
</style>
<table>
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>物理</th>
        <th>化学</th>
    </tr>
    <tr>
        <td>郝来吴</td>
        <td>90</td>
        <td>100</td>
        <td>98</td>
        <td>100</td>
    </tr>
    <tr>
        <td>刘美溪</td>
        <td>94</td>
        <td>98</td>
        <td>100</td>
        <td>89</td>
    </tr>
</table>
about:blank

表头对齐​

表头文字默认样式为粗体且居中。 若要修改表头的对齐方式，可以使用 CSS text-align 属性：

左对齐​

th {
    text-align: left;
}

居中对齐​

th {
    text-align: center;
}

右对齐​

th {
    text-align: right;
}

垂直表头​

要将第一列用作为表头，只需将每行中的第一个单元格定义为<th>元素：

<table>
    <tr>
        <th>郝来吴</th>
        <td>90</td>
        <td>100</td>
        <td>98</td>
        <td>100</td>
    </tr>
    <tr>
        <th>刘美溪</th>
        <td>94</td>
        <td>98</td>
        <td>100</td>
        <td>89</td>
    </tr>
</table>

多列表头​

表头可以跨越多列或多行。 要实现跨列，需使用<th>元素上的colspan属性， 要实现跨行，需使用<th>元素上的rowspan属性：

<style>
    table { width: 100%; }
    table,th,td{
        border:1px solid black;
        border-collapse:collapse;
    }
    th{
        background: #eeeeee;
        text-align:center; 
    }
</style>
<table>
    <tr>
        <th rowspan="2"></th>
        <th colspan="4">科目</th>
    </tr>
    <tr>
        <th>语文</th>
        <th>数学</th>
        <th>物理</th>
        <th>化学</th>
    </tr>
    <tr>
        <th>郝来吴</th>
        <td>90</td>
        <td>100</td>
        <td>98</td>
        <td>100</td>
    </tr>
    <tr>
        <th>刘美溪</th>
        <td>94</td>
        <td>98</td>
        <td>100</td>
        <td>89</td>
    </tr>
</table>

about:blank
提示

关于colspan和rowspan属性的更多信息，可以点这里查看。

表格标题​

可以使用caption元素为整个表格添加标题。

<style>
    table { width: 100%; }
    table,th,td{
        border:1px solid black;
        border-collapse:collapse;
    }
    th{
        background: #eeeeee;
        text-align:center; 
    }
</style>
<table>
    <caption>成绩表</caption>
    <tr>
        <th rowspan="2"></th>
        <th colspan="4">科目</th>
    </tr>
    <tr>
        <th>语文</th>
        <th>数学</th>
        <th>物理</th>
        <th>化学</th>
    </tr>
    <tr>
        <th>郝来吴</th>
        <td>90</td>
        <td>100</td>
        <td>98</td>
        <td>100</td>
    </tr>
    <tr>
        <th>刘美溪</th>
        <td>94</td>
        <td>98</td>
        <td>100</td>
        <td>89</td>
    </tr>
</table>

about:blank

HTML 参考​

名称描述

CSS 参考​

名称描述