HTML <td> nhãn

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

<td> Thẻ <td> xác định ô dữ liệu tiêu chuẩn trong bảng HTML.

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

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

Mặc định:<td> Tekst trong thẻ là bình thường và căn trái.

Tekst trong thẻ <th> mặc định là đậm và căn giữa.

Xin xem thêm:

Giáo trình HTML:Bảng HTML

Tham khảo HTML DOM:Đối tượng TableData

Giáo trình CSS:Cài đặt樣式 cho bảng

Mô hình

Ví dụ 1

Một bảng HTML đơn giản, có hai hàng và bốn ô biểu mẫu:

<table>
  <tr>
    <td>Ô A</td>
    <td>Ô B</td>
  </tr>
  <tr>
    <td>Ô C</td>
    <td>Ô D</td>
  </tr>
</table>

Thử ngay

Ví dụ 2

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

<table style="width:100%">
  <tr>
    <th>Tháng</th>
    <th>Lưu trữ</th>
  </tr>
  <tr>
    <td>Tháng Một</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>Tháng Hai</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

Thử ngay

Ví dụ 3

Cách thêm màu nền cho ô biểu mẫu (sử dụng CSS):

<table>
  <tr>
    <th>Tháng</th>
    <th>Lưu trữ</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">Tháng Một</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

Thử ngay

Ví dụ 4

Làm thế nào để thiết lập độ cao ô bảng (sử dụng CSS):

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

Thử ngay

Ví dụ 5

Làm thế nào để quy định không chuyển dòng trong ô bảng (sử dụng CSS):

<table>
  <tr>
    <th>Thơ</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">Đi qua Bạch Đế, màu mây giữa, một ngày trở về Jiangling nghìn dặm. Tiếng hót của tinh tinh hai bên không dừng lại, thuyền nhẹ đã vượt qua ngàn ngọn núi.</td>
  </tr>
</table>

Thử ngay

Ví dụ 6

Làm thế nào để canh ngang dọc <td> nội dung (sử dụng CSS):

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

Thử ngay

Ví dụ 7

Làm thế nào để thiết lập độ rộng ô bảng (sử dụng CSS):

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

Thử ngay

Ví dụ 8

Làm thế nào để tạo tiêu đề bảng:

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

Làm thế nào để 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

Làm thế nào để định nghĩa các ô bảng chéo qua nhiều hàng hoặc cột:

<table>
  <tr>
    <th>Tên</th>
    <th>Điện thoại</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ả
colspan Số Định nghĩa số cột cần chéo qua của ô.
headers header_id Định nghĩa một hoặc nhiều ô tiêu đề liên quan đến ô.
rowspan Số Đặt số dòng cần chéo qua của ô.

Thuộc tính toàn cục

<td> Nhãn cũng hỗ trợ Thuộc tính toàn cục trong HTML.

Thuộc tính sự kiện

<td> Nhãn cũng hỗ trợ Thuộc tính sự kiện trong HTML.

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ sử dụng giá trị mặc định sau để hiển thị <td> Thực thể:

td {
  display: table-cell;
  vertical-align: inherit;
}

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ