HTML <th> 标签

Định nghĩa và cách sử dụng

<th> Thẻ <th> định nghĩa ô tiêu đề trong bảng HTML.

HTML bảng có hai loại ô:

  • Ô tiêu đề - chứa thông tin tiêu đề (sử dụng <th> tạo phần tử)
  • Ô dữ liệu - chứa dữ liệu (sử dụng <td> tạo phần tử)

Mặc định,<th> Văn bản trong phần tử là đậm và căn giữa.

Mặc định, văn bản trong phần tử <td> là bình thường và căn trái.

Xem thêm:

Giáo trình HTML:HTML 表格

Tài liệu tham khảo HTML DOM:Đối tượng TableHeader

Giáo trình CSS:Đặt kiểu cho biểu mẫu

Mô hình

Ví dụ 1

Bảng HTML đơn giản chứa ba hàng, hai ô tiêu đề và bốn ô dữ liệu:

<table>
  <tr>
    <th>Tháng</th>
    <th>Lưu trữ</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Tháng Hai</td>
    <td>￥4500</td>
  </tr>
</table>

Thử ngay

Ví dụ 2

Cách căn chỉnh: <th> nội dung (sử dụng CSS):

<table style="width:100%">
  <tr>
    <th style="text-align:left">Tháng</th>
    <th style="text-align:left">Tiết kiệm</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Tháng Hai</td>
    <td>￥4500</td>
  </tr>
</table>

Thử ngay

Ví dụ 3

Cách thêm màu nền vào ô tiêu đề bảng (sử dụng CSS):

<table>
  <tr>
    <th style="background-color:#FF0000">Tháng</th>
    <th style="background-color:#00FF00">Tiết kiệm</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
 </table>

Thử ngay

Ví dụ 4

Cách thiết lập chiều cao của ô tiêu đề bảng (sử dụng CSS):

<table>
  <tr>
    <th style="height:100px">Tháng</th>
    <th style="height:100px">Lưu trữ</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
</table>

Thử ngay

Ví dụ 5

Cách quy định không đổi hàng trong ô tiêu đề bảng (sử dụng CSS):

<table>
  <tr>
    <th>Tháng</th>
    <th style="white-space:nowrap">Tiền tiết kiệm cho xe mới</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
</table>

Thử ngay

Ví dụ 6

Cách canh chỉnh theo chiều dọc <th> nội dung (sử dụng CSS):

<table style="width:50%;">
  <tr style="height:100px">
    <th style="vertical-align:bottom">Tháng</th>
    <th style="vertical-align:bottom">Lưu trữ</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
</table>

Thử ngay

Ví dụ 7

Cách thiết lập chiều rộng ô tiêu đề bảng (sử dụng CSS):

<table style="width:100%">
  <tr>
    <th style="width:70%">Tháng</th>
    <th style="width:30%">Lưu trữ</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
</table>

Thử ngay

Ví dụ 8

Cách tạo tiêu đề bảng:

<table>
  <tr>
    <th>Tên</th>
    <th>Điện thoại email</th>
    <th>Điện thoại</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Thử ngay

Ví dụ 9

Cách tạo bảng có tiêu đề:

<table>
  <caption>Lưu trữ hàng tháng</caption>
  <tr>
    <th>Tháng</th>
    <th>Lưu trữ</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Tháng Hai</td>
    <td>￥4500</td>
  </tr>
</table>

Thử ngay

Ví dụ 10

Cách định nghĩa ô bảng vượt qua nhiều hàng hoặc nhiều cột:

<table>
  <tr>
    <th>Tên</th>
    <th>Điện thoại email</th>
    <th colspan="2">Điện thoại</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>

Thử ngay

Thuộc tính

Thuộc tính Giá trị Mô tả
abbr Text Định nghĩa phiên bản rút gọn của nội dung ô tiêu đề.
colspan Số Định nghĩa số cột cần vượt qua của ô tiêu đề.
headers header_id Định nghĩa một hoặc nhiều ô tiêu đề liên quan đến ô.
rowspan Số Định nghĩa số hàng cần vượt qua của ô tiêu đề.
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
支持 支持 支持 支持 支持