1.11.9. Табличные данные

Опубликовано: 29 ноября 2021 Обновлено: 5 июня 2022 0 комментариев

Табличные данные относятся к категории потокового содержимого, они используются в основной части документов и приложений.

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

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

Если таблица все же должна использоваться для разметки страницы, ее необходимо пометить атрибутом role="presentation", чтобы браузер правильно представлял таблицу программам чтения с экрана.

1. Элемент <table>

Категории контента: потоковое содержимое, видимое содержимое.

Контекст, в котором этот элемент может быть использован: где ожидается потоковое содержимое.

Пропуск тегов: ни один из тегов не может быть пропущен.

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

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

<p id="summary">
  In the following table, characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.
</p>
<table aria-describedby="summary">
  <caption>Characteristics with positive and negative sides</caption>
  <thead>
    <tr>
      <th id="n">Negative</th>
      <th>Characteristic</th>
      <th>Positive</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="n r1">Sad</td>
      <th id="r1">Mood</th>
      <td>Happy</td>
    </tr>
    <tr>
      <td headers="n r2">Failing</td>
      <th id="r2">Grade</th>
      <td>Passing</td>
    </tr>
</table>

2. Элемент <caption>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: как первый дочерний элемент элемента <table>.

Пропуск тегов: закрывающий тег может быть опущен.

Для элемента доступны ‎глобальные атрибуты.

Элемент <caption> участвует в макете таблицы, добавляя заголовок таблице, что значительно упрощает ее понимание. Если элемент <table> является единственным содержимым в элементе <figure>, кроме <figcaption>, элемент <caption> следует опустить в пользу <figcaption>.

<table>
  <caption>
    Table 1.
    This table shows the total score obtained from rolling two six-sided dice. The first row represents the value of the first die, the first column the value of the second die. The total is given in the cell that corresponds to the values of the two dice.
  </caption>
  <tbody>
    <!-- ... -->
  </tbody>
</table>

3. Элемент <colgroup>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: как дочерний элемент элемента <table>, после элемента <caption> и перед любыми элементами <thead>, <tbody>, <tfoot> и <tr>.

Пропуск тегов: открывающий тег может быть опущен, если первое, что находится внутри элемента — это элемент <col>, и если элементу непосредственно не предшествует другой элемент <colgroup>, закрывающий тег которого был опущен.

Закрывающий тег элемента <colgroup> может быть опущен, если сразу за элементом <colgroup> не следует пробел или комментарий.

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

Элемент <colgroup> и его атрибут span участвует в макете таблицы, представляя группу из одного или нескольких столбцов.

Если элемент <colgroup> не содержит элементов <col>, то для него может быть указан атрибут span, значением которого должно быть неотрицательное целое число больше нуля.

<table style="width: 100%;">
  <colgroup style="background: #eee; width: 25%;" span="2"></colgroup>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <!-- ... -->
  </tbody>
</table>

4. Элемент <col>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: как дочерний элемент элемента <colgroup>, для которого не задан атрибут span.

Пропуск тегов: отсутствует закрывающий тег.

Элемент <col> и его атрибут span участвует в макете таблицы, представляя один или несколько столбцов в группе столбцов, представленных элементом <colgroup>.

<table style="width: 100%;">
  <colgroup style="background: #ccc;">
    <col style="background: #ddd; width: 30%;">
    <col style="background: #eee; width: 50%;">
    <col style="width: 20%;">
  </colgroup>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <!-- ... -->
  </tbody>
</table>

5. Элемент <tbody>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: как дочерний элемент элемента <table> после элементов <caption>, <colgroup> и <thead>, но только если нет элементов <tr>, которые являются дочерними элементами элемента <table>.

Пропуск тегов: открывающий тег элемента может быть опущен, если первое, что находится внутри элемента <tbody> — это элемент <tr>, и если элементу непосредственно не предшествует элемент <tbody>, <thead> или <tfoot>, закрывающий тег которого был опущен. Открывающий тег нельзя опустить, если элемент <tbody> пустой.

Закрывающий тег элемента может быть опущен, если за элементом <tbody> сразу следует элемент <tbody> или <tfoot>, или если в родительском элементе больше нет содержимого.

Для элемента доступны ‎глобальные атрибуты.

Элемент <tbody> участвует в макете таблицы, представляя собой блок строк, состоящий из основных данных таблицы.

6. Элемент <thead>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: как дочерний элемента элемента <table> после любых элементов <caption> и <colgroup> и перед любыми элементами <tbody>, <tfoot> и <tr>, но только если нет других элементов <thead>.

Пропуск тегов: закрывающий тег может быть опущен, если элемент <thead> следует сразу за <tbody> или <tfoot>.

Для элемента доступны ‎глобальные атрибуты.

Элемент <thead> участвует в макете таблицы, представляя собой блок строк, состоящий из заголовков столбцов таблицы.

<table border="1">
  <caption>School auction sign-up sheet</caption>
  <thead>
    <tr>
      <th><label for="e1">Sellers Name</label></th>
      <th><label for="e2">Product for sale</label></th>
      <th><label for="e3">Picture of product</label></th>
      <th><label for="e4">Reserve Price</label></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ms Danus</td>
      <td>Doughnuts</td>
      <td><img src="https://example.com/mydoughnuts.png" alt="a wide variety of donuts flavors organized into multiple boxes of a dozen donuts"></td>
      <td>$45</td>
    </tr>
    <tr>
      <td><input id="e1" name="who" required form="f" type="text"></td>
      <td><input id="e2" name="what" required form="f" type="text"></td>
      <td><input id="e3" name="pic" form="f" type="url"></td>
      <td><input id="e4" step="0.01" min="0" value="0" required form="f" type="number"></td>
    </tr>
  </tbody>
</table>

7. Элемент <tfoot>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: как дочерний элемент элемента <table> после любых элементов <caption>, <colgroup>, <thead>, <tbody> и <tr>, но только если нет других элементов <tfoot>.

Пропуск тегов: закрывающий тег может быть опущен, если больше нет содержимого в родительском элементе.

Для элемента доступны ‎глобальные атрибуты.

Элемент <tfoot> участвует в макете таблицы, представляя собой блок строк, состоящий из нижних колонтитулов.

<table>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Spending</th>
      <th scope="col">Earnings</th>
      <th scope="col">Holdings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$800</td>
      <td>$700</td>
      <td>-$100</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>$900</td>
      <td>$935</td>
      <td>+$35</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>$1,700</td>
      <td>$1,635</td>
      <td>-$65</td>
    </tr>
  </tfoot>
</table>

8. Элемент <tr>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: как дочерний элемент элемента <thead>, <tbody>, <tfoot>. Как дочерний элемент элемента <table> после любых элементов <caption>, <colgroup> и <thead>, но только если нет элементов <tbody>.

Пропуск тегов: закрывающий тег может быть опущен, если за элементом <tr> сразу следует другой элемент <tr> или, если больше нет содержимого в родительском элементе.

Для элемента доступны ‎глобальные атрибуты.

Элемент <tr> участвует в макете таблицы, представляя собой строку ячеек в таблице.

9. Элемент <td>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: как дочерний элемент элемента <tr>.

Пропуск тегов: закрывающий тег может быть опущен, если за элементом сразу же следует другой элемент <td> или <th>, или если в родительском элементе больше нет содержимого.

Для элемента доступны ‎глобальные атрибуты, а также атрибуты, приведенные в таблице:

Таблица 1. Атрибуты элемента <td>
Атрибут	Описание, принимаемое значение
`colspan`	Задает количество столбцов, которые должна объединять ячейка. Синтаксис: `colspan="2"`
`rowspan`	Задет количество строк, которые должна объединять ячейка. Синтаксис: `rowspan="3"`
`headers`	Задает список строк, разделенных пробелами, каждая из которых соответствует атрибуту `id` элементов `<th>`, которые связаны с этим элементом. Синтаксис: `headers="t1"`

Элемент <td> представляет собой ячейку данных в таблице.

10. Элемент <th>

Категории контента: отсутствуют.

Контекст, в котором этот элемент может быть использован: как дочерний элемент элемента <tr>.

Пропуск тегов: закрывающий тег может быть опущен, если за элементом <th> сразу следует элемент <td> или <th>, или если в родительском элементе больше нет содержимого.

Для элемента доступны ‎глобальные атрибуты, а также атрибуты, приведенные в таблице:

Таблица 2. Атрибуты элемента <th>
Атрибут	Описание, принимаемое значение
`colspan`	Задает количество столбцов, которые должна объединять ячейка. Синтаксис: `colspan="2"`
`rowspan`	Задет количество строк, которые должна объединять ячейка. Синтаксис: `rowspan="3"`
`headers`	Задает список строк, разделенных пробелами, каждая из которых соответствует атрибуту `id` элементов `<th>`, которые связаны с этим элементом. Синтаксис: `headers="t1 t2"`
`scope`	Определяет ячейки, к которым относится заголовок, определенный в элементе `<th>`. Разрешенные значения: `row` — заголовок относится ко всем ячейкам строки, к которой он принадлежит. `col` — заголовок относится ко всем ячейкам столбца, которому он принадлежит. `rowgroup` — заголовок принадлежит группе строк и относится ко всем ее ячейкам. Эти ячейки могут быть размещены справа или слева от заголовка, в зависимости от значения атрибута `dir` элемента `<table>`. `colgroup` — заголовок принадлежит `<colgroup>` и относится ко всем ее ячейкам. Синтаксис: `scope="rowgroup"`
`abbr`	Задает альтернативное сокращенное описание содержимого ячейки. Программы для чтения речи могут представлять это описание перед самим контентом. Синтаксис: `abbr="Types"`

Элемент <th> определяет ячейку как заголовок группы ячеек таблицы.

<table>
  <caption>
    Daily coffee order for team meetings
  </caption>
  <thead>
    <tr>
      <th id="t1">Team</th>
      <th id="t3" abbr="Types" colspan="2">Types of Coffee</th>
      <th id="t2" colspan="2">Cups</th>
      <th id="t4">Sugar Packets?</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="t1">Design</td>
      <td headers="t3" id="c1">House Blend</td>
      <td headers="t3" id="c2">French Roast</td>
      <td headers="t2 c1">8</td>
      <td headers="t2 c2">3</td>
      <td headers="t4">Yes</td>
    </tr>
    <tr>
      <td headers="t1">Development</td>
      <td headers="t3" id="c3">Cold Brew</td>
      <td headers="t3" id="c4">Espresso</td>
      <td headers="t2 c3">6</td>
      <td headers="t2 c4">5</td>
      <td headers="t4">No</td>
    </tr>
  <tbody>
</table>

<table>
   <caption>Measurement of legs and tails in Cats and English speakers</caption>
   <thead>
      <tr>
         <th>ID</th>
         <th>Measurement</th>
         <th>Average</th>
         <th>Maximum</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <th scope="rowgroup">Cats</th>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td>93</td>
         <th scope="row">Legs</th>
         <td>3.5</td>
         <td>4</td>
      </tr>
      <tr>
         <td>10</td>
         <th scope="row">Tails</th>
         <td>1</td>
         <td>1</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <td></td>
         <th scope="rowgroup">English speakers</th>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td>32</td>
         <th scope="row">Legs</th>
         <td>2.67</td>
         <td>4</td>
      </tr>
      <tr>
         <td>35</td>
         <th scope="row">Tails</th>
         <td>0.33</td>
         <td>1</td>
      </tr>
   </tbody>
</table>

По материалам Tabular data

Ссылки

Формы

1.11.9. Табличные данные

HTML-элементы для создания таблиц

1. Элемент <table>

2. Элемент <caption>

3. Элемент <colgroup>

4. Элемент <col>

5. Элемент <tbody>

6. Элемент <thead>

7. Элемент <tfoot>

8. Элемент <tr>

9. Элемент <td>

10. Элемент <th>

Поделиться: