“HTML表头”的版本间差异
本页内容
无编辑摘要 |
(→对齐表格标题) |
||
第65行: | 第65行: | ||
<sample title="" hererun="s" desc="" > | <sample title="" hererun="s" desc="" > | ||
<style> | |||
table, th, td { | |||
border: 1px solid black; | |||
} | |||
th { text-align: left; } | 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> | |||
</sample> | </sample> | ||
== 多列标题 == | == 多列标题 == | ||
您可以有一个跨越两列或多列的标题。 | 您可以有一个跨越两列或多列的标题。 |
2022年8月4日 (四) 22:37的最新版本
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> 标签之后。