二维码
搜索 ×

HTML 表格标题

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

HTML 表格标题

HTML 表格可以具有每列或每行的标题，也可以具有许多列/行的标题。

HTML 表格标题

表头是用元素定义的。 每个元素表示一个表单元格。th``th

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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

1
2
3
th {
  text-align: left;
}

多列的标题

标题可以跨越两列或多列。

为此，请使用元素上的属性：colspan``<th>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

您将在表 colspan 和 rowspan 一章中了解有关 [colspan 和 rowspan]的更多信息。

表格标题

您可以添加标题，用作整个表格的标题。

若要向表格添加标题，请使用以下标记：<caption>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

推荐教程