Thẻ td trong HTML

Ví dụ

Một bảng HTML đơn giản với hai ô:
<table>
<tr>
<td>ô A</td>
<td>ô B</td>
</tr>
</table>

Kết quả:

ô A ô B

Định nghĩa và cách dùng

Thẻ <td> định nghĩa một ô tiêu chuẩn trong bảng HTML.

Một bảng HTML có hai kiểu ô:

  • Ô tiêu đề – bao gồm nội dung tiêu đề (được tạo thành từ thẻ <th>)
  • Ô tiêu chuẩn – bao gồm các dữ liệu (được tạo thành từ thẻ <td>)

Văn bản bên trong phần tử <th> được bôi đậm và căn giữa theo mặc định.

Văn bản bên trong phần tử <td> ở dạng bình thường và căn lề trái theo mặc định.

Trình duyệt hỗ trợ

Thẻ  Chrome  IE  FireFox  Safari  Opera
<td>

Các mẹo và lưu ý

Mẹo: Sử dụng thuộc tính colspan và rowspan khi cần thiết.

Sự khác nhau giữa HTML 4.01 và HTML5

Tất cả các thuộc tính layout đều bị loại bỏ trong HTML5.

Các thuộc tính

Thuộc tính Giá trị Mô tả
abbr text Không hỗ trợ trong HTML5.
Chỉ định phiên bản rút gọn nội dung trong ô
align left
right
center
justify
char
Không hỗ trợ trong HTML5.
Căn lề nội dung trong ô
axis category_name Không hỗ trợ trong HTML5.
Nhóm các ô
bgcolor rgb(x,x,x)
#xxxxxx
tên màu sắc
Không hỗ trợ trong HTML5.
Chỉ định màu nền cho ô
char character Không hỗ trợ trong HTML5.
Căn lề nội dung trong ô tới một ký tự
charoff number Không hỗ trợ trong HTML5.
Thiết lập số lượng ký tự nội dung sẽ căn lề từ ký tự chỉ định bới thuộc tính char
colspan number Chỉ định số lượng cột một ô nên span
headers header_id Chỉ định một hoặc nhiều ô tiêu đề có liên quan
height pixels
%
Không hỗ trợ trong HTML5.
Thiết lập chiều cao của ô
nowrap nowrap Không hỗ trợ trong HTML5.
Chỉ định nội dung bên trong một ô không cần wrap
rowspan number Thiết lập số hàng một ô nên span
scope col
colgroup
row
rowgroup
Không hỗ trợ trong HTML5.
Định nghĩa cách liên kết ô tiêu đề và ô dữ liệu trong một bảng
valign top
middle
bottom
baseline
Không hỗ trợ trong HTML5.
Căn lề nội dung theo chiều thẳng đứng trong ô
width pixels
%
Không hỗ trợ trong HTML5.
Chỉ định chiều rộng của ô

Thiết lập CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị phần tử <td> với các giá trị mặc định sau:

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

Leave a Comment