Khi nào sử dụng tbody, colgroup, thead, vv, trong một bảng HTML?

Question

Khi tôi học về các bảng HTML, tôi không được dạy về tbody, thead, tfoot, colgroup. Khi nào bạn phải sử dụng chúng? Tôi đã đi đến trang web W3Schools và tôi hiểu cách họ làm việc, nhưng không phải khi nào sử dụng hoặc không sử dụng chúng.

Answer 1

Bạn sử dụng chúng nếu bạn muốn cung cấp thông tin bổ sung về bảng của mình và sắp xếp nội dung trong đó. Chúng cũng có thể ảnh hưởng đến việc hiển thị trực quan bảng của bạn theo một số cách (mặc dù điều này có thể khác nhau giữa các trình duyệt - ví dụ: hỗ trợ cho <colgroup>/<col> là cực kỳ chắp vá).

Ví dụ: nếu bạn có hàng tiêu đề ở trên cùng và dưới cùng, bạn sẽ nhóm chúng vào một số <thead> và <tfoot> tương ứng và các hàng dữ liệu trong một <tbody>. Trình duyệt sẽ đảm bảo rằng <tfoot> luôn được hiển thị ở phía dưới cho dù bạn đặt trước hay sau bất kỳ yếu tố nào <tbody> hoặc <tr> hoặc số lượng dữ liệu trong bảng của bạn. :

<table> 
    <caption>High Scores</caption> 
    <thead> 
    <tr><th>#</th><th>Name</th><th>Score</th></tr> 
    </thead> 
    <tfoot> 
    <tr><th>#</th><th>Name</th><th>Score</th></tr> 
    </tfoot> 
    <tbody> 
    <tr><td>1</td><td>Alice</td><td>10000</td></tr> 
    <tr><td>2</td><td>Bob</td><td>9000</td></tr> 
    <tr><td>3</td><td>Carol</td><td>8500</td></tr> 
    <tr><td>4</td><td>Dave</td><td>8000</td></tr> 
    <!-- Up to 100 data rows --> 
    </tbody> 
</table> 

nếu không theo mặc định tất cả các hàng được nhóm lại thành một đơn <tbody> (ngay cả khi bạn không sử dụng rõ ràng của <tbody></tbody> thẻ trong bảng của bạn). Do đó, nếu bạn đã tiêu đề hàng ở dưới cùng của bảng, bạn sẽ phải đặt chúng ở dưới cùng của bảng trong để họ xuất hiện lần cuối:

<table> 
    <caption>High Scores</caption> 
    <tr><th>#</th><th>Name</th><th>Score</th></tr> 

    <tr><td>1</td><td>Alice</td><td>10000</td></tr> 
    <tr><td>2</td><td>Bob</td><td>9000</td></tr> 
    <tr><td>3</td><td>Carol</td><td>8500</td></tr> 
    <tr><td>4</td><td>Dave</td><td>8000</td></tr> 
    <!-- Up to 100 data rows --> 

    <tr><th>#</th><th>Name</th><th>Score</th></tr> 
</table> 

Và tất nhiên, điều này cũng làm cho nó cho rằng ít ngữ nghĩa hơn nếu bạn quan tâm đến điều đó.

---

_{Lưu ý rằng nó là cần rằng một <tfoot>, nếu bạn sử dụng một, được đặt trước bất kỳ <tbody> hoặc <tr> yếu tố trong thông số kỹ thuật trước lên đến và bao gồm HTML 4 và XHTML 1 cho nó để xác thực các loại tài liệu đó. Điều này không còn đúng theo số HTML5.}