Thẻ HTML <td>
Định nghĩa và cách sử dụng thẻ <td>
Thẻ <td>
xác định một ô dữ liệu tiêu chuẩn trong bảng HTML. Một bảng HTML có hai loại ô:
- Ô tiêu đề - chứa thông tin tiêu đề (được tạo bằng phần tử
<th>
)
Ô dữ liệu - chứa dữ liệu (được tạo bằng phần tử<td>
)
Theo mặc định, văn bản trong phần tử <td>
là văn bản thông thường và được căn trái, còn văn bản trong phần tử <th>
được in đậm và căn giữa.
Ví dụ về một bảng HTML đơn giản, có hai hàng và bốn ô bảng:
<table>
<tr>
<td>Ô A</td>
<td>Ô B</td>
</tr>
<tr>
<td>Ô C</td>
<td>Ô D</td>
</tr>
</table>
Hỗ trợ trình duyệt
Phần tử <td> | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Có | Có | Có | Có | Có |
Thuộc tính
Thuộc tính | Giá trị | Mô tả |
---|---|---|
colspan | number | Chỉ định số cột mà một ô sẽ trải dài |
headers | header_id | Chỉ định một hoặc nhiều ô tiêu đề mà ô có liên quan đến |
rowspan | number | Đặt số hàng mà một ô sẽ trải dài |
Thuộc tính Global
Thẻ <td>
cũng hỗ trợ thuộc tính Global trong HTML.
Thuộc tính sự kiện
Thẻ <td>
cũng hỗ trợ thuộc tính sự kiện trong HTML.
Các ví dụ khác
Cách căn chỉnh nội dung bên trong <td> (bằng CSS):
<table style="width:100%">
<tr>
<th>Tháng</th>
<th>Số tiền tiết kiệm</th>
</tr>
<tr>
<td>Tháng 1</td>
<td style="text-align:right">$100</td>
</tr>
<tr>
<td>Tháng 2</td>
<td style="text-align:right">$80</td>
</tr>
</table>
Cách thêm màu nền vào ô bảng (bằng CSS):
<table>
<tr>
<th>Tháng</th>
<th>Số tiền tiết kiệm</th>
</tr>
<tr>
<td style="background-color:#FF0000">Tháng 1</td>
<td style="background-color:#00FF00">$100</td>
</tr>
</table>
Cách đặt chiều cao của ô trong bảng (bằng CSS):
<table>
<tr>
<th>Tháng</th>
<th>Số tiền tiết kiệm</th>
</tr>
<tr>
<td style="height:100px">Tháng 1</td>
<td style="height:100px">$100</td>
</tr>
</table>
Cách chỉ định không ngắt dòng trong ô bảng (bằng CSS):
<table>
<tr>
<th>Poem</th>
</tr>
<tr>
<td style="white-space:nowrap">Never increase, beyond what is necessary, the number of entities required to explain anything</td>
</tr>
</table>
Cách căn chỉnh dọc nội dung bên trong <td> (bằng CSS):
<table style="width:50%;">
<tr>
<th>Tháng</th>
<th>Số tiền tiết kiệm</th>
</tr>
<tr style="height:100px">
<td style="vertical-align:bottom">Tháng 1</td>
<td style="vertical-align:bottom">$100</td>
</tr>
</table>
Cách đặt độ rộng của ô trong bảng (bằng CSS):
<table style="width:100%">
<tr>
<th>Tháng</th>
<th>Số tiền tiết kiệm</th>
</tr>
<tr>
<td style="width:70%">Tháng 1</td>
<td style="width:30%">$100</td>
</tr>
</table>
Cách tạo tiêu đề bảng:
<table>
<tr>
<th>Tên</th>
<th>Email</th>
<th>Số điện thoại</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
</tr>
</table>
Cách tạo bảng có chú thích:
<table>
<caption>Số tiền tiết kiệm hàng tháng</caption>
<tr>
<th>Tháng</th>
<th>Số tiền tiết kiệm</th>
</tr>
<tr>
<td>Tháng 1</td>
<td>$100</td>
</tr>
<tr>
<td>Tháng 2</td>
<td>$80</td>
</tr>
</table>
Cách xác định các ô trong bảng trải rộng trên nhiều hàng hoặc một cột:
<table>
<tr>
<th>Tên</th>
<th>Email</th>
<th colspan="2">Số điện thoại</th>
</tr>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
Cài đặt CSS mặc định
Hầu hết mọi 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;
}
Bạn nên đọc
![❖](https://st.quantrimang.com/photos/avatars/default.png)
![❖](https://st.quantrimang.com/photos/image/icon/hoc-HTML-5-size-24x24-znd.png)
Cũ vẫn chất
-
Stt cho những đêm tâm trạng không ngủ được
Hôm qua -
Những status cảm động níu kéo người yêu cũ
2 ngày -
Cách chèn emoji vào ảnh trên iPhone cực đơn giản
Hôm qua -
Cách viết chữ màu Liên Quân Mobile
2 ngày 2 -
Hình nền mở khóa điện thoại hài hước, hình nền mở khóa troll bá đạo
Hôm qua -
Công thức Minecraft để chế tạo đồ cơ bản, thức ăn, công cụ dụng cụ, đồ bảo hộ, len, màu nhuộm
Hôm qua 1 -
Cách view source, xem mã nguồn trang web bằng điện thoại, máy tính
Hôm qua 1 -
46 câu ca dao hài hước, châm biếm hay nhất
2 ngày -
Cách chuyển dữ liệu giữa các máy tính
2 ngày -
Code Hello Cafe VNG mới nhất và cách nhập code
2 ngày