Таблиці

Для виведення табличних даних в HTML існує декілька тегів:

<table> - таблиця;
<tr> - строка таблиці;
<td> - чарунка таблиці;
<th> - чарунка заголовка таблиці;

// необов'язкові теги (браузер їх створює сам):
<thead> - заголовок таблиці;
<tbody> - тіло таблиці.

Приклад таблиці:

<table>
  <tr>
    <th>Продукція</th>
    <th>Кількість</th>
  </tr>
  <tr>
    <td>Олівці</td>
    <td>70 шт.</td>
  </tr>
  <tr>
    <td>Ручки</td>
    <td>24 шт.</td>
  </tr>
  <tr>
    <td>Фломастери</td>
    <td>35 шт.</td>
  </tr>
</table>

Результат буде дещо невиразним, без границь, оформлення:

Продукція Кількість
Олівці 70 шт.
Ручки 24 шт.
Фломастери 35 шт.

Зазвичай таблицям задають ширину, найчастіше - 100%. Також - потрібні бордери.

В наступному коді також представлені блоки thead та tbody, протестуйте в jsFiddle:

table { width: 100%; border: 1px solid silver; }
th, td { border: 1px solid silver; }

<table>
  <thead>
    <tr>
      <th>Продукція</th>
      <th>Кількість</th>
    </tr>
  <thead>
  <tbody>
    <tr>
      <td>Олівці</td>
      <td>70 шт.</td>
    </tr>
    <tr>
      <td>Ручки</td>
      <td>24 шт.</td>
    </tr>
    <tr>
      <td>Фломастери</td>
      <td>35 шт.</td>
    </tr>
  </tbody>
</table>

Щоб рамка була не подвійна, а одинарна - добавте стиль border-collapse: collapse.

Для об'єднання комірок використовуються атрибути:

<td colspan="3">
<td rowspan="2">
Продукція Кількість
Вчора Сьогодні
Олівці кольорові
і прості		 70 шт. 23 шт.
64 шт. 11 шт.
Ручки 24 шт. 20 шт.
<table style="width: 100%;">
  <thead>
    <tr>
      <th rowspan="2">Продукція</th>
      <th colspan="2">Кількість</th>
    </tr>
    <tr>
      <th>Вчора</th>
      <th>Сьогодні</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Олівці кольорові<br>і прості</td>
      <td>70 шт.</td>
      <td>23 шт.</td>
    </tr>
    <tr>
      <td>64 шт.</td>
      <td>11 шт.</td>
    </tr>
    <tr>
      <td>Ручки</td>
      <td>24 шт.</td>
      <td>20 шт.</td>
    </tr>
  </tbody>
</table>

Атрибути тега <table> (наразі не бажані до застосування):

cellspacing - задає зовнішні відступи довкола комірок.

cellpadding - задає внутрішні відступи всередині комірок.

 

Років 7 тому всі сайти версталися таблицями, без div. Наразі так досі створюються e-mail.

Властивості комірок

Увага! Не задавайте ніякі стилі для рядків, тобто, тегу <tr>. Але цей тег можна використовувати в селекторі:

table tr:nth-child(odd) td { background: silver; }

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

Ширина всіх комірок в стовбчику задається шириною найширшої комірки.

Якщо таблиці задати конкретну ширину (наприклад, 100%), то ширина чарунок збільшується пропорційно (тут Боба пояснює як саме).

Стиль vertical-align дозволяє вирівняти контент по вертикалі, text-align - по горизонталі.

-
-
-		 vertical-align: top; vertical-align: middle; vertical-align: bottom;

Стиль table-layout: fixed дозволяє зробити всі колонки однакової ширини. По-замовчуванню використовується table-layout: auto.

table-layout: auto:

1Найдовша строка тексту в таблиціКоротка строка

table-layout: fixed:

2Найдовша строка тексту в таблиціКоротка строка

Домашнє завдання

  1. Зверстайте другий блок проекта Таблиці (jpg).