HTML cung cấp thẻ <table> để hiển thị dữ liệu dạng bảng – cực kỳ hữu ích cho danh sách, thống kê, lịch biểu…
1. Cấu trúc cơ bản của bảng
<table>
<tr>
<th>Tiêu đề 1</th>
<th>Tiêu đề 2</th>
</tr>
<tr>
<td>Dòng 1, ô 1</td>
<td>Dòng 1, ô 2</td>
</tr>
<tr>
<td>Dòng 2, ô 1</td>
<td>Dòng 2, ô 2</td>
</tr>
</table>
| Thẻ | Vai trò |
|---|---|
<table> | Bắt đầu bảng |
<tr> | Table row – hàng |
<td> | Table data – ô thường |
<th> | Table header – ô tiêu đề |
2. Ví dụ bảng thông tin học sinh
<table border="1">
<tr>
<th>STT</th>
<th>Họ tên</th>
<th>Lớp</th>
</tr>
<tr>
<td>1</td>
<td>Nguyễn Văn A</td>
<td>10A1</td>
</tr>
<tr>
<td>2</td>
<td>Lê Thị B</td>
<td>10A2</td>
</tr>
</table>
Thuộc tính
border="1"để tạo viền bảng (dùng thử nghiệm, khi dùng CSS sẽ đẹp hơn).
3. colspan và rowspan – gộp cột và hàng
Gộp cột (colspan)
<tr>
<td colspan="2">Gộp 2 cột</td>
</tr>
Gộp hàng (rowspan)
<tr>
<td rowspan="2">Gộp 2 hàng</td>
<td>Hàng 1</td>
</tr>
<tr>
<td>Hàng 2</td>
</tr>
4. Thực hành
Tạo file bang-diem.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bảng điểm</title>
</head>
<body>
<h1>Bảng điểm lớp 10A1</h1>
<table border="1" cellpadding="8" cellspacing="0">
<tr>
<th rowspan="2">STT</th>
<th rowspan="2">Họ tên</th>
<th colspan="3">Điểm</th>
</tr>
<tr>
<th>Toán</th>
<th>Văn</th>
<th>Anh</th>
</tr>
<tr>
<td>1</td>
<td>Nguyễn Văn A</td>
<td>9</td>
<td>8</td>
<td>7</td>
</tr>
<tr>
<td>2</td>
<td>Lê Thị B</td>
<td>7</td>
<td>9</td>
<td>8</td>
</tr>
</table>
</body>
</html>
5. Ghi nhớ nhanh
| Thẻ | Vai trò |
|---|---|
<table> | Tạo bảng |
<tr> | Tạo hàng |
<td> | Tạo ô dữ liệu |
<th> | Tạo ô tiêu đề, chữ in đậm |
colspan | Gộp nhiều cột |
rowspan | Gộp nhiều hàng |
Thảo luận