6.1 Các yếu tố table và tr
Bảng trong HTML được sử dụng để tổ chức dữ liệu theo dạng bảng. Các thẻ chính được sử dụng để tạo bảng bao gồm <table>, <tr>, và <td>. Hãy cùng tìm hiểu chi tiết từng cái một.
<table>
Thẻ <table> là thùng chứa cho toàn bộ bảng. Bên trong nó có các hàng của bảng, mỗi hàng được xác định bằng thẻ <tr>.
Ví dụ sử dụng:
<table>
<!-- các hàng và ô của bảng sẽ được thêm vào đây -->
</table>
Thẻ <tr> (table row)
Thẻ <tr> đại diện cho một hàng trong bảng. Bên trong thẻ <tr> có các ô của bảng, mỗi ô được xác định bằng thẻ <td> hoặc <th>.
Ví dụ sử dụng:
<table>
<tr>
<!-- các ô của hàng sẽ được thêm vào đây -->
</tr>
</table>
6.2 Các yếu tố td và th
Thẻ <td> (table data)
Thẻ <td> được sử dụng để xác định ô dữ liệu trong một hàng của bảng. Các ô này chứa dữ liệu của bảng và được đặt bên trong hàng, được xác định bằng thẻ
Ví dụ sử dụng:
<table>
<tr>
<td>Ô 1</td>
<td>Ô 2</td>
<td>Ô 3</td>
</tr>
</table>
Thẻ <th> (table head)
Thẻ <th> được sử dụng để đại diện cho các ô tiêu đề của bảng. Văn bản bên trong <th> thường được hiển thị bằng chữ đậm và căn giữa.
Ví dụ sử dụng:
<table>
<tr>
<th>Tiêu đề 1</th>
<th>Tiêu đề 2</th>
<th>Tiêu đề 3</th>
</tr>
</table>
Ví dụ về bảng:
<table>
<tr>
<th>Tên</th> <th>Tuổi</th> <th>Thành phố</th>
</tr>
<tr>
<td>Ivan</td> <td>30</td> <td>Toronto</td>
</tr>
<tr>
<td>Maria</td> <td>25</td> <td>Frankfurt</td>
</tr>
<tr>
<td>Nina</td> <td>35</td> <td>Paris</td>
</tr>
</table>
6.3 Tạo kiểu cho bảng
Bảng cần phải được tạo kiểu bằng CSS — điều này làm tăng đáng kể tính trực quan và dễ đọc của dữ liệu.
Ví dụ, bạn quyết định thêm một viền cho mỗi ô: điều tốt, nhưng do viền có ở từng ô, bây giờ mỗi hai ô lại có một đôi viền — một từ mỗi ô. 🤦♂️
Nếu bạn muốn viền trông như bạn muốn, bạn cần phải dùng CSS để kết hợp các viền liền kề. Có một thuộc tính đặc biệt cho việc này — border-collapse.
Đây là ví dụ về việc tạo kiểu đẹp cho bảng của chúng ta:
table {
width: 50%; /* Đặt chiều rộng của bảng */
border-collapse: collapse; /* Loại bỏ viền kép giữa các ô */
}
th, td {
border: 1px solid black; /* Đặt viền cho các ô */
padding: 8px; /* Thêm khoảng cách bên trong ô */
text-align: left; /* Căn trái văn bản */
}
th {
background-color: #f2f2f2; /* Đặt màu nền cho tiêu đề */
}
Tại đây, chúng ta thấy rằng:
- Mỗi ô có viền dày 1 pixel màu đen
- Viền kép giữa các ô đã được loại bỏ
- Mỗi ô có khoảng cách bên trong để văn bản không dính vào viền
- Ô tiêu đề có màu nền riêng biệt
Thật đẹp!
GO TO FULL VERSION