Nhiều <thead>/<tbody> trong Bảng hợp lệ?

Question

Hãy tưởng tượng một danh sách liệt kê tương tự như sau:

var list = [ 
    { name: 'group1', 
    items: [ 1, 2, 3, 4, 5 ] 
    }, 
    { name: 'group2', 
    items: [ 1, 2, 3, 4, 5 ] 
    }, 
    etc... 
] 

Bây giờ quên cả "bảng được cho dữ liệu không thiết kế" lập luận, tôi muốn để hiển thị một bảng duy nhất cho list và có một riêng biệt <thead> và <tbody> cho mỗi mục nhập trong list.

Điều này có hợp lệ về mặt kỹ thuật không? Điều này hoạt động trong trình duyệt, nhưng là spider senses are tingling on this one của tôi.

Answer 1

Bạn có thể có nhiều thành phần <tbody> tùy thích, nhưng không quá một phần tử <thead> và <tfoot>. Reference:

Nội dung mô hình:

Trong lệnh này: tùy chọn một yếu tố chú thích, tiếp bởi zero hoặc nhiều yếu tố colgroup, theo tùy chọn bởi một yếu tố thead , tiếp theo là một trong hai số không hay nhiều các phần tử tbody hoặc một hoặc nhiều phần tử tr, theo tùy chọn bởi phần tử tfoot, tùy chọn được trộn lẫn với một hoặc nhiều thành phần hỗ trợ tập lệnh.

Answer 2

Tôi coi nó giống như thuộc tính id. Chúng được cho là duy nhất, nhưng bạn thực sự có thể sử dụng lại nó trong cùng một trang và bạn vẫn có thể chọn nó. Điều đó nói rằng, chỉ vì nó có thể được thực hiện không có nghĩa là nó nên được thực hiện.

Tôi khuyên bạn nên chống lại nó.

Answer 3

Có tối đa thead và một tfootallowed, vì vậy bạn không nên tạo tiêu đề bổ sung. Sau khi tất cả các th trong một thead mang lại ý nghĩa cho các cột của bạn, như "thời gian trong ngày", "nhiệt độ", "số lượng mèo hiện đang cháy".

Nếu các mục trong danh sách của bạn có liên quan, tất cả chúng phải nằm trong cùng một bảng và bạn nên cung cấp tiêu đề phù hợp để hiển thị mối quan hệ đó.

Nếu các mục nhập thực sự không liên quan, bạn nên cung cấp một bảng duy nhất cho tất cả các mục đó. Bạn vẫn có thể áp dụng cùng một CSS trên mỗi bảng để có được kết quả tốt đẹp.