Лекція 18. Таблиці
HTML володіє великими можливостями для подання на Web-сторінці різних таблиць. Необхідно відзначити, що засоби формування таблиць використовуються в HTML не тільки і, напевно, не стільки для зображення власне таблиць, як для розміщення елементів Web сторінки на екрані. У цьому випадку екран браузера представляється у вигляді таблиці з невидимими межами, і окремі елементи Web сторінки поміщаються в ту або іншу комірку таблиці.
Таблиці HTML вказується за допомогою тега-контейнера <table> ... </table>. Загальні параметри таблиці задаються в тегу <table>, який містить наступні параметри:
align - вирівнювання таблиці:
- left - по лівому краю;
- center - по центру;
- right - по правому краю.
width - ширина таблиці зазначається або в пікселях, або у відсотках від ширини екрана (за замовчуванням береться мінімально необхідної для представлення даних).
height - висота таблиці зазначається або в пікселях, або у відсотках від висоти екрану (за замовчуванням береться мінімально необхідної для представлення даних).
border - ширина обмежують ліній (або просто кордонів) таблиці, вказується в мілісекундах і за замовчуванням дорівнює 0 - в цьому випадку кордонів таблиці не видно;
bordercolor - колір межі таблиці;
bgcolor - колір фону таблиці;
cellspacing - відстань у точках між сусідніми осередками таблиці (обмежують лінії включаються в комірку), за замовчуванням дорівнює 2;
cellpadding - відстань у точках між кордоном комірки і її вмістом, за замовчуванням дорівнює 1.
Заголовок таблиці, якщо він необхідний, задається за допомогою тега-контейнера <caption> . . . </caption>, який містить параметр align:
align - задання розташування заголовку таблиці:
- top - зверху таблиці;
- bottom - знизу таблиці.
Після задання параметрів і заголовку таблиці виконується формування її структури та вмісту.
Побудова таблиці здійснюється по рядках з допомогою тегів-контейнерів <tr> . . . </tr> (tr - Table Row, рядок таблиці).
Формування кожного рядка виконується за комірок рядка зліва направо з допомогою тегів-контейнерів <th> . . . </th> (th - Table Head, заголовок таблиці), які задають назви (заголовки) стовпців таблиці, і тегів-контейнерів <td> ... </td> (td - Table Data, дані таблиці), які задають значення елементів таблиці.
Обидва тега <th> <td> задають параметри і вміст комірки. Відмінність між ними полягає в тому, що <th> за замовчуванням містить жирний текст і вирівняно по центру, а <td> - містить звичайний текст і вирівняно по лівому краю.
Теги <tr>, <td> <th> можуть мати ті ж параметри, що й тег <table>, але область дії значень цих параметрів обмежується відповідно рядком або осередком таблиці.
Ці теги поряд з горизонтальним вирівнюванням (параметр align) мають можливість вирівнювання вмісту осередків по вертикалі з допомогою параметра valign:
valign - вертикальне вирівнювання елементів таблиці:
- top - вирівнювання по верхньому краю комірки;
- middle - вирівнювання по середині комірки;
- bottom - вирівнювання по нижньому краю комірки.
Для об'єднання комірок по стовпцях та рядками теги <th> <td> можуть також мати параметри colspan і rowspan, які задають відповідно число об'єднаних стовпчиків або об'єднаних рядків.