Cách dùng thẻ table trong HTML – hàng nào lối đấy…

Thẻ <table> là một trong các thẻ phổ biến của HTML, nó hay được dùng để tạo ra các hàng và cột dữ liệu có liên hệ với nhau. Nếu từng biết đến Excel thì chắc chắn bạn cũng không lạ gì khái niệm bảng (table).

Đây là một ví dụ về bảng:

Họ tên	Tuổi	Quê quán
Nguyễn Đức Anh	26	Hà Nội

---

Code mẫu cho bảng trên:

<table border="1">
<tr>
  <td>Họ tên</td>
  <td>Tuổi</td>
  <td>Quê quán</td>
</tr>
<tr>
  <td>Nguyễn Đức Anh</td>
  <td>26</td>
  <td>Hà Nội</td>
</tr>
</table>

1. Bảng bắt đầu bằng thẻ mở <table> và kết thúc bằng thẻ đóng </table>
2. <tr> là viết tắt của table row, nó có nghĩa là hàng của bảng. Trong ví dụ trên: Nguyễn Đức Anh, 26, Hà Nội chính là một hàng, và bạn có thể thấy tất cả dữ liệu này nằm trong cặp thẻ <tr>
3. <td> là viết tắt của table data, nó có nghĩa là các đơn vị dữ liệu cả bảng. Ở trong ví dụ trên Nguyễn Đức Anh chính là một table data và dữ liệu này được đánh dấu bằng cặp thẻ <td>. Tương tự như vậy thì 26 và Hà Nội cũng là một table data.
4. Giữa 2 cặp thẻ <td> có thể là văn bản, liên kết, ảnh, danh sách hoặc form…
5. Hàng thì bao gồm các đơn vị dữ liệu, do vậy cặp thẻ hàng <tr> sẽ bao lấy các cặp thẻ dữ liệu <td>. Bảng thì gồm nhiều hàng cho nên cặp thẻ bảng <table> sẽ bao lấy các thẻ hàng <tr>
6. border=”1″ dùng để tạo các đường viền cho bảng, nếu không có nó sẽ khó nhìn.

---

Khi bạn học sâu hơn về bảng, bạn sẽ thấy, code mẫu ở trên vẫn chưa hoàn toàn chuẩn. Họ tên, tuổi và quê quán đúng là một hàng rồi, tuy nhiên bạn có thấy từng cái chính là tên tương ứng của một trường dữ liệu?

Sẽ có rất nhiều cái tên khác giống như Nguyễn Đức Anh nằm trong trường dữ liệu Họ tên, nhiều tỉnh thành khác sẽ nằm trong trường dữ liệu Quê quán. Do vậy thay vì để Họ tên, Tuổi và Quê quán từng cái nằm trong cặp thẻ <td> thì người ta đặt nó trong cặp thẻ <th> –  là chữ viết tắt của table header, còn được gọi là các thông tin tiêu đề của bảng.

Code chuẩn hơn cho bảng:

<table border=”1″>
<tr>
  <th>Họ tên</th>
  <th>Tuổi</th>
  <th>Quê quán</th>
</tr>
<tr>
  <td>Nguyễn Đức Anh</td>
  <td>26</td>
  <td>Hà Nội</td>
</tr>
</table>

Và đây là kết quả:

Họ tên	Tuổi	Quê quán
Nguyễn Đức Anh	26	Hà Nội

---

1. Theo mặc định thì văn bản nằm trong cặp thẻ <th> được bôi đậm và căn giữa, còn văn bản nằm trong cặp thẻ <td> là chữ thường và căn trái.
2. Cả thẻ <th> và thẻ <td> đều nằm trong cặp thẻ <tr>
3. Bạn có thể hỏi <th> và <td> khác nhau ở chỗ nào. Câu trả lời là <td> dùng để đánh dấu đơn vị dữ liệu cụ thể nào đấy, còn <th> là thông tin tiêu đề chung cho một nhóm các đơn vị dữ liệu.

Bây giờ bạn hãy nhìn bảng sau:

Bạn có thấy sự khác biệt không, giờ bảng đã có thêm một hàng dữ liệu, nhưng điều quan trọng hơn mà tôi muốn nhấn mạnh là chữ “Đội 1” – đây là thông tin chú thích cho bảng.

Code mẫu của bảng Đội 1:

<table border="1">
<caption>Đội 1</caption>
<tr>
  <th>Họ tên</th>
  <th>Tuổi</th>
  <th>Quê quán</th>
</tr>
<tr>
  <td>Nguyễn Đức Anh</td>
  <td>26</td>
  <td>Hà Nội</td></tr>
<tr>
  <td>Hoàng Văn Thái</td>
  <td>24</td>
  <td>Nam Định</td></tr>
</table>

• Để thêm chú thích cho bảng, bạn đưa nó vào trong cặp thẻ <caption></caption> và để nó đứng ngay sau thẻ mở <table>.
• Một bảng chỉ có duy nhất một chú thích.

Thông tin thêm: ngày xưa thẻ <table> còn được dùng để tạo bố cục cho cả trang web nữa, nhưng với sự linh hoạt của thẻ <div>, nó đã dần thay thế <table> trong việc này. Giờ thẻ <table> đã trở về đúng vị trí như tên gọi của nó – dùng để tạo các bảng thông tin.

Tổng kết: vậy là ở bài này, bạn đã học được các thẻ quan trọng của bảng, đó là <table>, <caption>, <tr>, <th> và <td>. Tất cả chúng phối hợp với nhau là đủ để cho bạn cấu trúc một bảng với thông tin khá đầy đủ.

Nếu bạn muốn trang trí, thay đổi kiểu dáng cho bảng thì sao? hãy đọc thêm bài CSS cho thẻ table để biết cách.

---

thead, tbody và tfoot

Là ba chữ viết tắt cho table head, table body và table foot, viết đến đây có lẽ bạn đã hiểu được phần nào ý nghĩa của chúng. Các thẻ này có mục đích chia bảng thành các khối đầu, thân và chân của bảng.

Code mẫu:

<table border=”1″>

<thead>
<tr>
<th>Họ tên</th>
<th>Tuổi</th>
<th>Quê quán</th>
</tr>
</thead>

<tfoot>
<tr>
<td>Tên theo giấy khai sinh</td>
<td>Dưới 30 tuổi</td>
<td>Điền tên Tỉnh/Thành Phố</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>Nguyễn Đức Anh</td>
<td>26</td>
<td>Hà Nội</td>
</tr><tr>
<td>Hoàng Văn Thái</td>
<td>24</td>
<td>Nam Định</td></tr>
</tbody></table>

Kết quả:

---

Ý nghĩa về mặt hiển thị: Ở những bảng có độ dài lớn, chiếm nhiều trang, thẻ thead và tfoot sẽ làm cho các thông tin nằm bên trong luôn hiện lên đầu và cuối thay vì bị biến mất khi người dùng cuộn trang.

Dưới đây là một số thông tin đáng chú ý:

1. Thẻ <tbody> và <tfoot> phải nằm sau <thead>. Hay nói cách khác, thead luôn luôn đứng đầu;
2. Thẻ tfoot phải đứng trước thẻ tbody;
3. Thẻ thead, tbody và tfoot phải chứa ít nhất 1 thẻ tr, dĩ nhiên cả 3 phải nằm trong thẻ table và đứng sau thẻ caption;