|
Nội dung bài viết 1. Giới thiệu về Table trong HTML 2. Một số thẻ (tag) phổ biến của Table HTML 3. Cách tạo cấu trúc dữ liệu bảng bằng HTML 4. Cách định dạng bảng trong HTML 5. Một số cách sử dụng Table HTML 6. Khi nào cần sử dụng dữ liệu Table HTML? 7. Tổng kết Table |
Table HTML là một phần tử HTML giúp bạn thể hiện dữ liệu một cách trực quan, dễ đọc và dễ hiểu đến với người dùng. Cấu trúc dữ liệu bảng cũng là một lựa chọn phù hợp để bạn chắt lọc, lựa chọn và hiển thị nội dung nổi bật trên trang web theo cách ngắn gọn nhất. Vậy Table HTML là gì và cách sử dụng cấu trúc dữ liệu này như thế nào? Đọc bài viết dưới đây để tìm hiểu về: Cấu trúc dữ liệu bảng trong HTML Một số thuộc tính và thẻ tags phổ biến trong dữ liệu bảng Cách sử dụng dữ liệu bảng và ví dụ phân tích cụ thể Giới thiệu về Table trong HTML Bảng (Table) là phần tử HTML thể hiện dữ liệu được sắp xếp theo hàng và cột tương tự như một bảng tính. Trong HTML, cấu trúc bảng có thể giúp bạn dễ dàng sắp xếp các thành phần từ đơn giản đến phức tạp theo một cách hoàn chỉnh với đầy đủ về tiêu đề hàng, cột, tiêu đề hợp nhất,… Nội dung hay dữ liệu của bảng sẽ được bao bọc bởi cặp thẻ chính là:
Đọc bài viết dưới đây để tìm hiểu về:
- Cấu trúc dữ liệu bảng trong HTML
- Một số thuộc tính và thẻ tags phổ biến trong dữ liệu bảng
- Cách sử dụng dữ liệu bảng và ví dụ phân tích cụ thể
Bảng (Table) là phần tử HTML thể hiện dữ liệu được sắp xếp theo hàng và cột tương tự như một bảng tính. Trong HTML, cấu trúc bảng có thể giúp bạn dễ dàng sắp xếp các thành phần từ đơn giản đến phức tạp theo một cách hoàn chỉnh với đầy đủ về tiêu đề hàng, cột, tiêu đề hợp nhất,…
<table> và </table>
|
<tr>
<td>Ô 1</td>
<td>Ô 2</td>
<td>Ô 3</td>
</tr>
<tr>
<td>Ô 4</td>
<td>Ô 5</td>
<td>Ô 6</td>
</tr>
</table>
| Dữ liệu 1-1 | Dữ liệu 1-2 | Dữ liệu 1-3 |
| Dữ liệu 2-1 | Dữ liệu 2-2 | Dữ liệu 2-3 |
- <th>: Xác định tiêu đề (headings) trong bảng, được sử dụng bên trong cặp thẻ <tr></tr>.
- <tr>: Xác định một hàng (row) trong bảng
- <td>: Xác định 1 ô trong bảng và được đặt nằm trong cặp thẻ <tr></tr>.
- <caption>: Ghi chú thích cho bảng
- <colgroup>: Chỉ định một nhóm (gồm một hoặc nhiều cột) trong bảng
- <col>: Được đặt trong thẻ <colgroup> và dùng để quy định thuộc tính cho cột.
- <thead>: Xác định nội dung các tiêu đề trong một bảng
- <tbody>: Chứa các nội dung chính trong bảng
- <tfoot>: Tạo nội dung ở chân trang (footer) cho bảng
<table>
<tr>
<td>Ô đầu tiên</td>
<td>Ô thứ hai</td>
<td>Ô thứ ba</td>
<td>Ô thứ tư</td>
</tr>
</table>
| Ô đầu tiên | Ô thứ hai | Ô thứ ba | Ô thứ tư |
<tr> <td>Ô đầu tiên</td> <td>Ô thứ hai</td> <td>Ô thứ ba</td> <td>Ô thứ tư</td> </tr> <tr> <td>Hàng thứ hai, ô đầu tiên</td> <td>Hàng thứ hai, ô thứ 2</td> <td>Hàng thứ hai, ô thứ 3</td> <td>Hàng thứ hai, ô thứ 4</td> </tr> </table>
| Ô đầu tiên | Ô thứ hai | Ô thứ ba | Ô thứ tư |
| Hàng thứ hai, ô đầu tiên | Hàng thứ hai, ô thứ 2 | Hàng thứ hai, ô thứ 3 | Hàng thứ hai, ô thứ 4 |
<table> <tr> <th>Họ</th> <th>Tên</th> <th>Số điện thoại</th> </tr> <tr> <td>Nguyễn</td> <td>Thảo</td> <td>0123456789</td> </tr> <tr> <td>Lê</td> <td>Tuấn</td> <td>0987654321</td> </tr>
| Họ | Tên | Số điện thoại |
| Nguyễn | Thảo | 0123456789 |
| Lê | Tuấn | 0987654321 |
- <thead> có nhiệm vụ gom nhóm tiêu đề bảng, thường sẽ là hàng đầu tiên. Nếu bạn có đang sử dụng thuộc tính <col> hoặc <colgroup> thì <thead> sẽ ở ngay bên dưới thuộc tính này.
- Đối với <tfoot> sẽ bao gồm các nội dung ở phía cuối của bảng, thường sẽ là các cột mang nội dung thành tiền hoặc là đếm tổng.
- <tbody> sẽ bao bọc các phần nội dung của bảng, sẽ xuất hiện ở ngay bên dưới nội dung của <thead>.
Trong code table HTML dù bạn có thay đổi vị trí của các thẻ
<tbody> hoặc <thead> (ví dụ bạn viết
<tbody> trên cùng, còn <thead> ở giữa)
thì khi hiển thị trên trang web, nội dung của thẻ
<tbody> vẫn sẽ nằm đúng ở vị trí ngay giữa.Điều này nghĩa là nếu bạn đặt các nhóm này ở đâu thì khi hiển thị vẫn theo đúng trình tự
<thead>, <tbody> và
<tfoot>.