Как размечать таблицы

Контент бывает разный. Например, имеется ряд продуктов и к каждому продукту указаны белки, жиры и углеводы. Конечно, можно написать продукт, поставить тире, а затем через запятую указать пищевую ценность. Но если продуктов много, то всё это может превратиться в «кашу». Чтобы не возникло путаницы при чтении, целесообразно такой контент свести в таблицу. В этой статье рассмотрим элементы, которые используются при создании таблиц.

Рассмотрим основные теги для создания таблиц.

  • <table>…</table> — Содержимое таблицы
  • <tr>…</tr> — Строка таблицы
  • <th>…</th> — Заголовок таблицы
  • <td>…</td> — Ячейка таблицы

Напишем код простейшей таблицы и посмотрим как она будет выглядеть.

HTML Вывод
<table>
   <tr>
      <th>Понедельник</th>
      <th>Среда</th>
      <th>Пятница</th>
   </tr>
   <tr>
      <td>Жим лежа</td>
      <td>Присед со штангой</td>
      <td>Становая тяга</td>
   </tr>
</table>
 
Понедельник Среда Пятница
Жим лежа Присед со штангой Становая тяга

 

Как видим, у таблицы отсутствуют границы, чтобы они появились нужно к элементу table добавить атрибут border со значением равным толщине границы в пикселах, вот так:

HTML Вывод
<table border="1">
   <tr>
      <th>Понедельник</th>
      <th">Среда</th>
      <th>Пятница</th>
   </tr>
   <tr>
      <td>Жим лежа</td>
      <td>Присед со штангой</td>
      <td>Становая тяга</td>
   </tr>
</table>
 
Понедельник Среда Пятница
Жим лежа Присед со штангой Становая тяга

 


Колличество столбцов рассчитывается из колличества ячеек td в строке tr. Если колличество ячеек в одной строке больше чем в другой, то строка удлиняется растягивая границу всей таблицы, вот так:

Понедельник Среда Пятница
Жим лежа Присед со штангой Становая тяга Подтягивания Отжимания

Если нужно объединить столбцы, то используется атрибут colspan со значением равным колличеству объединяемых ячеек; если нужно объединить строки, то используется атрибут rowspan со значением равным колличеству объединяемых ячеек.

Напишем код в котором объединим столбцы и посмотрим как это будет выглядеть.

HTML Вывод
<table border="1">
   <tr>
      <th colspan="2">Понедельник</th>
   </tr>
   <tr>
      <td>Жим лежа</td>
      <td>Подъём штанги на бицепс</td>
   </tr>
</table>
Понедельник
Жим лежа Подъём штанги на бицепс

 


Теперь приведём код в котором объединим строки и посмотрим как это будет выглядеть.

HTML Вывод
<table border="1">
   <tr>
      <th rowspan="2">Понедельник</th>
      <td>Жим лежа</td>
   </tr>
   <tr>
      <td>Подъем штанги на бицепс</td>
   </tr>
</table>
 
Понедельник Жим лежа
Подъем штанги на бицепс

 

Здесь мы видим что во второй строке не нужно вводить элемент td, так как атрибут rowspan растягивает 2 строки по вертикали и во второй строке уже подразумевается наличие ячейки td.


Стоит помнить и о людях с ограниченными возможностями, поэтому важно обеспечить доступность таблиц. Например людям с нарушением зрения, которые используют программы экранного доступа, очень трудно разобраться в табличной информации. Рассмотрим элементы и атрибуты которые максимально описывают структуру таблицы. Элемент caption описывает содержимое таблицы.

HTML Вывод
<table border="1">
<caption>Расписание тренировок</caption>
 <tr>
  <th>Понедельник</th>
  <th>Среда</th>
 <th>Пятница</th>
 </tr>
  <tr>
 <td>Жим лежа</td>
 <td>Присед со штангой</td>
 <td>Становая тяга</td>
 </tr>
  </table>
Понедельник Среда Пятница
Расписание тренировок
Жим лежа Присед со штангой Становая тяга

Существует атрибут scope, который в зависимости от его значения связывает заголовок со строкой row, столбцом col, группой строк rowgroup, группой столбцов colgroup.

В этом примере ячейка заголовка относится к текущей строке:

HTML Вывод
<table border="1">    
<tr>
<th scope="row">Понедельник</th>
<td>Жим лежа</td>
<td>Подъём штанги на бицепс</td>
</tr>   
</table>
Понедельник Жим лежа Подъём штанги на бицепс

При сложной табличной структуре атрибута scope бывает недостаточно. Если нужно сопоставить какую-то конкретную ячейку с заголовком, применяют атрибут headers. Элементу th присваивают атрибут id, а затем значение этого атрибута указывают в качестве значения атрибута headers элемента td. Вот так:

HTML Вывод
<table border="1">
   <tr>
      <th id="time" colspan="2">Понедельник</th>
      <th colspan="2">Среда</th>
      <th colspan="2">Пятница</th>
     </tr>
   <tr>
      <td headers="time">Утро</td>
      <td>День</td>
      <td>Утро</td>
      <td>Вечер</td>
      <td>Утро</td>
      <td>Ночь</td>
   </tr>
</table>
Понедельник Среда Пятница
Утро День Утро Вечер Утро Ночь

 

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


Чтобы обозначить строку содержащую заголовки используется элемент thead. Чтобы обозначить содержание таблицы используется элемент tbody. Вот так:

HTML Вывод
<table border="1">
  <thead>
    <tr>
      <th scope="col">Понедельник</th>
      <th scope="col">Вторник</th>
      <th scope="col">Среда</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Жим лежа</td>
      <td>Присед со штангой</td>
      <td>Становая тяга</td>
    </tr>
  </tbody>
</table>
Понедельник Вторник Среда
Жим лежа Присед со штангой Становая тяга

Также нужно понимать что в таблице могут располагаться не только текстовые данные. Как мы уже видели в примерах выше, в ячейке может располагаться ещё одна таблица. Ещё ячейки таблицы могут содержать изображения, ссылки, да в принципе всё что угодно. Попробуем сделать в ячейке таблицы сетку из изображений.

HTML Вывод
<table>
  <tbody>
    <tr>
      <td><img src="url-адрес" alt="облако"></td>
      <td><img src="url-адрес" alt="звезда"></td>
    </tr>
    <tr>
      <td><img src="url-адрес" alt="Роза"></td>
      <td><img src="url-адрес" alt="Стрелка"></td>
    </tr>
  </tbody>
</table>
облако звезда
Роза Стрелка

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

Поделиться