Thẻ HTML <tr>
Định nghĩa và cách sử dụng thẻ <tr>
Thẻ <tr>
xác định một hàng trong bảng HTML. Ví dụ về một bảng HTML đơn giản có ba hàng, một hàng tiêu đề và hai hàng dữ liệu:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Phần tử <tr>
chứa một hoặc nhiều phần tử <th> hoặc <td>.
Hỗ trợ trình duyệt
Phần tử <tr> | Google Chrome | MS Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Có | Có | Có | Có | Có |
Thuộc tính Global
Thẻ <tr>
cũng hỗ trợ thuộc tính Global trong HTML.
Thuộc tính sự kiện
Thẻ <tr>
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 <tr>
(bằng CSS):
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr style="text-align:right">
<td>January</td>
<td>$100</td>
</tr>
</table>
Cách thêm màu nền vào hàng trong bảng (bằng CSS):
<table>
<tr style="background-color:#FF0000">
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
Cách căn chỉnh nội dung theo chiều dọc bên trong <tr>
(bằng CSS):
<table style="height:200px">
<tr style="vertical-align:top">
<th>Month</th>
<th>Savings</th>
</tr>
<tr style="vertical-align:bottom">
<td>January</td>
<td>$100</td>
</tr>
</table>
Cách tạo tiêu đề bảng:
<table>
<tr>
<th>Name</th>
<th>Email</th>
<th>Phone</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>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</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>Name</th>
<th>Email</th>
<th colspan="2">Phone</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 các trình duyệt sẽ hiển thị phần tử <tr>
với những giá trị mặc định sau:
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
79
Bạn nên đọc
0 Bình luận
Sắp xếp theo
Xóa Đăng nhập để Gửi
Cũ vẫn chất
-
Cách tắt đang soạn tin nhắn Zalo
Hôm qua -
200 biệt danh cho người yêu bằng tiếng Anh hay và ngọt ngào
Hôm qua -
Cách thêm email vào Facebook trên điện thoại, máy tính
Hôm qua -
Cách fix lỗi 0xc000007b trên Windows
Hôm qua 4 -
3133 là gì? 3133 là số điện thoại của tổng đài nào? Có phải lừa đảo không?
Hôm qua -
eQuiz - Bài kiểm tra trắc nghiệm về lập trình C (Phần 1)
Hôm qua -
Mẹo lên level nhanh Blox Fruit, lên cấp nhanh Blox Fruit
Hôm qua -
Cách đổi font chữ mặc định trong Google Docs
Hôm qua -
Cách xóa đường kẻ ngang trong Word
Hôm qua -
11 lựa chọn thay thế tốt nhất cho Canva
Hôm qua