5 Таблиці

 

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

 

5.1 Стандартна модель таблиць

Стандартна модель таблиць досить проста: таблиця - це набір слів і чисел, упорядкованих в рядки і стовпці комірок. Більшість комірок містять в собі дані, інші - заголовки рядків і стовпців, які описують дані.

Всі елементи таблиці розміщуються між відкриваючим таблицю тегом <table> і закриваючим тегом </table>.Елементи таблиці, такі як елементи даних, заголовки рядків і стовпців, підписи, мають свої теги розмітки. Рухаючись зверху вниз і зліва направо, послідовно описуються заголовок і дані в кожній комірці стовпців таблиці.

У комірку таблиці можна помістити майже все, що може міститися в тілі HTML або XHTM документа, включаючи зображення, форми, заголовки і навіть інші таблиці. Браузер працює з кожною коміркою як з цілим вікном, заповнюючи її простір потоком вмісту, але з деякими обмеженнями і доповненнями щодо форматування.

 

5.1.1 Основні теги таблиці

Будь-яку таблицю можна створити всього лише з допомогою п’ятьма тегами: тегом <table>, який виділяє таблицю і її елементи з вмісту тіла документа; тегом <tr>, який визначає рядок таблиці; тегами <th> і <td>, які визначають заголовки в таблиці і комірки даних; і тегом <caption>, який визначає назву таблиці. Крім цих основних тегів існують теги <colgroup>,<tbody>, <thead> і <tfoot>, що дозволяють визначати цілі розділи таблиць і управляти ними. У кожного з тегів є обов'язкові та необов'язкові атрибути, деякі з яких діють не тільки на сам тег, але і на пов'язані з ним.

 

5.1.1.1 Тег <table>

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

Єдиними допустимими всередині тега <table> є один або декілька тегів <tr>, що визначають кожен рядок таблиці, а також різні теги розділів таблиці: <thead>, <tfoot>, <tbody>, <col> і <colgroup>.

 

5.1.1.2 Атрибут align

Стандарти HTML 4 і XHTML визнали небажаним цей атрибут на користь властивості align, наданої каскадними таблицями стилів (CSS).

Атрибут align приймає одне з трьох значень: left, right або center, які означають, що таблиця має бути вирівняна або по лівому або по правому полю потоку тексту, при цьому текст обтікає таблицю; або по центру, тоді текст розташовується зверху і знизу.

Варто відзначити, що атрибут align тега <table> відрізняється від того, який використовується в тегах елементів таблиці <tr>, <td> і <th>. В останніх атрибут align керує вирівнюванням тексту всередині комірки таблиці, а не вирівнюванням таблиці в оточуючому її потоці тексту.

 

5.1.1.3 Атрибути bgcolor и background

Можна зробити так, щоб фон таблиці був відмінним від фону документа, застосувавши атрибут bgcolor тега <table>.Значенням атрибута bgcolor повинен бути або RGB-триплет, або стандартна назва кольору.

Браузери придадуть цей колір фону всіх комірок в таблиці (включаючи назву таблиці). Використовуючи атрибутbgcolor або атрибут style для окремих рядків і комірок, можна встановити для них інший колір фону.

Атрибут background приймає в якості значення URL зображення, яке встановлюється як фон таблиці. Якщо зображення більше таблиці, воно буде обрізане.

 

5.1.1.4 Атрибут border

Необов'язковий в тегу <table> атрибут border наказує браузеру провести лінії навколо таблиці, її рядків і комірок. За замовчуванням обрамлення відсутнє. Можна присвоїти атрибуту border певне ціле значення, тим самим досягнувши тривимірного представлення опуклої рамки шириною в вказану кількість пікселів, але HTML цього не вимагає.

 

5.1.1.5 Атрибут bordercolor

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

 

5.1.1.6 Атрибут cellspacing

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

Включаючи в тег <table> атрибут cellspacing, можна збільшувати і зменшувати відстань між комірками. Для прикладу, щоб зробити її мінімальною, потрібно включити в тег атрибут border і вказати cellspacing рівним нулю.

5.1.1.7 Атрибут cellpadding

Атрибут cellpadding керує відстанню між краєм комірки і її вмістом. За замовчуванням ця відстань дорівнює одному пікселю. Можна зробити так, щоб вміст комірки доторкався її границь, вказавши cellpadding = 0 в тегу <table>. Цю відстань також можна збільшити, вказавши значення атрибута рівним величині, яка перевершує одиницю.

 

5.1.1.8 Комбінації атрибутів border, cellspacing і cellpadding

Результат спільного використання атрибутів border, cellspacing і cellpadding в тегу <table> може виявитися неочевидним. На рис. 5.1 показано, як ці атрибути створюють внутрішні і зовнішні рамки різної ширини.

 

Рисунок 5.1 – спільне використання атрибутів border, cellspacing і cellpadding

 

5.1.1.9 Атрибут valign

Атрибут valign задає загальне для всіх елементів таблиці вирівнювання по вертикалі. Допустимими значеннями valignв тегу <table> є top (по верхній межі), bottom (по нижній межі), middle (по центру) та baseline (по базовій лінії).

 

5.1.1.10 Атрибути width и height

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

Значення атрибута width - це або ціле число пікселів, або відсоток від ширини вікна браузера, причому допускаються значення, що перевершують 100%. Наприклад:

 

<table width=400>

 

пропонує браузеру відобразити таблицю шириною в 400 пікселів, з урахуванням всього її зовнішнього обрамлення. Якщо таблиця є ширшою за 400 пікселів, браузер проігнорує атрибут. Альтернативним чином:

 

<table width="50%">

 

пропонує браузеру створити таблицю в половину ширини вікна браузера.

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

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

 

5.1.1.11  Атрибут id

Атрибут id і взятий в лапки рядок - значення атрибута - використовується для постачання таблиць документа унікальними мітками, що дозволяють посилатися на них у гіперпосиланнях, таблицях стилів чи сценаріях.

 

5.1.1.12 Атрибути class и style

Стандарт каскадних таблиць стилів (CSS) являє собою санкціонований спосіб визначення характеристик відображення елементів HTML. Атрибут style використовується для визначення характеристик відображення таблиці та її елементів, заміщаючи будь-які інші правила з таблиці стилів, що діють по відношенню до всього документа. Атрибут classвикористовується для посилання на таблицю стилів, яка визначає унікальні характеристики відображення таблиці та її елементів.

 

5.1.2    Тег <tr>

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

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

 

5.1.2.1 Атрибути align и valign

Хоча атрибут align для тега <table> і небажаний, але він дуже корисний в тегах <tr> та інших елементах таблиці. Атрибут align для тега <tr> дозволяє змінювати загальне для всіх комірок рядка вирівнювання їх вмісту по горизонталі. Атрибут діє на всі комірки в поточному, але не в наступному рядку.

У відповідності зі значеннями атрибута align - left, right, center, justify і char - браузер вирівнює вміст кожної комірки в рядку по лівому або правому краю комірки, по її центру, по обох краях або по відповідному символу відповідно.

Подібним чином можна змінювати загальне для всіх комірок рядка вирівнювання їх вмісту по вертикалі за допомогою атрибуту valign. Зазвичай браузери виводять вміст комірок центровані по вертикалі. Присвоївши атрибуту valign в тегу <tr>одне із значень: top, bottom, center, middle або baseline, ви пропонуєте браузеру помістити вміст комірок рядка у верхній, у нижній частині відповідної комірки, відцентрувати або вирівняти по базовій лінії верхнього рядка тексту в інших комірках таблиці (рис. 4.2):

 

 

<table border="border">

<tr>

<th>Alignment</th>

<th>Top</th>

<th>Baseline</th>

<th>Center</th>

<th>Middle></th>

<th>Bottom</th>

</tr>

<tr align="center">

<th><h1>Baseline_ _<br />Another line</h1></th>

<td valign="top">AAyy</td>

<td valign="baseline">_AAyy_</td>

<td valign="center">AAyy</td>

<td valign="middle">AAyy</td>

<td valign="bottom">AAyy</td>

</tr>

</table>

 

Рисунок 5.2 – Дія атрибута valign

 

5.1.2.2 Атрибути bgcolor и background

Подібно своєму родичу з тега <table>, атрибут bgcolor в тегу <tr> встановлює колір фону для всього рядка. Значенням атрибута bgcolor повинен бути або RGB-триплет, або стандартна назва кольору.

Нестандартний атрибут background, що приймає в якості значення URL-адресу файлу із зображенням, поміщає картинку (розмножену, якщо необхідно) позаду тексту в рядок таблиці. Наприклад, наступний тег заповнює рядок таблиці картинкою picture.gif:

 

<tr background="bricks.gif">

 

Всі популярні браузери підтримують атрибут bgcolor.

 

5.1.2.3 Атрибут bordercolor

Даний атрибут використовується аналогічно тому, як це робиться для тега <table>, але в даному випадку для визначення кольору рамок в поточному рядку.

 

5.1.3 Теги <th> и <td>

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

Подібно тегу рядка таблиці (<tr>), теги комірок підтримують безліч атрибутів стилю і вирівнювання вмісту, які можна застосовувати до одиночної комірки заголовка або даних. Ці атрибути мають пріоритет перед своїми аналогами, які надають однаковий стиль усім коміркам рядка. Є також спеціальні атрибути, що визначають число рядків і стовпців у таблиці, яке може охоплювати комірка.

Вмістом тегів <th> і <td> може бути все, що можна помістити в тіло документа, включаючи текст, зображення, форми і т. д., навіть інші таблиці.

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

 

5.1.3.1 Атрибути align и valign

Атрибути align і valign є ідентичними однойменним атрибутам тега рядка <tr>, але при їх використанні з тегами <th>або <td> вирівнювання вмісту по горизонталі і вертикалі відбувається тільки у відповідній поточній комірці.

 

5.1.3.2 Атрибут width

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

 

5.1.3.3 Атрибут height

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

За замовчуванням усі комірки в рядку мають висоту його найвищої комірки.

 

5.1.3.4 Атрибут colspan

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

 

<td colspan="3">

 

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

 

5.1.3.5 Атрибут rowspan

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

Атрибут rowspan включається в теги <th> і <td> в верхньому рядку таблиці. Наприклад:

 

<td rowspan="3">

 

пропонує браузеру створити комірку, яка приєднає до себе ще дві комірки, що знаходяться нижче неї.

 

5.1.3.6 Атрибути bgcolor и background

Для окремої комірки також можна змінити колір фону за допомогою атрибутів bgcolor і background. Значенням атрибута bgcolor повинен бути або RGB-триплет, або стандартна назва кольору.

Атрибут background приймає в якості значення URL зображення, яке стає фоном комірки. Якщо зображення більше розмірів комірки, воно буде обрізане.