HTML <th> ˈmakina

定义和用法

<th> 标签定义 HTML 表格中的标题单元格。

HTML 表格有两种单元格：

  • 标题单元格 - 包含标题信息（使用 <th> 元素创建）
  • 数据单元格 - 包含数据（使用 <td> 元素创建）

默认情况下，<th> 元素中的文本是粗体且居中的。

默认情况下，<td> 元素中的文本是普通的并且左对齐的。

另请参阅：

HTML 教程：HTML ˈtabeli

HTML DOM 参考手册：TableHeader 对象

CSS 教程：设置表单的样式

实例

例子 1

一个包含三行、两个标题单元格和四个数据单元格的简单 HTML 表格：

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

Try it yourself

例子 2

如何对齐 <th> content (using CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">月份</th>
    <th style="text-align:left">储蓄</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

Try it yourself

例子 3

如何将背景颜色添加到表格标题单元格（使用 CSS）：

<table>
  <tr>
    <th style="background-color:#FF0000">月份</th>
    <th style="background-color:#00FF00">储蓄</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
 </table>

Try it yourself

例子 4

如何设置表格标题单元格的高度（使用 CSS）：

<table>
  <tr>
    <th style="height:100px">Month</th>
    <th style="height:100px">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
</table>

Try it yourself

Example 5

How to specify non-breaking space in table header cells (using CSS):

<table>
  <tr>
    <th>Month</th>
    <th style="white-space:nowrap">Money saved for a new car</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
</table>

Try it yourself

Example 6

How to align vertically: <th> content (using CSS):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">Month</th>
    <th style="vertical-align:bottom">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
</table>

Try it yourself

Example 7

How to set the width of table header cells (using CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Month</th>
    <th style="width:30%">Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
</table>

Try it yourself

Example 8

How to create table headers:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Try it yourself

Example 9

How to create a table with headers:

<table>
  <caption>Monthly Savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

Try it yourself

Example 10

How to define table cells that span multiple rows or columns:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Try it yourself

Attribute

Attribute Value Description
abbr Text Inahidi inaunda ya kina kikimbili kwa kina kikimbili cha kufikia kufikia mitaani inayotumiwa.
colspan Number Inahidi kiwango cha kina kikimbili cha kufikia kufikia mitaani inayotumiwa.
headers header_id Inahidi kiwango cha kina kikimbili cha kufikia kufikia mitaani inayotumiwa.
rowspan Number Inahidi kwa kina hili kwa kuwa kiwango cha mitaani kikimbili ya kufikia kufikia mitaani inayotumiwa.
scope
  • col
  • colgroup
  • row
  • rowgroup
 Kichwa cha msingi ni kichwa cha kikundi, kichwa cha mawingu au kikundi cha kikundi au mawingu.

Matokeo ya kipimo cha kawaida

<th> Takwimu pia inakubaliwa Matokeo ya kipimo cha kawaida ya HTML.

Matokeo ya kipimo

<th> Takwimu pia inakubaliwa Matokeo ya kipimo cha HTML.

Miguso wa CSS wa kawaida

Vingine wa kawaida wa kifunzi kinaonyesha valueshi zifuatavyo <th> Mfano:

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
{}

Matumizi ya kifunzi cha kawaida

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Msaada Msaada Msaada Msaada Msaada