Table là một công cụ giúp chúng ta hiển thị dữ liệu dạng bảng trên website một cách dễ dàng. Trong bài viết này chúng ta cùng tìm hiểu cấu trúc và cách sử dụng bảng html.
Trong quá khứ tôi tin rằng bạn đã từng làm việc với Excel đúng không. Đó là một ứng dụng chuyên xử lý dữ liệu trên bảng. Khi sử dụng bảng trên html nó vẫn có cấu trúc hoàn toàn tương tự.
Bên dưới là hình ảnh demo của một bảng chứa danh sách người dùng.
| STT | Họ Và Tên |
| 1 | Phan Văn Cương |
| 2 | Trần Thu Hằng |
Cách sử dụng table trong html
- Header: Tiêu đề của các trường dữ liệu trong bảng (
thead) - Body: Nội dung dữ liệu của bảng(
tbody) - Footer: Phần chân của bảng (
tfoot) - tr: Định nghĩa hàng
- td định nghĩa cột
Bảng được bởi các dòng và cột, giao giữa hàng và cột ta gọi nó là một ô trong bảng.
Bên dưới là ví dụ demo một bảng trong thực tế:
<body>
<table>
<caption>Danh sách học bổng</caption>
<thead>
<tr>
<th>STT</th>
<th>Họ Và Tên</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Phan Văn Cương</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thu Hằng</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Số lượng</td>
<td>2</td>
</tr>
</tfoot>
</table>
</body>
Caption: Chú thích nội dung của bảng
<caption>Danh sách học bổng</caption>
Bạn cần chú ý một dòng được định nghĩa bằng thẻ tr và các cột bằng thẻ td.
Qua ví dụ trên ta có:
#1. Tiêu đề bảng
<thead>
<tr>
<th>STT</th>
<th>Họ Và Tên</th>
</tr>
</thead>
#2. Thân của bảng
<tbody>
<tr>
<td>1</td>
<td>Phan Văn Cương</td>
</tr>
<tr>
<td>2</td>
<td>Trần Thu Hằng</td>
</tr>
</tbody>
#3. Chân của bảng
<tfoot>
<tr>
<td>Số lượng</td>
<td>2</td>
</tr>
</tfoot>
Một ưu điểm khi xây dựng table theo cấu trúc thead, tbody, tfoot nó cực kỳ tiện lợi khi muốn Css cho từng phần của bảng.
Tất nhiên thường bảng có tiêu đề và nội dung, phần tfoot có thể có hoặc không.
Tổng kết
Bảng là một phần rất quan trọng trong quá trình học html css xây dựng giao diện website, chúng ta sử dụng nó để hiển thị danh sách đơn hàng, danh sách thành viên, … đủ loại nội dung khác nhau.
Ngay bây giờ bạn cần thực hành lại và xây dựng cấu trúc html của bảng hoàn chỉnh từ đó bạn sẽ nắm sâu được bài học hơn.
Xin chào, sớm hẹn gặp lại!
