Таблиці на сторінці

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

Оголошення таблиці

Тег <table>

Починається будь-яка таблиця з парного тега <table>...</table>, який є, власне, контейнером для елементів, що визначають її вміст. За допомогою атрибутів тега <table> уже на етапі початкового визначення таблиці можна зазначити деякі її властивості, наприклад:

align (вирівнювання таблиці по краю вікна браузера):
align=”left” (за промовчанням) - по лівому краю,
align=”right” - по правому,
align=”center” - по центру сторінки;
background (фоновий малюнок тла таблиці): background="URL”;
bgcolor (колір тла таблиці):
bgcolor=”колір” наприклад: bgcolor="yellow" задасть тло жовтого кольору;
border (товщина зовнішньої рамки в пікселях): border=”товщина”;
bordercolor (колір рамки): bordercolor=”колір”;
cellpadding (відстань в пікселях чи процентах від меж ячейки до її вмісту): cellpadding=”ціле число”;
cellspacing (відстань між ячейками): cellspacing=”ціле число”;
cols (кількість стовпців у таблиці): cols=”ціле число” (атрибут необов'язковий але його наявність прискорює завантаження таблиці);
frame (стиль рамки таблиці):
frame=”void” – не малювати рамки
frame=”border” – рамки навколо таблиці
frame=”above” – рамка по верхній межі таблиці
frame=”below” – рамка по нижній межі таблиці
frame=”hsides” – тільки горизонтальні межі
frame=”vsides” – тільки вертикальні межі
frame=”rhs” – тільки на правій стороні таблиці
frame=”lhs” – тільки на лівій стороні таблиці;
height (висота таблиці в пікселях або відсотках вільного місця): height=”ціле число” (при наявності тега <!DOCTYPE> атрибут ігнорується, а висота визначається автоматично);
rules (де зображувати межі між ячейками):
rules=”all” – навколо кожної ячейки
rules=”groups” – лінія відтворюється між групами, що утворені тегами <thead>, <tfoot>, <tbody>, <colgroup> чи <col>
rules=”cols” – між колонками
rules=”none” – всі межі приховуються
rules=”rows” – між рядками, створеними через тег <tr>;
width (ширина таблиці в пікселях або відсотках від вільного простору): width=”ціле число”

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

Тег <caption>

Після тегу <table> може бути розміщено ще парний тег <caption>. Це заголовок таблиці, її назва.

Наприклад: <caption>Таблиця 1</caption>.

"Шапка" таблиці

Тег <thead>

Парний тег <thead> визначає підписи стовпців таблиці. Усередині між тегами <thead> розміщуються парні теги <th>. Кожна пара цих тегів визначає одну ячейку "шапки" таблиці.

<caption>Зразок таблиці</caption>

<thead>
<th>Заголовок 1</th><th>Заголовок 2</th>

</thead>

</table>

Атрибути тегу <thead>:

align (горизонтальне вирівнювання тексту):
align=”left”
align=”right”
align=”center”
align=”justify”
bgcolor (колір фону ячейки): bgcolor=”колір”;
valign (вертикальне вирівнювання вмісту ячейок):
valign=”top” – по верхньому краю
valign=”center” – по центру
valign=”bottom” – по нижньому краю
valign=”baseline” – по одній (базовій) лінії

Сама таблиця

Тег <tbody>

З цього парного тега починається уже сама таблиця. Атрибути тега <tbody> такі ж, як і у тега <thead>.

Рядки і ячейки таблиці

Теги <tr> і <td>

Усе, що потрібно зробити далі - це задати рядки таблиці і вказати, скільки в кожному з цих рядків ячейок. Кожний рядок задається парним тегом <tr>, а кожна ячейка - тегом <td>.

Атрибути тегу <tr>:

align (горизонтальне вирівнювання тексту):
align=”left”
align=”right”
align=”center”
align=”justify”
bgcolor (колір фону ячейки): bgcolor=”колір”;
bordercolor (колір рамки): bordercolor=”колір”;
valign (вертикальне вирівнювання вмісту ячейок):
valign=”top” – по верхньому краю
valign=”center” – по центру
valign=”bottom” – по нижньому краю
valign=”baseline” – по одній (базовій) лінії

Атрибути тегу <td>:

align (горизонтальне вирівнювання тексту):
align=”left”
align=”right”
align=”center”
align=”justify”
background (фоновий малюнок тла таблиці): background="URL”;
bgcolor (колір фону ячейки): bgcolor=”колір”;
bordercolor (колір рамки): bordercolor=”колір”;
colspan (об'єднання ячейок по горизонталі): colspan=”кількість ячейок”;
height (висота ячейки в пікселях або у відсотках): height=”ціле число”;
nowrap (заборона перенесення тексту на інший рядок, атрибут значень не має);
rowspan (об’єднання ячейок по вертикалі): rowspan=”кількість ячейок”;
valign (вертикальне вирівнювання вмісту ячейок):
valign=”top” – по верхньому краю
valign=”center” – по центру
valign=”bottom” – по нижньому краю
valign=”baseline” – по одній (базовій) лінії
width (ширина ячейки): width=”ціле число”

Ось, наприклад, яким буде код такої таблиці:

<caption>Розклад уроків</caption>

<thead>

<th width="120px">№ уроку</th>

<th colspan="2">Понеділок</th>

<th>Вівторок</th>

<th>Середа</th>

<th>Четвер</th>

<th>П'ятниця</th>

</tr>

</thead>

<tbody>

<td>Інформатика, І гр.</td>

<td>Інформатика, ІІ гр.</td>

<td>Фізкультура</td>

<td>Математика</td>

<td rowspan="2">Математика</td>

<td>Іноземна мова</td>

</tr>

<td colspan="2">Математика</td>

<td>Українська мова</td>

<td rowspan="2">Трудове навчання</td>

<td>Природознавство</td>

</tr>

<td colspan="2">Зарубіжна література</td>

<td>Українська література</td>

<td>Іноземна мова</td>

<td>Музичне мистецтво</td>

</tr>

<td colspan="6">Велика перерва</td>

</tr>

<td colspan="2">Українська мова</td>

<td>Іноземна мова</td>

<td>Історія України</td>

<td>Основи здоров'я</td>

<td>Українська література</td>

</tr>

<td colspan="2">Фізична культура</td>

<td>Природознавство</td>

<td>Фізична культура</td>

<td>Зарубіжна література</td>

<td>Українська мова</td>

</tr>

<td colspan="6">Гуртки</td>

</tr>

</tbody>

</table>

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