HTML - Headers & Caption
Chào mừng các bạn đang học lập trình web! Hôm nay, chúng ta sẽ khám phá thế giới thú vị của các thẻ header và caption trong HTML. Là người đã dạy về điều này trong nhiều năm, tôi có thể告诉 bạn rằng việc thành thạo các yếu tố này sẽ giúp bảng của bạn trông chuyên nghiệp và ngăn nắp hơn. Hãy cùng bắt đầu nào!
Cú pháp
Trước khi chúng ta đi vào chi tiết, hãy nói về cú pháp chúng ta sẽ sử dụng. Trong HTML, chúng ta sử dụng các thẻ cụ thể để xác định header và caption cho bảng của mình. Dưới đây là một tổng quan nhanh:
| Thẻ | Mô tả |
|---|---|
<thead> |
Xác định một nhóm header trong bảng |
<th> |
Xác định một ô header trong bảng |
<caption> |
Xác định caption cho bảng |
Hiện tại, đừng lo lắng nếu điều này trông như một hỗn hợp các chữ cái. Chúng ta sẽ phân tích từng phần, và sớm bạn sẽ sử dụng các thẻ này như một chuyên gia!
Ví dụ về Headers và Captions trong HTML
Hãy bắt đầu với một ví dụ đơn giản để xem các thẻ này hoạt động như thế nào trong thực tế.
<table>
<caption>Sách ưa thích của tôi</caption>
<thead>
<tr>
<th>Tiêu đề</th>
<th>Tác giả</th>
<th>Năm</th>
</tr>
</thead>
<tbody>
<tr>
<td>To Kill a Mockingbird</td>
<td>Harper Lee</td>
<td>1960</td>
</tr>
<tr>
<td>1984</td>
<td>George Orwell</td>
<td>1949</td>
</tr>
</tbody>
</table>Hãy phân tích điều này:
- Chúng ta bắt đầu với thẻ
<table>để tạo bảng của mình. - Thẻ
<caption>cho bảng tiêu đề: "Sách ưa thích của tôi". - Phần
<thead>chứa header của chúng ta. - Trong
<thead>, chúng ta có một<tr>(dòng bảng) với ba<th>(ô header). - Phần
<tbody>chứa các dòng dữ liệu, mỗi dòng có<td>(ô dữ liệu).
Khi hiển thị, bảng này sẽ có một dòng header rõ ràng với chữ in đậm, giúp dễ hiểu hơn về mỗi cột đại diện cho gì.
Kết hợp với '' và '
'
Bây giờ, hãy nâng cấp và thêm footer cho bảng của chúng ta bằng thẻ <tfoot>.
<table>
<caption>Doanh số bán sách</caption>
<thead>
<tr>
<th>Tiêu đề</th>
<th>Tác giả</th>
<th>Doanh số</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>25,000,000</td>
</tr>
<tr>
<td>The Catcher in the Rye</td>
<td>J.D. Salinger</td>
<td>65,000,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Tổng doanh số:</th>
<td>90,000,000</td>
</tr>
</tfoot>
</table>
Trong ví dụ này:
- Chúng ta đã thêm phần
<tfoot> sau <tbody>.
- Dòng footer sử dụng
<th colspan="2"> để tạo một ô header span hai cột.
- Ô cuối cùng trong footer hiển thị tổng doanh số.
Cấu trúc này giúp phân tách nội dung chính (<tbody>) khỏi thông tin tóm tắt (<tfoot>), giúp bảng trở nên có tổ chức và dễ đọc hơn.
Sự khác biệt giữa và
Thường xuyên tôi thấy học sinh nhầm lẫn giữa <thead> và <th>, vì vậy hãy làm rõ điều này:
-
<thead>: Đây là một containner cho nội dung header trong bảng của bạn. Nó nhóm các thông tin header lại với nhau.
-
<th>: Đây xác định một ô header duy nhất trong bảng của bạn.
Hãy tưởng tượng <thead> như một hộp chứa tất cả thông tin header của bạn, trong khi <th> là mỗi nhãn riêng lẻ trong hộp đó.
Hãy xem điều này trong hành động:
<table>
<thead>
<tr>
<th>Tên</th>
<th>Tuổi</th>
<th>Quốc gia</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>Mỹ</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Canada</td>
</tr>
</tbody>
</table>
Trong ví dụ này:
-
<thead> bao quanh toàn bộ phần header.
- Trong
<thead>, chúng ta có một <tr> (dòng bảng).
- Trong dòng đó, chúng ta có ba
<th> cho các header cột.
Nhớ rằng, bạn có thể có nhiều dòng trong <thead> nếu cần, mỗi dòng chứa <th>.
Để kết thúc, hãy xem bảng tóm tắt tất cả các thẻ chúng ta đã học:
Thẻ
Mục đích
Ví dụ
<table>Tạo bảng
<table>...</table>
<caption>Thêm tiêu đề cho bảng
<caption>My Table</caption>
<thead>Nhóm nội dung header
<thead>...</thead>
<th>Xác định ô header
<th>Column Name</th>
<tbody>Nhóm nội dung body
<tbody>...</tbody>
<tfoot>Nhóm nội dung footer
<tfoot>...</tfoot>
<tr>Tạo dòng bảng
<tr>...</tr>
<td>Tạo ô dữ liệu tiêu chuẩn
<td>Data</td>
Và thế là xong! Bây giờ bạn đã được trang bị kiến thức để tạo các bảng có cấu trúc tốt và dễ đọc trong HTML. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngại thử nghiệm với các thẻ này. Trước khi bạn nhận ra, bạn sẽ tạo ra các bảng mà bất kỳ nhà phân tích dữ liệu nào cũng sẽ tự hào!
<tfoot>.<table>
<caption>Doanh số bán sách</caption>
<thead>
<tr>
<th>Tiêu đề</th>
<th>Tác giả</th>
<th>Doanh số</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Great Gatsby</td>
<td>F. Scott Fitzgerald</td>
<td>25,000,000</td>
</tr>
<tr>
<td>The Catcher in the Rye</td>
<td>J.D. Salinger</td>
<td>65,000,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Tổng doanh số:</th>
<td>90,000,000</td>
</tr>
</tfoot>
</table><tfoot> sau <tbody>.<th colspan="2"> để tạo một ô header span hai cột.<tbody>) khỏi thông tin tóm tắt (<tfoot>), giúp bảng trở nên có tổ chức và dễ đọc hơn.Thường xuyên tôi thấy học sinh nhầm lẫn giữa <thead> và <th>, vì vậy hãy làm rõ điều này:
-
<thead>: Đây là một containner cho nội dung header trong bảng của bạn. Nó nhóm các thông tin header lại với nhau. -
<th>: Đây xác định một ô header duy nhất trong bảng của bạn.
Hãy tưởng tượng <thead> như một hộp chứa tất cả thông tin header của bạn, trong khi <th> là mỗi nhãn riêng lẻ trong hộp đó.
Hãy xem điều này trong hành động:
<table>
<thead>
<tr>
<th>Tên</th>
<th>Tuổi</th>
<th>Quốc gia</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>25</td>
<td>Mỹ</td>
</tr>
<tr>
<td>Bob</td>
<td>30</td>
<td>Canada</td>
</tr>
</tbody>
</table>Trong ví dụ này:
-
<thead>bao quanh toàn bộ phần header. - Trong
<thead>, chúng ta có một<tr>(dòng bảng). - Trong dòng đó, chúng ta có ba
<th>cho các header cột.
Nhớ rằng, bạn có thể có nhiều dòng trong <thead> nếu cần, mỗi dòng chứa <th>.
Để kết thúc, hãy xem bảng tóm tắt tất cả các thẻ chúng ta đã học:
| Thẻ | Mục đích | Ví dụ |
|---|---|---|
<table> |
Tạo bảng | <table>...</table> |
<caption> |
Thêm tiêu đề cho bảng | <caption>My Table</caption> |
<thead> |
Nhóm nội dung header | <thead>...</thead> |
<th> |
Xác định ô header | <th>Column Name</th> |
<tbody> |
Nhóm nội dung body | <tbody>...</tbody> |
<tfoot> |
Nhóm nội dung footer | <tfoot>...</tfoot> |
<tr> |
Tạo dòng bảng | <tr>...</tr> |
<td> |
Tạo ô dữ liệu tiêu chuẩn | <td>Data</td> |
Và thế là xong! Bây giờ bạn đã được trang bị kiến thức để tạo các bảng có cấu trúc tốt và dễ đọc trong HTML. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngại thử nghiệm với các thẻ này. Trước khi bạn nhận ra, bạn sẽ tạo ra các bảng mà bất kỳ nhà phân tích dữ liệu nào cũng sẽ tự hào!
Credits: Image by storyset