HTML <th> 标签

定义和用法

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

HTML 表格有两种单元格：

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

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

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

另请参阅：

HTML 教程：HTML 表格

HTML DOM 参考手册：TableHeader 对象

CSS 教程：设置表单的样式

实例

例子 1

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

<table>
  <tr>
    <th>Bulan</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Coba sendiri

例子 2

如何对齐？ <th> ISI DALAMNYA (menggunakan CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Bulan</th>
    <th style="text-align:left">Simpanan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Coba sendiri

例子 3

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

<table>
  <tr>
    <th style="background-color:#FF0000">Bulan</th>
    <th style="background-color:#00FF00">Simpanan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
 </table>

Coba sendiri

例子 4

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

<table>
  <tr>
    <th style="height:100px">Bulan</th>
    <th style="height:100px">Simpanan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Coba sendiri

Contoh 5

Bagaimana untuk menentukan sel judul tabel untuk tidak berubah baris (menggunakan CSS):

<table>
  <tr>
    <th>Bulan</th>
    <th style="white-space:nowrap">Uang untuk kereta baru</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Coba sendiri

Contoh 6

Bagaimana untuk menggeser secara vertikal: <th> ISI DALAMNYA (menggunakan CSS):

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

Coba sendiri

Contoh 7

Bagaimana untuk menetapkan lebar sel judul tabel (menggunakan CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Bulan</th>
    <th style="width:30%">Simpanan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
</table>

Coba sendiri

Contoh 8

Bagaimana untuk membuat judul tabel:

<table>
  <tr>
    <th>Nama</th>
    <th>Emel</th>
    <th>Telefon</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Coba sendiri

Contoh 9

Bagaimana untuk membuat tabel dengan judul:

<table>
  <caption>Simpanan Bulanan</caption>
  <tr>
    <th>Bulan</th>
    <th>Simpanan</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
</table>

Coba sendiri

Contoh 10

Bagaimana untuk menentukan sel tabel yang melintasi banyak baris atau kolom:

<table>
  <tr>
    <th>Nama</th>
    <th>Emel</th>
    <th colspan="2">Telefon</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>

Coba sendiri

Atribut

Atribut Nilai Penerangan
abbr Teks Tetapkan versi singkat konten sel keterangan.
colspan Nombor Tetapkan bilangan lini yang dijumpai selengkapnya untuk sel keterangan.
headers header_id Tetapkan satu atau lebih sel keterangan yang berhubungan dengan sel.
rowspan Nombor Tetapkan bilangan baris yang dijumpai selengkapnya untuk sel keterangan.
scope
  • col
  • colgroup
  • row
  • rowgroup
 表头单元格是列头、行头还是一组列或行的头部。

全局属性

<th> 标签还支持 HTML 中的全局属性。

事件属性

<th> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <th> 元素：

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

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持