📑 Таблиці

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

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

Таблиці

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

<table>
<tbody><th>
<td> 1</td>
<td> 2</td>
<td> 3</td>
</th>
<tr>
<td> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> 7</td>
<td> 8</td>
<td> 9</td>
</tr>
</tbody></table>

Показати код/Сховати код^

Межі таблиці

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

<table  border=3>
<tbody><th>
<td> 1</td>
<td> 2</td>
<td> 3</td>
</th>
<tr>
<td> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> 7</td>
<td> 8</td>
<td> 9</td>
</tr>
</tbody></table>

Показати код/Сховати код^

Колір

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

<table border=3>
<tbody bgcolor="yellow"><th bgcolor="lightgreen">
<td> 1</td>
<td> 2</td>
<td> 3</td>
</th>
<tr>
<td bgcolor="lightblue"> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> 7</td>
<td> 8</td>
<td> 9</td>
</tr>
</tbody></table>

Показати код/Сховати код^

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

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

<table border=3>
<tbody><th>
<td> 1</td>
<td colspan="2"> 2</td>
</th>
<tr>
<td rowspan="2"> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> 8</td>
<td> 9</td>
</tr>
</tbody></table>

Показати код/Сховати код^

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

Ширина

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

<table border=3 width="300">
<tbody><th>
<td width="100"> 1</td>
<td width="50%"> 2</td>
<td> 3</td>
</th>
<tr>
<td> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> 7</td>
<td> 8</td>
<td> 9</td>
</tr>
</tbody></table>

Показати код/Сховати код^

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

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

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

<table border=3 width="300" align="center">
<tbody><th>
<td width="100"> 1</td>
<td width="50%"> 2</td>
<td> 3</td>
</th>
<tr align="right">
<td> 4</td>
<td> 5</td>
<td> 6</td>
</tr>
<tr>
<td> 7</td>
<td align="center"> 8</td>
<td> 9</td>
</tr>
</tbody></table>

Показати код/Сховати код^

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

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

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

<table border=3 width="300">
<tbody>
<tr>
<td width="100"> 

<table width="100%">
<tbody>
<tr><td>Меню 1</td></tr>
<tr><td>Меню 2</td></tr>
<tr><td>Меню 3</td></tr>
<tr><td>Меню 4</td></tr>
</tbody>
</table>

</td>
<td> Інформація сайту </td>
</tr>
</tbody>
</table>

Показати код/Сховати код^

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

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

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