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

При великій кількості таблиць на сторінці кожної з них зручно задати заголовок, що містить назву таблиці і її опис. Для цієї мети в HTML існує спеціальний тег <CAPTION>, який встановлює текст і його положення щодо таблиці. Найпростіше розміщувати текст по центру таблиці зверху або знизу від неї, в інших випадках браузери по різному інтерпретують параметри тега <CAPTION>, через що результат виходить неоднаковий. За замовчуванням заголовок поміщається зверху таблиці по центру, його ширина не перевищує ширини таблиці і в разі довгого тексту він автоматично переноситься на новий рядок. Для зміни положення заголовка у тега <CAPTION> існує параметр align, який може набувати таких значень.

left - вирівнює заголовок по лівому краю таблиці. Браузер Firefox має текст збоку від таблиці, Internet Explorer і Opera розташовують заголовок зверху, вирівнюючи його по лівому краю.
right - в браузері Internet Explorer і Opera має заголовок зверху таблиці і вирівнює його по правому краю таблиці. Firefox відображає заголовок праворуч від таблиці.
center - заголовок розташовується зверху таблиці по її центру. Таке розташування задано в браузерах за замовчуванням.
top - результат аналогічний дії параметра center, але на відміну від нього входить в специфікацію HTML 4 і розуміється всіма браузерами.
bottom - заголовок розміщується внизу таблиці по її центру.

Як видно з опису, отримати універсальний код, однаково працює в різних браузерах, в разі розташування заголовка по правому або лівому краю, досить проблематично. У цьому випадку нам на допомогу прийдуть стилі і зокрема атрибут text-align. Його завдання - змусити текст вирівнюватися по потрібному краю. У прикладі 1 показано, як встановити заголовок зверху таблиці і вирівняти по її правому краю. Зверніть увагу, що тег <CAPTION> знаходиться всередині контейнера <TABLE>, це його стандартне місце.

Приклад 1. Створення заголовка таблиці за допомогою тега <CAPTION>

Дійсний HTML
Дійсний CSS
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Заголовок таблиці </ title>
<Style type = "text / css">
TABLE {
margin: 0 auto; / * Вирівнюємо таблицю по центру * /
}
CAPTION {
text-align: right; / * Вирівнювання по правому краю * /
font-style: italic; / * Курсивний текст * /
}
</ Style>
</ Head>
<Body>
<Table width = "80%" border = "1" cellpadding = "4" cellspacing = "0">
<caption> Зміна видобутку ресурсів по роках </ caption>
<Tr>
<Th> & nbsp; </ th> <th> 2003 </ th> <th> 2004 </ th> <th> 2005 </ th>
</ Tr>
<Tr>
<Td> Нафта </ td> <td> 43 </ td> <td> 51 </ td> <td> 79 </ td>
</ Tr>
<Tr>
<Td> Золото </ td> <td> 29 </ td> <td> 34 </ td> <td> 48 </ td>
</ Tr>
<Tr>
<Td> Дерево </ td> <td> 38 </ td> <td> 57 </ td> <td> 36 </ td>
</ Tr>
</ Table>
</ Body>
</ Html>

Нижче показаний результат прикладу (рис. 1). Зауважте, що заголовок вирівнюється не строго по правому краю таблиці, оскільки на нього, як і на вміст комірок, діє параметр cellpadding. Можна уявити, що заголовок це ще одна клітинка таблиці, на яку поширюються характеристики cellpadding і cellspacing.

Мал. 1

Мал. 1. Вид заголовка таблиці в браузері Opera

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

Приклад 2. Створення заголовка таблиці за допомогою стилів

Дійсний HTML
Дійсний CSS
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Заголовок таблиці </ title>
<Style type = "text / css">
TABLE {
margin: 0 auto; / * Вирівнюємо таблицю по центру * /
}
.caption {
margin: 0 15%; / * Відступ зверху і збоку від тексту * /
padding-bottom: 4px; / * Поле під текстом * /
text-align: right; / * Вирівнювання по правому краю * /
font-style: italic; / * Курсивний текст * /
}
</ Style>
</ Head>
<Body>
<p class = "caption"> Зміна видобутку ресурсів по роках </ p>
<Table width = "70%" border = "1" cellpadding = "4" cellspacing = "0">
<Tr> <td> ... </ td> </ tr>
</ Table>
</ Body>
</ Html>

В даному прикладі створюється новий клас з ім'ям caption, який застосовується до параграфу (тегу <P>). В даному випадку таблиця вирівнюється по центру веб-сторінки, тому те ж саме повинно відбутися і з параграфом. Для цієї мети додаються відступи зліва і справа через параметр margin. Ширину при цьому явно не вказуємо, вона виходить вирахуванням із загальної ширини вікна (100%) подвоєного відступу зліва (в прикладі 15%). Таким чином виходить, що ширина текстового блоку збігається з шириною таблиці. У разі використання в якості одиниць виміру пікселі, рекомендується скористатися тегом <CAPTION>.

Copyright що кредитують © www.htmlbook.ru