table - для таблиц, долой с разметки!

[Makha]

table элемент представляет данные с более чем одном измерении, в виде таблицы .

У таблиц есть строки, столбцы, и ячейки, данные их потомками. Строки и столбцы формируют сетку; ячейки таблицы должны полностью покрыть ту сетку без перекрытия.

Таблицы не должны использоваться в качестве макета сайта. Исторически, у многих веб-авторов есть таблицы в HTML как способ управлять их макетом страницы, мешающим извлечь табличные данные из таких документов. В частности пользователи инструментов доступности, как средства чтения с экрана, вероятно, сочтут очень трудным переместиться по страницам с таблицами, используемыми для расположения. Если таблица будет использоваться для верстки он должен быть помечен с помощью атрибута role="presentation" для браузера пользователя достойно представлять таблицы вспомогательных технологий и правильно передать намерение автора к инструментам, которые хотят извлечь табличные данные из документа.

Есть множество альтернатив использованию HTML-таблиц для расположения, прежде всего используя расположение CSS и табличную модель CSS.

border атрибут может быть указан в table элементов, чтобы явно указать, что table элементов не используется для целей компоновки. Если указано, значение атрибута должно быть либо пустая строка или значение " 1 ". Атрибут используется некоторыми агентами пользователей как признак того, что границы должны быть сделаны вокруг ячеек таблицы.

Вот пример из таблицы, для разметки головоломки Судоку. Обратите внимание на отсутствие заголовков, которые не нужны в такой таблице.

<section>
 <style scoped>
  table { border-collapse: collapse; border: solid thick; }
  colgroup, tbody { border: solid medium; }
  td { border: solid thin; height: 1.4em; width: 1.4em; text-align: center; padding: 0; }
 </style>
 <h1>Today's Sudoku</h1>
 <table>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <colgroup><col><col><col>
  <tbody>
   <tr> <td> 1 <td>   <td> 3 <td> 6 <td>   <td> 4 <td> 7 <td>   <td> 9
   <tr> <td>   <td> 2 <td>   <td>   <td> 9 <td>   <td>   <td> 1 <td>
   <tr> <td> 7 <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td> 6
  <tbody>
   <tr> <td> 2 <td>   <td> 4 <td>   <td> 3 <td>   <td> 9 <td>   <td> 8
   <tr> <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>   <td>
   <tr> <td> 5 <td>   <td>   <td> 9 <td>   <td> 7 <td>   <td>   <td> 1
  <tbody>
   <tr> <td> 6 <td>   <td>   <td>   <td> 5 <td>   <td>   <td>   <td> 2
   <tr> <td>   <td>   <td>   <td>   <td> 7 <td>   <td>   <td>   <td>
   <tr> <td> 9 <td>   <td>   <td> 8 <td>   <td> 2 <td>   <td>   <td> 5
 </table>
</section>

В визуальных средств массовой информации, обеспечивая строк и столбцов границ и фона чередующихся строк может быть очень эффективным, чтобы сделать сложные таблицы более читабельным.

Для таблиц с большими объемами числового контента, используйте моноширинные шрифты это может помочь пользователям видеть образцы, особенно в ситуациях, где агент пользователя не представляет границы. (К сожалению, по историческим причинам, не рендеринг граничит с таблицами, общее значение по умолчанию.)