“HTML表头”的版本间差异
本页内容
(创建页面,内容为“25 HTML 表格可以为每列或每行或许多列/行有标题。 == HTML 表头 == 表头是用''' <nowiki>th</nowiki> '''元素定义的,每个''' <nowiki>th</nowiki> '''元素代表一个表格单元格。 <sample title="" hererun="s" desc=""> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Sm…”) |
无编辑摘要 |
||
第7行: | 第7行: | ||
<sample title="" hererun="s" desc=""> | <sample title="" hererun="s" desc=""> | ||
<style> | |||
table, th, td { | |||
border: 1px solid black; | |||
} | |||
</style> | |||
<table> | <table> | ||
<tr> | <tr> | ||
第30行: | 第35行: | ||
<sample title="" hererun="s" desc=""> | <sample title="" hererun="s" desc=""> | ||
<style> | |||
table, th, td { | |||
border: 1px solid black; | |||
} | |||
</style> | |||
<table> | <table> | ||
<tr> | <tr> | ||
第63行: | 第73行: | ||
<sample title="" hererun="s" desc=""> | <sample title="" hererun="s" desc=""> | ||
<style> | |||
table, th, td { | |||
border: 1px solid black; | |||
} | |||
</style> | |||
<table> | <table> | ||
<tr> | <tr> | ||
第91行: | 第105行: | ||
<sample title="" hererun="s" desc=""> | <sample title="" hererun="s" desc=""> | ||
<style> | |||
table, th, td { | |||
border: 1px solid black; | |||
} | |||
</style> | |||
<table style="width:100%"> | <table style="width:100%"> | ||
<caption>Monthly savings</caption> | <caption>Monthly savings</caption> |
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 属性:
示例
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> 标签之后。