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


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


Таблиці

Таблицю охоплює тег <table>, рядки описує тег <tr>, а клітинки - тег <td>. Перший рядок таблиці може містити заголовки стовпців - це тег <th>.

1 2 3
4 5 6
7 8 9


Межі таблиці

За умовчанням таблиця не має меж. Атрибут border дозволяє вказати ширину меж клітинок.

1 2 3
4 5 6
7 8 9


Колір

Атрибут bgcolor може задавати колір як тла усієї таблиці, так і окремих рядків та клітинок.

1 2 3
4 5 6
7 8 9


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

Клітинки таблиці можна об'єднувати за допомогою атрибутів rowspan та colspan , вони вказують на скільки рядків чи стовпців відповідно простягаються клітинки.

1 2
4 5 6
8 9

Зверніть увагу на об'єднання клітинок: фактично об'єднання клітинок 2 та 3 означає, що клітинка 3 стає непотрібною, тож її описувати не потрібно. Аналогічно клітинки 4 та 7.


Ширина

Ширина таблиці та її окремих клітинок визначається вмістом клітинок. Атрибут width дозволяє вказати ширину клітинки (чи таблиці) в пікселях чи у відсотках.

1 2 3
4 5 6
7 8 9

Таблиця загалом має ширину 300 пікселів, перший стовпець - 100 пікселів, а другий - 50% від загальної ширини таблиці.


Вирівнювання

Вміст клітинок та таблицю загалом можна вирівнювати через атрибут align (center, left, right, justify) та по вертикалі valign (top, bottom, middle).

1 2 3
4 5 6
7 8 9

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


Таблична розмітка

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

Меню 1
Меню 2
Меню 3
Меню 4
Інформація сайту

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

Довідник тегів та налаштувань

https://css.in.ua/html/tag/table 



Last modified: Sunday, 27 August 2023, 11:33 AM