Thẻ bảng (<table>) trong HTML được sử dụng để tạo bảng trên trang web. Dưới đây là hướng dẫn chi tiết về cách sử dụng các thẻ HTML để xây dựng bảng, bao gồm cấu trúc cơ bản, các phần tử quan trọng, và một số thuộc tính hữu ích.
Cấu Trúc Cơ Bản Của Bảng
Một bảng cơ bản trong HTML bao gồm các thẻ sau:
<table>: Định nghĩa bảng.<tr>: Định nghĩa một hàng trong bảng.<td>: Định nghĩa một ô dữ liệu trong bảng.<th>: Định nghĩa một ô tiêu đề trong bảng.<thead>: Định nghĩa phần tiêu đề của bảng.<tbody>: Định nghĩa phần thân của bảng.<tfoot>: Định nghĩa phần chân của bảng.
Ví Dụ Về Bảng Cơ Bản
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Table Example</title>
<style>
table {
width: 100%;
border-collapse: collapse; /* Gộp các đường viền bảng */
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Họ Tên</th>
<th>Tuổi</th>
<th>Địa Chỉ</th>
</tr>
</thead>
<tbody>
<tr>
<td>Nguyễn Văn A</td>
<td>30</td>
<td>Hà Nội</td>
</tr>
<tr>
<td>Trần Thị B</td>
<td>25</td>
<td>Hồ Chí Minh</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Tổng số người: 2</td>
</tr>
</tfoot>
</table>
</body>
</html>
Các Thẻ Trong Bảng
<table>: Bao bọc toàn bộ bảng.
<tr>: Định nghĩa hàng của bảng. Mỗi hàng có thể chứa một hoặc nhiều ô dữ liệu.
<td>: Định nghĩa ô dữ liệu trong bảng. Được sử dụng trong các hàng của bảng để chứa nội dung.
<th>: Định nghĩa ô tiêu đề trong bảng. Ô tiêu đề thường có chữ đậm và căn giữa, và được sử dụng để đặt tiêu đề cho các cột của bảng.
<thead>: Định nghĩa phần tiêu đề của bảng. Thường chứa các thẻ <tr> với các thẻ <th>.
<tbody>: Định nghĩa phần thân của bảng. Chứa các hàng dữ liệu chính của bảng.
<tfoot>: Định nghĩa phần chân của bảng. Thường chứa các thẻ <tr> với tổng hợp hoặc thông tin kết luận của bảng.
Các Thuộc Tính Cơ Bản
colspan: Được sử dụng trong thẻ <td> hoặc <th> để xác định số cột mà ô đó sẽ chiếm.
<td colspan="2">Ô này chiếm 2 cột</td>
rowspan: Được sử dụng trong thẻ <td> hoặc <th> để xác định số hàng mà ô đó sẽ chiếm.
<td rowspan="2">Ô này chiếm 2 hàng</td>
CSS Tùy Chỉnh Bảng
Bạn có thể sử dụng CSS để tùy chỉnh bảng, như thêm đường viền, thay đổi màu nền, điều chỉnh khoảng cách, và nhiều hơn nữa.
border-collapse: Kiểm soát cách các đường viền bảng được gộp lại. Có giá trị collapse (gộp lại) và separate (tách biệt).
border-spacing: Xác định khoảng cách giữa các ô trong bảng khi border-collapse là separate.
width: Xác định chiều rộng của bảng.
text-align: Xác định cách căn chỉnh văn bản trong ô.
Ví Dụ CSS Tùy Chỉnh Bảng
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 2px solid #4CAF50; /* Đường viền màu xanh lá */
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50; /* Màu nền xanh lá cho tiêu đề */
color: white;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2; /* Màu nền cho hàng chẵn */
}
tfoot {
font-weight: bold;
}
</style>
Bảng HTML là một công cụ mạnh mẽ để tổ chức và trình bày dữ liệu trên trang web. Việc sử dụng đúng các thẻ và thuộc tính sẽ giúp bảng của bạn trở nên dễ đọc và chuyên nghiệp.
