Таблиці

Таблиці у верстці використовують для структурування табличних даних. Дуже давно верстку сторінок робили таблицями. Сьогодні такий спосіб верстки лишається тільки для електронних листів. На сторінці у вигляді таблиці можуть бути представлені календарі, транспортні розклади, виписки фінансових операцій тощо.

Для прикладу розглянемо таку таблицю:

Базові теги таблиці:

• <table> - контейнер таблиці в який вміщують інші теги розмітки

• <tr> - рядок таблиці (table row). Він повинен містити хоча б одну клітинку

• <td> - клітинка таблиці (table data). Клітинки розташовують тільки всередині рядка. У кожному рядку таблиці має міститися однакова кількість клітинок

Зверстаємо цю таблицю:

<table>
  <tr>
    <td>Помідор</td>
    <td>4 грн</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Огірок</td>
    <td>5 грн</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Кабачок</td>
    <td>3 грн</td>
    <td>1</td>
  </tr>
</table>

Для візуального оформлення елементів таблиці використовують CSS, що буде розглянуто далі.

Клітинки-заголовки​

Для розмітки шапки таблиці існують окремі семантичні теги. Для рядка використовують той самий тег <tr>. Для клітинки застосовують спеціальний тег <th> (table header). За замовченням цей текст жирний і розташовується по центру.

<table>
  <tr>
    <th>Товар</th>
    <th>Ціна за штуку</th>
    <th>Кількість</th>
  </tr>
  <tr>
    <td>Помідор</td>
    <td>4 грн</td>
    <td>2</td>
  </tr>
  <tr>
    <td>Огірок</td>
    <td>5 грн</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Кабачок</td>
    <td>3 грн</td>
    <td>1</td>
  </tr>
</table>

Секції таблиці​

Для семантичного опису деяких елементів в таблиці існують спеціальні структурні теги.

• <thead> - шапка таблиці. У ньому розміщують рядки заголовку таблиці

• <tbody> - тіло таблиці. У ньому розташовують основну групу рядків таблиці

• <tfoot> - підвал таблиці. У ньому розташовують нижні відокремлені рядки таблиці

Додамо семантичних тегів до таблиці:

<table>
  <thead>
    <tr>
      <th>Товар</th>
      <th>Ціна за штуку</th>
      <th>Кількість</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Помідор</td>
      <td>4 грн</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Огірок</td>
      <td>5 грн</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Кабачок</td>
      <td>3 грн</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

Заголовок таблиці​

Якщо таблиця має заголовок, то його можна оформити за допомогою тегу заголовка.

<h2>Продукти</h2>
<table>
  <!-- Таблиця -->
</table>

У цьому випадку з таблицями для цього існує спеціальний семантичний тег <caption>. Його розташовують всередині тегу <table>.

<table>
  <caption>
    Продукти
  </caption>

  <!-- Таблиця -->
</table>

Приклад наведеної вище таблиці (стилізація буде розглянута далі):

Групування клітинок​

Буває необхідність об'єднання деяких комірок по вертикалі або горизонталі. Розглянемо далі на прикладі як це можна реалізувати.

<table>
  <thead>
    <tr>
      <th rowspan="2">Номер поїзда</th>
      <th colspan="2">Зупинки на маршруті</th>   
    </tr>
    <tr>
      <th>Стартова</th>
      <th>Кінцева</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>123</td>
      <td>Яблунева</td>
      <td>Сливова</td>
    </tr>
    <tr>
      <td>456</td>
      <td>Райдужна</td>
      <td>Сонячна</td>
    </tr>
    <tr>
      <td>789</td>
      <td>Польова</td>
      <td>Лісова</td>
    </tr>
  </tbody>
</table>

У цій таблиці зʼєднуються перші дві комірки по вертикалі, А також друга і третя комірки в першому рядку по горизонталі.

Для цього використовують атрибути colspan і rowspan.

• rowspan - обʼєднує комірки по вертикалі

• colspan - обʼєднує комірки по горизонталі

У цих параметрах вказують кількість комірок яку потрібно об'єднати.

Вимога рівності клітинок у рядках порушена, але таблиця враховує це.

Покликання:

Специфікація тегів таблиць