Таблиці

HTML-таблиця – це складений елемент, що створюється за допомогою парного елемента table, який є контейнером для елементів таблиці і всі його дочірні елементи повинні знаходитись усередині нього.

Тобто, клітинки таблиці можуть містити будь-які HTML-елементи: заголовки, списки, текст, зображення, елементи форм, а також інші таблиці.

<table>
<tr>
    <th>Категорія</th>
    <th>Категорія</th>
    <th>Категорія</th>
  </tr>
  <tr>
    <td>клітинка</td>
    <td>клітинка</td>
    <td>клітинка</td>
  </tr>
</table>

Розмітка таблиці містить у собі кілька основних елементів:

• <table> – область таблиці;
• <tr> - рядок (table row – рядок таблиці);
• <th> - клітинка категорії (table header – заголовок категорії);
• <td> - клітинка (table data – данні таблиці).

За замовчуванням таблиця та клітинки не мають видимих меж. Межі в таблиці задаються за допомогою атрибуту border, значення якого це – будь-яке позитивне ціле число.

<table border = "1">
︙
</table>

Привести таблицю до звичайного вигляду допоможе комбінація атрибутів: cellspacing (відстань між клітинками) та bordercolor (колір межі клітинок).

<table border = "1" cellspacing = "0" bordercolor = "DarkOrange">
︙
</table>

За допомоги атрибутів width та align таблиці можна задати ширину та вирівнювання відносно веб-сторінки.

<table border = "1" cellspacing = "0" bordercolor = "darkorange" width = "60%" align = "center">
︙
</table>

Заголовок (підпис) таблиці.

Використання HTML-елементу caption дозволяє створити підпис таблиці. Елемент додається безпосередньо після тегу table. За замовчуванням, текст заголовку розташовується по центру таблиці.

<table border = "1" cellspacing = "0" bordercolor = "darkorange">
  <caption>Заголовок таблиці</caption>
  <tr>
    <th>Категорія</th>
    <th>Категорія</th>
    <th>Категорія</th>
  </tr>
  <tr>
    <td>клітинка</td>
    <td>клітинка</td>
    <td>клітинка</td>
  </tr>
</table>

Групування рядків та стовпців таблиці.

При оформленні таблиці іноді виникає потреба виділити певним кольором сукупність клітинок, що буде включати в себе деяку кількість стовпчиків. Саме для таких випадків був створений html-елемент colgroup.

Елемент colgroup створює структурну групу з одного або більше стовпців для єдиного форматування, дозволяючи застосувати єдині стилі до стовпців

<table border = "1" cellspacing = "0" bordercolor = "darkorange" width = "60%" align = "center">
  <colgroup>
    <col span = "2" bgcolor = "AntiqueWhite">
    <col span = "1" bgcolor = "Gold">
  </colgroup>
  <tr>
    <th width = "10%">№ з/п</th>
    <th width = "60%">Найменування товару</th>
    <th width = "30%">Ціна, грн</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Тістечко "Мрія"</td>
    <td>50,00</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Тістечко "Еклер"</td>
    <td>60,00</td>
  </tr>
</table>

Об'єднання клітинок таблиці.

Однією з основних властивостей структури таблиці є можливість об'єднання клітинок, вони можуть розтягуватися та займати кілька рядків або стовпців, що дозволяє створювати досить складні структури.

Клітинки об’єднуються за допомоги додавання атрибутів colspan або rowspan безпосередньо в html-елементи th та td.

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

<table border = "1" cellspacing = "0" bordercolor = "darkorange" width = "60%" align = "center">
  <colgroup>
    <col span = "2" bgcolor = "khaki">
    <col span = "1" bgcolor = "orange">
  </colgroup>
  <tr>
    <th width = "10%">№ з/п</th>
    <th width = "60%" colspan= "2">Найменування товару</th>
    <th width = "30%">Ціна, грн</th>
  </tr>
  <tr>
    <td>1</td>
    <td rowspan= "2" align= "center">Тістечко</td>
    <td>"Мрія"</td>
    <td>50,00</td>
  </tr>
  <tr>
    <td>2</td>
    <td>"Еклер"</td>
    <td>60,00</td>
  </tr>
  <tr>
    <th rowspan= "2" align= "right">Ітог</th>
    <th align= "left">120,00</th>
  </tr>
</table>