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

Hãy tưởng tượng một danh sách các danh sách 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 toàn bộ đối số "bảng là dành cho dữ liệu không phải thiết kế", tôi muốn hiển thị một bảng duy nhất cho listvà có một vùng riêng biệt <thead>và <tbody>cho mỗi mục nhập 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 cảm giác nhện của tôi đang ngứa ngáy trên trình duyệt này .

javascript html

— AlbertEngelB
nguồn

Bạn chắc chắn có thể có nhiều tbodies, tôi sẽ phải kiểm tra thông số kỹ thuật để biết về nó.

— Kevin B

@KevinB: IIRC nhiều nhất một thead và một tfoot: w3.org/TR/html-markup/table.html#table

— Zeta

@unor Câu hỏi của tôi liên quan đến nhiều <thead>và <tfooter>phần tử, không phải <tbody>. Chúng không giống nhau và được quy định bởi các quy tắc riêng biệt.

— AlbertEngelB

@ Dropped.on.Caprica: À đúng rồi, tôi nhớ rằng bạn cũng muốn có nhiều thead yếu tố. Tôi đã rút lại phiếu bầu.

— unor

Câu trả lời:

120

Bạn có thể có bao nhiêu <tbody>phần tử tùy thích, nhưng không nhiều hơn một phần tử trong số <thead>và <tfoot>. Tham khảo :

Mô hình nội dung:

Theo thứ tự này: tùy chọn một phần tử phụ đề, theo sau là không hoặc nhiều phần tử nhóm, theo tùy chọn là một phần tửad, tiếp theo là không hoặc nhiều phần tử tbody hoặc một hoặc nhiều phần tử tr, theo sau là một phần tử tfoot , tùy chọn xen kẽ với một hoặc nhiều yếu tố hỗ trợ kịch bản.

— Jon
nguồn

Và bạn có thể sử dụng th scope=rowgroupbên trong một thông thường trđể mô tả mỗi tbody. Xem "Ví dụ" .

— CletusW

Có nhiều nhất một theadvà một tfoot được phép , vì vậy bạn không nên tạo thêm các tiêu đề. Sau khi tất cả các thtrong một theadcung cấp ý 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 bị cháy".

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

Nếu các mục thực sự không liên quan, bạn nên cung cấp một bảng duy nhất cho mỗi 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.

— Zeta
nguồn

"Nếu các mục nhập trong danh sách của bạn có liên quan thì tất cả chúng phải nằm trong cùng một bảng và bạn nên cung cấp một tiêu đề phù hợp để hiển thị mối quan hệ đó" - Tôi nghĩ rằng việc lặp lại cùng một tiêu đề trong một bảng rất dài đôi khi là mong muốn nên người dùng không cần phải cuộn trở lại đầu để nhớ các cột là gì. Tất nhiên, có những giải pháp khác cho điều này (ví dụ: JavaScript để sử dụng tiêu đề bảng "dính" hoặc CSS trên các phần tử của hàng bảng để làm cho nó khác biệt trực quan so với các hàng khác).

— Mike

Tôi coi nó giống như idcác thuộc tính. 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ó.

— Justin
nguồn

Không có gì sai khi có nhiều hơn một <tbody>, nhưng theo thông số kỹ thuật có thể chỉ có một <thead>và một <tfoot>.

— Pointy

Từ những gì tôi có thể nói, anh ấy không hề đề nghị làm điều đó. Chỉ nói rằng nó hoạt động trong trình duyệt?

— AlbertEngelB

@Sebas Câu đầu tiên làm cho người ta biết rằng bạn có thể thêm nhiều thứ hơn, giống như id, nhưng bạn không nên.

— Justin

@Sebas tốt hơn? Đôi khi những gì có trong đầu của tôi là rõ ràng rằng những gì tôi đặt xuống: S

— Justin

Không, tôi hoàn toàn xin lỗi, lỗi là của tôi. Chúc mừng!

— Sebas