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> 标签之后。