Створення таблиці в HTML

У таблицях зручно розташовувати дані, об’єднані між собою певними залежностями. Для створення таблиць у HTML використовуються спеціальні HTML-теги. З їх допомогою можна сконструювати таблицю будь-якої складності. Крім того, досить поширена практика табличної верстки, дозволяє красиво і зручно розташовувати елементи на веб-сторінці.

Створення першої таблиці

Відкрийте, як правило, текстовий редактор, створіть порожній HTML-файл і між тегами <body></body> вставити наступний код:

<table border=»1″>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

Збережіть документ. Відкрийте файл. Якщо ніде не допущено помилок, браузер видасть наступний результат:

Розберемо описаний код:

  • Тег <table></table> оголошують браузеру, що потрібно створити таблицю.
  • Атрибут border задає межі таблиці, а параметр 1 їх товщину в пікселях.
  • За допомогою <tr></tr> задаються рядка таблиці.
  • Кількість тегів <td></td> визначає кількість стовпців.
  • Цифри між тегами <td></td> вмістом комірок.
  • Якщо потрібно залишити комірку порожньою, слід прописати в ній якийсь невидимий символ, наприклад знак пробілу &nbsp;, а не залишати її взагалі без вмісту. Це необхідно для коректного відображення порожньої клітинки усіма браузерами. Деякі з них можуть спотворити результат, якщо цього не зробити.

    Вмістом може бути абсолютно будь-який елемент HTML: числа, текст, зображення, самі таблиці і навіть цілі сторінки. Головне тут — не тільки знати як зробити таблицю в HTML, але і дотримати вкладеність тегів.

    Завдання розміру

    Розглянутий вище приклад видав таблицю невеликого розміру, незручну для зорового сприйняття. Підігнати розміри таблиці під необхідні параметри можна за допомогою двох атрибутів:

  • width — задає ширину.
  • height — задає висоту.
  • Значення цих атрибутів можуть бути пікселі або відсотки. Деякі браузери невірно працюють з відсотками стосовно атрибута height. Тому слід тестувати свій код в декількох найбільш поширених:

    • IE.
    • Mozilla Firefox.
    • Opera.
    • Konqueror.
    • Safari.

    При неправильному відображенні варто змінити значення висоти таблиці у відсотках на значення в пікселях. Вибір на користь пікселів можна зробити ще й по тому міркуванню, що відвідувач вашого сайту може зайти з пристрою, що має маленький монітор (стільниковий телефон). Текст у таблиці HTML на моніторі телефону буде підігнаний під його розмір. І якщо будуть встановлені відсотки, таблиця буде настільки мілкою, що неможливо буде прочитати її.

    Використовуючи атрибути width і height, задамо розміри: ширина таблиці HTML — 300, а висота 200 пікселів:

    Дивіться також:  Пам'ятки Єревана: фото і опис, найцікавіші місця, поради та відгуки туристів

    <table border=»1″ width=»300″ height=»200″>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>

    <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>
    </table>

    В результаті браузер видасть таблицю з потрібними нам розмірами:

    Позиціонування

    Сенс цієї дії полягає в розташуванні як самого вмісту комірок, так і в розташуванні самої таблиці на веб-сторінці. Однак технологія HTML в таблицях, що пропонуються на веб-сторінці, обмежується їх розташуванням зліва (за замовчуванням), по центру або праворуч за допомогою атрибута align та потрібних значень:

    Значення Розташування на сторінці
    left зліва (за замовчуванням)
    center по центру
    right праворуч

    Синтаксис такий:

    <table border=»1″ align=»center»>

    </table>

    В майбутньому, при вивченні технології CSS, ви дізнаєтеся, як позиціонувати елементи веб-документів по вертикалі.

    Для визначення розташування вмісту комірок ті ж самі атрибути з тими ж значеннями застосовуються до тегу <td>:

    <table border=»1″>
    <tr>
    <td align=»right»> вміст комірки </td>

    </tr>

    </table>

    Розташуємо нашу таблицю праворуч, а вміст комірок вирівняємо по центру:

    <table border=»1″ align=»right» width=»300″ height=»200″>
    <tr>
    <td align=»center»>1</td>
    <td align=»center»>2</td>
    <td align=»center»>3</td>
    </tr>

    <tr>
    <td align=»center»>4</td>
    <td align=»center»>5</td>
    <td align=»center»>6</td>
    </tr>
    </table>

    У результаті повинно вийти ось що:

    Об’єднання рядків

    Щоб зробити кілька комірок рядка однією коміркою, використовується атрибут colspan зі значенням, рівним кількості об’єднуваних осередків. При цьому в коді видаляються наступні теги <td> разом з їх вмістом. Кількість видаляються тегів <td> одно значенням атрибуту colspan мінус один.

    Розглянемо це правило на прикладі. Припустимо, необхідно створити таблицю по центру сторінки з довільними числами розміром 4 стовпця і 3 ряди. Потім об’єднати у другому ряду клітинки 2 і 3 по горизонталі щоб браузер видав ось такий результат:

    Реалізацією такої таблиці у веб-документі буде наступний код:

    <table border=»1″ align=»center» width=»30%» height=»20%»>
    <tr>
    <td>11</td>
    <td>20</td>
    <td>4</td>
    <td>14</td>
    </tr>
    <tr>
    <td>58</td>
    <td colspan=»2″>36</td>
    <td>80</td>
    </tr>
    <tr>
    <td>19</td>
    <td>10</td>
    <td>15</td>
    <td>29</td>
    </tr>
    </table>

    Зверніть увагу на код HTML в таблиці, де об’єднуються дві клітинки:

    <tr>
    <td>58</td>
    <td colspan=»2″>36</td>
    <td>80</td>
    </tr>

    Так як значення параметра colspan дорівнює 2, то видалений 1 тег <td>, наступний за ним (2 — 1 = 1) з усім його вмістом. Якщо необхідно було б об’єднати три клітинки, то віддалялися б 2 тега <td>.

    Дивіться також:  Велика Китайська рівнина: опис, розташування, історія та цікаві факти

    Об’єднання стовпців

    Осередки по вертикалі об’єднуються з допомогою атрибута rowspan. Числове значення визначає кількість скорочуваних по вертикалі осередків. Ця тема представляє найбільші труднощі для студентів.

    Самим легким для розуміння її є наступний спосіб: створіть таблицю і пронумеруйте осередку різними цифрами. Наприклад таку:

    1 2 3 4
    5 6 7 8
    9 10 11 12

    Код таблиці буде наступний:

    <table border=»1″ align=»center» width=»30%» height=»20%»>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
    <tr>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    </tr>
    <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
    </tr>
    </table>

    Давайте позбудемося двозначних чисел, об’єднавши стовпці з цифрами 6 і 10, 7 і 11, 8 і 12. Залишимо в об’єднаних по вертикалі клітинках числа: 6, 7 і 8.

    Об’єднуємо 6 і 10. У тегу <td>, що містить цифру 6, прописуємо: <td rowspan=»2″>, а конструкцію <td>10</td> видаляємо взагалі. Аналогічно потрібно зробити і для решти пар цифр. У підсумку код зміниться таким чином:

    <table border=»1″ align=»center» width=»30%» height=»20%»>
    <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
    <tr>
    <td>5</td>
    <td rowspan=»2″>6</td>
    <td rowspan=»2″>7</td>
    <td rowspan=»2″>8</td>
    </tr>
    <tr>
    <td>9</td>
    </tr>
    </table>

    Браузер повинен видати потрібну нам таблицю:

    Порада: поки ви не досягнете автоматизму дій при об’єднанні стовпців, використовуйте цей спосіб з використанням цифр, замінюючи їх на потрібні дані.

    Вміст комірок

    Як вже згадувалося вище, елементами клітинок можуть бути будь-які елементи HTML. В таблиці, наприклад, зручна буде реалізація нескладної таблиці фруктів та їх кольорів:

    Як бачите, осередки цієї таблиці містять текст, зображення і заповнення кольором фону. До елементів комірок застосовні і будуть працювати всі теги HTML. У таблиці також можуть розташовуватися гіперпосилання в усіх їх формах (текстові, посилання, зображення тощо).

    Особливо потрібно оговорити заповнення клітинок кольором: оскільки вони порожні, не містять ніяких даних, потрібно прописати порожній пробіл: <td bgcolor=»код кольору»>&nbsp;</td>. При цьому ширина комірки може не відповідати необхідної. А майже завжди так і відбувається. У цьому випадку до цього тегу <td> застосовується атрибут width з необхідним значенням: <td bgcolor=»код кольору» width=»потрібне значення»>&nbsp;</td>.

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

    Дивіться також:  Короткий зміст мюзиклу "Кішки" - опис, особливості

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

    Часто виникає необхідність озаглавливать таблиці. Здійснюється це за допомогою спеціального парного тега <caption></caption>. Розміщується він відразу ж після тега <table> перед <tr>:

    <table border=»1″ align=»center» width=»20%»>
    <caption>Таблиця з числами</caption>
    <tr>
    <td align=»center»>2</td>
    <td align=»center»>1</td>
    </tr>
    <tr>
    <td align=»center»>4</td>
    <td align=»center»>3</td>
    </tr>
    <tr>
    <td align=»center»>6</td>
    <td align=»center»>5</td>
    </tr>
    </table>

    У браузері ця таблиця буде виглядати так:

    Крім назви таблиць використовують назви стовпців або рядків за допомогою тега <th></th>. Текст у таблиці HTML, укладений між цими тегами буде відображатися жирним шрифтом. До цього тегу застосуємо атрибут об’єднання клітинок по горизонталі colspan. Перетворимо наведену в якості прикладу таблицю, внісши зміни в код:

    <table border=»1″ align=»center» width=»20%»>
    <caption>Таблиця з числами</caption>
    <tr>
    <th>Парні</th>
    <th>Непарні</th>
    </tr>
    <tr>
    <td align=»center»>2</td>
    <td align=»center»>1</td>
    </tr>
    <tr>
    <td align=»center»>4</td>
    <td align=»center»>3</td>
    </tr>
    <tr>
    <td align=»center»>6</td>
    <td align=»center»>5</td>
    </tr>
    </table>

    В результаті браузер видасть озаглавлену таблицю з озаглавленными стовпцями:

    Для створення бічних заголовків, коли вони є елементами певного стовпця, тег <th></th> розташовується відразу після тега <tr> перед першим тегом <td>.

    Таблична верстка веб-документа

    Це найпоширеніший спосіб створення веб-сторінок. Суть табличної верстки полягає в розміщенні елементів на сторінці сайту у клітинках за допомогою таблиць. При цьому беруться окремі частини сайту (футер, хідер, боді), які, в свою чергу, також можуть бути осередками. На практиці здійснюється таблична верстка в більшості випадків за наступним алгоритмом:

    • веб-дизайнер готує макет сайту;
    • за допомогою графічних редакторів або іншого програмного забезпечення окремі елементи макета (кнопки, зображення) відрізаються і стають самостійними;
    • веб-програміст створює таблицю елементів сайту за задумом дизайнера, залишаючи осередку незаповненими;
    • веб-програміст відтворює з нарізаних елементів картинку сайту, використовуючи мови розмітки веб-програмування, стежачи за функціональністю, працездатністю кожного їх них.

    Таблична верстка сайту дозволяє красиво і логічно вибудувати вміст (контент) для надання зайшов на нього відвідувачу. Однак має два мінуси:

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