HTML => таблицы

Вступление

Элемент HTML <table> позволяет веб-авторам отображать табличные данные (например, текст, изображения, ссылки, другие таблицы и т. Д.) В двумерной таблице со строками и столбцами ячеек.

Синтаксис

<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<tr></tr>
<th></th>
<td></td>

замечания

Различные элементы таблицы и их атрибуты содержимого вместе определяют модель таблицы. Элемент <table> - это элемент контейнера для табличных моделей / табличных данных. Таблицы содержат строки, столбцы и ячейки, данные их потомками. Строки и столбцы образуют сетку; ячейки таблицы должны полностью покрывать эту сетку без перекрытия. В приведенном ниже списке описаны различные элементы таблицы:

<table> - Элемент контейнера для табличных моделей / табличных данных. <table> представляет данные с более чем одним измерением в виде таблицы.
<caption> - заголовок или заголовок таблицы (как figcaption к figure )
<col> - столбец (элемент без содержимого)
<colgroup> - группировка столбцов
<thead> - Заголовок таблицы (только один)
<tbody> - Тело / содержимое таблицы (несколько в порядке)
<tfoot> - <tfoot> колонтитул стола (только один)
<tr> - Таблица строк
<th> - ячейка заголовка таблицы
<td> - ячейка данных таблицы

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

Использование таблиц для макета не рекомендуется. Вместо этого используйте правила CSS для макета и форматирования, включая display: table .

Одно замечательное исключение, обычно отображаемое в отрасли относительно использования макета <table> относится к электронной почте HTML: некоторые почтовые клиенты, включая Outlook, откатываются назад к более старым механизмам рендеринга после того, как Microsoft потеряет свое монопольное дело против ЕС. Для того, чтобы Microsoft не включила IE в ОС, они просто отбросили механизм рендеринга Outlook к более ранней версии Trident. Этот откат просто не поддерживает современные веб-технологии, поэтому использование макетов на основе <table> для электронной почты HTML - единственный способ обеспечить совместимость между браузерами и платформой / клиентом.

Простая таблица

<table>
  <tr>
    <th>Heading 1/Column 1</th>
    <th>Heading 2/Column 2</th>
  </tr>
  <tr>
    <td>Row 1 Data Column 1</td>
    <td>Row 1 Data Column 2</td>
  </tr>
  <tr>
    <td>Row 2 Data Column 1</td>
    <td>Row 2 Data Column 2</td>
  </tr>
</table>

Это приведет к тому, что <table> состоит из трех полных строк ( <tr> ): одна строка ячеек заголовка ( <th> ) и две строки ячеек содержимого ( <td> ). <th> - это табличные заголовки, а <td> - табличные данные . Вы можете поместить все, что хотите, внутри <td> или <th> .

Заголовок 1 / Столбец 1	Заголовок 2 / Столбец 2
Строка данных 1-го столбца 1	Строка данных 1-го столбца 2
Строка данных 2 строки 1	Строка данных 2 строки 2

Закрепление столбцов или строк

Ячейки таблицы могут охватывать несколько столбцов или строк, используя атрибуты colspan и rowspan . Эти атрибуты могут быть применены к элементам <th> и <td> .

<table>
    <tr>
        <td>row 1 col 1</td>
        <td>row 1 col 2</td>
        <td>row 1 col 3</td>
    </tr>
    <tr>
        <td colspan="3">This second row spans all three columns</td>
    </tr>
    <tr>
        <td rowspan="2">This cell spans two rows</td>
        <td>row 3 col 2</td>
        <td>row 3 col 3</td>
    </tr>
    <tr>
        <td>row 4 col 2</td>
        <td>row 4 col 3</td>
    </tr>

</table>

В результате

Обратите внимание, что вам не следует создавать таблицу, в которой как строки, так и столбцы перекрываются, поскольку это недопустимый HTML, и результат обрабатывается по-разному разными веб-браузерами.

rowspan = неотрицательное целое число, определяющее количество строк, натянутых на ячейку. Значение по умолчанию этого атрибута равно 1 ( 1 ). Значение 0 ( 0 ) означает, что ячейка будет продолжаться от текущей строки до последней строки таблицы ( <thead> , <tbody> или <tfoot> ).

colspan = неотрицательное целое число, определяющее количество столбцов, отнесенных текущей ячейкой. Значение по умолчанию этого атрибута равно 1 ( 1 ). Значение 0 ( 0 ) означает, что ячейка будет продолжаться от текущего до последнего столбца группы столбцов <colgroup> в которой определена ячейка.

Таблица с темой, tbody, tfoot и заголовком

HTML также таблицы с <thead> , <tbody> , <tfoot> и <caption> элементы. Эти дополнительные элементы полезны для добавления семантического значения в ваши таблицы и для обеспечения места для отдельного стили CSS.

При распечатке таблицы, которая не помещается на одну (бумажную) страницу, большинство браузеров повторяют содержимое <thead> на каждой странице.

Есть определенный порядок, которому нужно придерживаться, и мы должны знать, что не каждый элемент встает на свои места, как можно было бы ожидать. Следующий пример демонстрирует, как должны быть размещены наши 4 элемента.

<table>
 <caption>Table Title</caption> <!--| caption is the first child of table |-->
  <thead> <!--======================| thead is after caption |-->
    <tr>
      <th>Header content 1</th> 
      <th>Header content 2</th>
    </tr>
  </thead>

  <tbody> <!--======================| tbody is after thead |-->
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  
  <tfoot><!--| tfoot can be placed before or after tbody, but not in a group of tbody. |-->         <!--| Regardless where tfoot is in markup, it's rendered at the bottom. |-->                                                                                                                                                                                                                                                                                               
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>

</table>

Результаты следующего примера демонстрируются дважды: в первой таблице отсутствуют стили, вторая таблица имеет несколько примененных свойств CSS: background-color , color и border *. Стили представлены в виде визуального руководства и не являются существенным аспектом данной темы.

Элемент	Стили
`<caption>`	Желтый текст на черном фоне.
`<thead>`	Полужирный текст на фиолетовом фоне.
`<tbody>`	Текст на синем фоне.
`<tfoot>`	Текст на зеленом фоне.
`<th>`	Оранжевые границы.
`<td>`	Красные границы.

Группы столбцов

Иногда вы можете применить стиль к столбцу или группе столбцов. Или для семантических целей вы можете группировать столбцы вместе. Для этого используйте <colgroup> и <col> .

Дополнительный <colgroup> позволяет группировать столбцы вместе. <colgroup> должны быть дочерними элементами <table> и должны появляться после любых элементов <caption> и перед любым содержимым таблицы (например, <tr> , <thead> , <tbody> и т. д.).

<table>
    <colgroup span="2"></colgroup>
    <colgroup span="2"></colgroup>
    ...
</table>

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

<table>
    <colgroup>
        <col id="MySpecialColumn" />
        <col />
    </colgroup>
    <colgroup>
        <col class="CoolColumn" />
        <col class="NeatColumn" span="2" />
    </colgroup>
    ...
</table>

Следующие стили CSS могут применяться к <colgroup> и <col> :

border
background
width
visibility
display (как на display: none )
- display: none; фактически удалит столбцы с экрана, в результате чего таблица будет отображаться так, как если бы эти ячейки не существовали

Для получения дополнительной информации см. Табличные данные HTML5 .

Область охвата

th элемента очень часто используются для обозначения заголовков строк и столбцов таблицы, например:

<table>
    <thead>
        <tr>
            <td></td>
            <th>Column Heading 1</th>
            <th>Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Row Heading 2</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Это можно улучшить для доступности с помощью атрибута scope . В приведенном выше примере будут внесены следующие изменения:

<table>
    <thead>
        <tr>
            <td></td>
            <th scope="col">Column Heading 1</th>
            <th scope="col">Column Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th scope="row">Row Heading 1</th>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

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

col
row
colgroup
rowgroup

Рекомендации:

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

HTML
таблицы

Поиск…