— Теперь разберемся с еще одним способом структурировать и группировать информацию - с таблицами. Раньше их активно использовали для верстки веб страниц. Но такая структура была не очень гибкой. После того, как появилась необходимость делать адаптивный дизайн для разных размеров экранов, от них постепенно отказались.

— Так если от них отказались, зачем тогда мне их изучать?

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

Базовая структура

Для создания таблиц используется парный тег <table>. Дальше в таблицу добавляются строки. Для этого внутрь тега <table> вкладывается парный тег <tr>. Расшифровывается tr как table row, а row в переводе с английского — ряд. Так наверное будет легче запомнить.

Строки в таблице состоят из ячеек. Чтобы добавить ячейку в строку, мы должны вложить парный тег <td> внутрь <tr>.

<td>- это table data. В переводе с английского — данные таблицы. Внутри тега <td> можно указать полезную информацию. Например, текст или число.

<table>
  <tr>
    <td>Моя первая ячейка</td>
  </tr>
</table>

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

— Выглядит довольно просто. Надо просто запомнить порядок вложенности тегов.

— Совершенно верно.

— Но таких же таблиц в реальной практике не будет. Как мне добавить несколько ячеек и строк?

— Для добавления несколько строк тебе нужно повторить несколько раз тег <tr> внутри тега <table>. А для добавления нескольких ячеек — повтори тег <td> внутри строки таблицы. Но помни - в каждой строке должно быть одинаковое количество ячеек, для сохранения структуры таблицы.

<table>
  <tr>
    <td>Первая ячейка первой строки</td>
    <td>Вторая ячейка первой строки</td>
  </tr>
  <tr>
    <td>Первая ячейка второй строки</td>
    <td>Вторая ячейка второй строки</td>
  </tr>
</table>

Заголовок таблицы

У большинства таблиц есть заголовок. Чаще всего, там пишут имена столбцов. Чтобы их выделить, вместо тега <td> используется тег <th> (table header - заголовок таблицы). Заголовок отличается он тем, что шрифт внутри него становится жирным.

<table>
  <tr>
    <th>Имя первой колонки</th>
    <th>Имя второй колонки</th>
  </tr>
  <tr>
    <td>Первая ячейка первой строки</td>
    <td>Вторая ячейка первой строки</td>
  </tr>
  <tr>
    <td>Первая ячейка второй строки</td>
    <td>Вторая ячейка второй строки</td>
  </tr>
</table>

Описание таблицы

Любой таблице можно добавить описание или подпись. Для этого используют тег <caption>. Он тоже должен быть вложен внутрь тега <table>. Также, тег <caption> должен быть самым первым тегом, это важно!

<table>
  <caption>Описание таблицы</caption>
  <tr>
    <th>Колонка 1</th>
    <th>Колонка 2</th>
  </tr>
</table>

Объединение ячеек

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

Для объединения ячеек используются два атрибута: colspan и rowspan. Значение обоих атрибутов — это число ячеек, которые нужно объединить.

С помощью colspan объединяются ячейки по горизонтали. А с помощью rowspan - по вертикали.

Рассмотрим использование атрибутов на примере горизонтального объединения для строчки Итого:

<table>
  <tr>
    <th>Наименование</th>
    <th>Кол-во</th>
    <th>Цена за ед.</th>
    <th>Стоимость</th>
  </tr>
  <tr>
    <td>Карандаш</td>
    <td>2</td>
    <td>2.50</td>
    <td>5.00</td>
  </tr>
  <tr>
    <td>Ручка</td>
    <td>4</td>
    <td>3.50</td>
    <td>14.00</td>
  </tr>
  <tr>
    <td colspan="3">Итого</td>
    <td>19.00</td>
  </tr>
</table>

Для отображения итоговой строки нам необходимо все две колонки: в одной описание значения, во второй — само значение. С помощью атрибута colspan мы объединили три колонки (Наименование, Кол-во, Цена за ед.) в одну.

Группы строк

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

Итак, первая группа — это заголовок. Строки заголовка могут быть заключены в тег <thead>.

Дальше, после заголовка, идет тело таблицы, которое состоит из строк. Для тела используется тег <tbody>.

Для объединения строк нижней части таблицы используется тег <tfoot>.

Давай перепишем нашу канцелярскую смету используя новые теги:

<table>
  <thead>
    <tr>
      <th>Наименование</th>
      <th>Кол-во</th>
      <th>Цена за ед.</th>
      <th>Стоимость</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Карандаш</td>
      <td>2</td>
      <td>2.50</td>
      <td>5.00</td>
    </tr>
    <tr>
      <td>Ручка</td>
      <td>4</td>
      <td>3.50</td>
      <td>14.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Итого</td>
      <td>19.00</td>
    </tr>
  </tfoot>
</table>

Хотя все эти три тега использовать необязательно, лучше их все таки добавлять.

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

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

— Но ведь эти все случаи мы еще не рассматривали?

— Совершенно верно. Но тебе стоит научиться обращать внимание на моменты, которые могут появиться в будущем. Это облегчит тебе работу! А пока это все, что нужно тебе знать о таблицах на данный момент. Давай проверим, как ты усвоил материал.