Giá trị phạm vi chính xác để sử dụng cho ô bảng HTML <th> hơn là bao nhiêu cột?

Question

Giả sử bạn có một bảng HTML, với một ô <th> kéo dài nhiều cột, ví dụ:

<table> 
    <tr> 
     <th colspan="3" scope="?">Scores</th> 
     <!-- ...more headings here... --> 
    </tr> 
    <tr> 
     <th scope="col">English</th> 
     <th scope="col">Maths</th> 
     <th scope="col">Science</th> 
     <!-- ...more sub-headings here... --> 
    </tr> 
    <tr> 
     <td>12</td> 
     <td>16</td> 
     <td>20</td> 
     <!-- ...more cells here... --> 
    </tr> 
</table> 

Giá trị chính xác cho thuộc tính phạm vi cho ô tiêu đề mở rộng là gì? col có vẻ không chính xác vì nó đang chuyển một số cột, nhưng colgroup có vẻ không đúng nếu tôi không thực sự có bất kỳ thẻ colgroup nào.

Answer 1

Theo bảng ví dụ thứ hai trong thông số HTML, đó là colgroup, mặc dù thiếu thẻ colgroup.

http://www.w3.org/TR/html4/struct/tables.html#h-11.4.1

Answer 2

Các WebAIM (truy cập web trong Mind) nhóm có một bài viết tuyệt vời trên creating accessible data tables. Nhìn chung, họ khuyên bạn nên tránh các hàng hoặc cột được mở rộng, vì trình đọc màn hình không thể diễn giải đánh dấu đáng tin cậy.

Ngắn hoàn toàn tránh các cột được mở rộng, tôi đã thực sự may mắn khi sử dụng thuộc tính id/headers kết hợp với thuộc tính phạm vi. Mặc dù đánh dấu có nhiều chi tiết hơn, điều này dường như đơn giản hóa mọi thứ cho JAWS, và kết quả là nó có ít rắc rối khi giải thích dữ liệu.

Đây là những gì ví dụ của bạn sẽ trông như thế với id/tiêu đề:

<table> 
    <tr> 
     <th id="scores" colspan="3">Scores</th> 
    </tr> 
    <tr> 
     <th id="english" scope="col">English</th> 
     <th id="maths" scope="col">Maths</th> 
     <th id="science" scope="col">Science</th> 
    </tr> 
    <tr> 
     <td headers="scores english">12</td> 
     <td headers="scores maths">16</td> 
     <td headers="scores science">20</td> 
    </tr> 
</table> 

Answer 3

Có lẽ tính năng chú thích có thể phù hợp hơn cho bạn ...

<table> 
    <caption>Scores</caption> 
    <thead> 
    <tr> 
     <th scope="col">English</th> 
     <th scope="col">Maths</th> 
     <th scope="col">Science</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>12</td> 
     <td>16</td> 
     <td>20</td> 
    </tr> 
    </tbody> 
</table> 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption