Таблиці

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

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

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

Для додавання таблиці на веб-сторінку використовується тег <table>. Цей елемент служить контейнером для елементів, що визначають вміст таблиці. Будь-яка таблиця складається з рядків і осередків, які задаються відповідно за допомогою тегів <tr> і <td>. Таблиця повинна містити хоча б одну клітинку (приклад 1). Допускається замість тега <td> використовувати тег <th>. Текст в клітинці, оформленої за допомогою тега <th>, відображається браузером жирним шрифтом і вирівнюється по центру клітинки. В іншому, різниці між клітинками, створеними через теги <td> і <th> немає.

Приклад 1. Створення таблиці

See the Pen GRgrVYq by Sofiia (@sofiia19) on CodePen.

Особливості таблиць

У кожного параметра таблиці є своє значення встановлене за замовчуванням. Це означає, що якщо якийсь атрибут пропущений, то неявно, але він все одно присутній, причому з деяким значенням. Через що вид таблиці може виявитися зовсім іншим, ніж припускав розробник. Щоб розуміти, що можна очікувати від таблиць, слід знати їх явні і неявні особливості, які перераховані далі.

Одну таблицю допускається поміщати всередину клітинка іншої таблиці. Це потрібно для представлення складних даних або в тому випадку, коли одна таблиця виступає в ролі модульної сітки, а друга, всередині неї, вже як звичайна таблиця.
Розміри таблиці спочатку не встановлені і обчислюються на основі вмісту клітинок. Наприклад, загальна ширина визначається автоматично виходячи з сумарної ширини вмісту клітинок плюс ширина меж між клітинками, поля навколо вмісту, що встановлюються через атрибут cellpadding і відстань між осередками, які визначаються значенням cellspacing.
Якщо для таблиці задана її ширина у відсотках або пікселах, то вміст таблиці підлаштовується під зазначені розміри. Так, браузер автоматично додає переноси рядків тексту, щоб він повністю помістився в осередок, і при цьому ширина таблиці залишилася без змін. Буває, що ширину вмісту комірки неможливо змінити, як це, наприклад, відбувається з малюнками. У цьому випадку ширина таблиці збільшується, незважаючи на зазначені розміри.
Поки таблиці не завантажиться повністю, її вміст не почне відображатися. Справа в тому, що браузер, перш ніж показати вміст таблиці, повинен обчислити необхідні розміри клітинок, їх ширину і висоту. А для цього необхідно знати, що в цих клітинках знаходиться. Тому браузер і чекає, поки завантажиться все, що знаходиться в клітинках, і тільки потім відображає таблицю.

Вирівнювання таблиць

Для вирівнювання таблиці по центру веб-сторінки або по одному з її країв призначений атрибут align тега <table>. Результат буде помітний лише в тому випадку, якщо ширина таблиці не займає всю доступну область, іншими словами, менше, ніж 100%. Насправді align не тільки встановлює вирівнювання, а й створює обтікання тексту з інших сторін аналогічно поведінці тега <img>. У прикладі 2 показано вирівнювання таблиці по правому краю і її обтікання текстом.

Приклад 2. Вирівнювання таблиці по правому краю

See the Pen zYxNgmy by Sofiia (@sofiia19) on CodePen.

За замовчуванням таблиця формується у вигляді сітки, при цьому в кожному рядку таблиці міститься однакова кількість клітинок. Такий варіант цілком підходить для формування простих таблиць, але абсолютно не годиться для тих випадків, коли має бути зроблено складну таблицю. У подібних ситуаціях застосовуються два основні методи: об'єднання клітинок і вкладені таблиці.

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

Для об'єднання двох і більше осередків в одну використовуються атрибути colspan і rowspan тега <td>. Атрибут colspan встановлює число клітинок, що об'єднуються по горизонталі. Аналогічно працює і атрибут rowspan, з тією лише відмінністю, що об'єднує клітинки по вертикалі. Перед додаванням атрибутів перевірте число клітинок у кожному рядку, щоб не виникло помилок. Так, <td colspan = "3"> замінює три клітинки, тому в наступному рядку повинно бути три тега <td> або конструкція виду <td colspan = "2"> ... </ td> <td> ... < / td>. Якщо число клітинок у кожному рядку не співпадатиме, з'являться порожні фантомні клітинки. У прикладі 3 наведено хоча і валідний, але невірний код, в якому якраз проявляється подібна помилка.

Приклад 3. Неправильне об'єднання осередків

See the Pen vYExBBK by Sofiia (@sofiia19) on CodePen.

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

Правильне використання атрибутів colspan і rowspan продемонстровано в прикладі 4.

Приклад 4. Об'єднання клітинок по вертикалі і горизонталі

See the Pen rNayBBP by Sofiia (@sofiia19) on CodePen.

В даній таблиці встановлено вісім колонок і три рядки. Частина клітинок з написами «Internet Explorer», «Opera» і «Firefox» об'єднані де по дві, а де і по три клітинки. В клітинці з написом «Браузер» застосовано об'єднання по вертикалі.

Вкладені таблиці

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

Приклад 5. Явно задана висота клітинки

See the Pen XWJMrWQ by Sofiia (@sofiia19) on CodePen.

Ліва нижня клітинка згідно з кодом HTML має висоту 40 пікселів, але оскільки висота вмісту правої колонки більша, ніж вміст лівої колонки, то висота клітинки змінюється. Виходить, що атрибут height в даному випадку ігнорується. Зауважимо, що дана особливість проявляється тільки в браузері Opera, але й інші браузери можуть відображати складні таблиці з помилками. Це часто виражається в тих таблицях, де явно встановлюється висота клітинок і їх об'єднання по вертикалі. Для спрощення верстки застосовується прийом з вкладеними таблицями.

Суть ідеї проста - в клітинку вкладається ще одна таблиця зі своїми параметрами. Оскільки ці таблиці в якомусь сенсі незалежні, то можна створювати досить химерні конструкції. Щоб вкладена таблиця займала всю ширину клітинки, таблиці треба задати ширину 100%.

У прикладі 6 показаний приклад використання вкладених таблиць для створення двох колонок і навігації.

Приклад 6. Вкладені таблиці

See the Pen PowpYwj by Sofiia (@sofiia19) on CodePen.

В даному макеті за допомогою таблиці створюється дві колонки, причому ліва колонка має фіксовану ширину 150 пікселів. Щоб створити щось на зразок навігації, всередину клітинки додана ще одна таблиця з шириною 100%.

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