码农教程 - 一技在手,衣食无忧! tools

HTML 表格标题

❮ 上一节 下一节 ❯

HTML 表格可以为每列或行或许多列/行设置标题。

埃米尔 托比亚斯 莱纳斯
     
     
     
     
     
8:00    
9:00    
10:00    
11:00    
12:00    
13:00    
周一 治疗费用 星期三 周四 弗瑞
8:00          
9:00          
10:00          
11:00          
12:00          
十二月
     
     
     
     
     

HTML 表格标题

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

示例

<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>元素：

示例

<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>
亲自试一试 »

对齐表格标题

默认情况下，表标题为粗体并居中：

名 姓 年龄
吉尔 史密斯 50
前夕 杰克逊 94

要左对齐表格标题，请使用 CSStext-align属性：

示例

th {
  text-align: left;
}
亲自试一试 »

多列标题

您可以拥有跨越两列或更多列的标题。

姓名 年龄
吉尔 史密斯 50
前夕 杰克逊 94

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

示例

<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 的更多信息表列跨度和行跨度章节。

表格标题

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

每月节省
月 储蓄
一月 $100
二月 $50

要向表格添加标题，请使用<caption>标签：

示例

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

HTML练习

通过练习测试一下

练习:

添加表格标题"Names"。

<table>
  
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
</table>

开始练习


❮ 上一节 下一节 ❯