1. Таблиці і візуальне форматування
2. вирівнювання таблиць
3. Ширина таблиці
4. Висота таблиці і вертикальне вирівнювання
5. властивості valign
6. межі осередків
7. Властивості border-collapse і border-spacing
8. Відображення меж порожніх клітинок
9. Властивості empty-cells

У цьому розділі:

1. Таблиці і візуальне форматування
2. Ширина таблиці
3. Висота таблиці і вертикальне вирівнювання
4. межі осередків
5. Відображення меж порожніх клітинок

Як відомо, таблиці представляють собою відносини між даними. Візуально форматування таблиць відбувається у вигляді прямокутної сітки осередків. Рядки і стовпці осередків можуть об'єднуватися в групи рядків (в XHTML - елементи THEAD, TFOOT, TBODY) і групи стовпців (COL, COLGROUP). Навколо рядків, стовпців, груп рядків, груп рядків і осередків можуть проходити видимі межі. Всередині осередку дані можуть вирівнюватися по вертикалі або по горизонталі. Крім того, дані можуть вирівнюватися у всіх осередках або шпальтах.

Всього в CSS 2 передбачено 5 властивостей, що відносяться виключно до таблиць, проте до елементів таблиць застосовні і багато загальні властивості CSS, від border і padding до font і color. Однак дія ряду загальних властивостей при роботі з елементами таблиць мають свої нюанси. Крім того, ряд значень для деяких властивостей CSS, наприклад, display, мають ряд значень, які можна застосувати тільки до елементів таблиць. Зокрема, це все значення властивості display з префіксом table, які, як уже зазначалося, можуть бути застосовані лише до XML-документами.

Таким чином, таблиці багато в чому є «річчю в собі», тому в цьому розділі ми розглянемо не тільки специфічні для таблиць властивості CSS, але і саме уявлення табличних даних з точки зору каскадних таблиць стилів - на додаток до тієї інформації, що вже розглядалася в рамках XHTML.

Таблиці і візуальне форматування

Модель таблиць CSS заснована на моделі таблиць HTML 4.0, в якій структура таблиці тісно пов'язана з візуальним поданням таблиці. У цій моделі таблиця складається з необов'язкового заголовка і довільної кількості рядків осередків. Така модель таблиць вважається «орієнтованої на рядки», оскільки в документі явним чином визначаються саме рядки, а не стовпці. Стовпці ж визначаються тільки після вказівки всіх рядків: перша осередок рядка відноситься до на одну, друга - до другого і т.д. Рядки і стовпці можуть утворювати структурні групи з відображенням при поданні таблиці (наприклад, навколо групи рядків може розташовуватися спільний кордон).

Таким чином, таблиця складається із заголовків, рядків, груп термін, стовпців, груп стовпців і комірок. Давайте згадаємо всі типи візуального представлення, що відносяться до таблиць, а також елементи XHTML, відповідні таким типам, для чого звернемося до таблиці 3.8.

Таблиця 3.8. Види табличного відображення в CSS і кореспондуючі елементи XHTML Тип Елемент в XHTML Опис table TABLE Вказує, що елемент визначає звичайну таблицю рівня блоку (block) inline-table TABLE Вказує, що елемент визначає таблицю рівня стоки (inline) table-row TR Вказує, що елемент є рядком осередків table-row-group TBODY Вказує, що елемент групує одну або кілька рядків table-header-group THEAD Аналогічно table-row-group, але при виведенні ця група рядків завжди відображається перед усіма іншими рядками або групами, відразу за головним заголовком таблиці table-footer-group TFOOT Ана огічно table-row-group, але при виведенні ця група рядків завжди відображається після всіх інших рядків або груп table-column COL Вказує, що елемент визначає стовпець осередків table-column-group COLGROUP Вказує, що елемент об'єднує один або декілька стовпців table-cell TD, TH Вказує, що елемент являє собою елемент таблиці table-caption CAPTION Задає головний заголовок таблиці

Очевидно, що всі види відображення, прийняті в CSS, міцно пов'язані з певними елементами XHTML. Це й не дивно, адже XHTML - це той же HTML 4.0, який, з одного боку, вніс ясність в табличну модель, а з іншого - з'явився на рік раніше, ніж CSS 2. Єдине нововведення - це тип inline-table, який робить таблицю елементом рядка. Оскільки в XHTML для цього не передбачено спеціального тега, то такі таблиці завжди визначаються з використанням CSS:

<Div> Блок тексту, що містить таблицю типу Inline. <Table style = "display: inline-table;"> <tr> <td> осередок </ td> </ tr> </ table> Кінець тексту. </ Div>

Втім, справедливості заради, слід зазначити, що такий тип таблиць (по крайней мере, для XHTML) підтримується тільки останніми версіями браузерів (хіба щов Opera підтримка з'явилася ще в 7-й версії). Щоб в цьому переконатися, подивіться файл Part_3 \ Tables \ itable.html в різних програмах перегляду: при правильній побудові таблиця повинна знаходитися в одному рядку з іншим текстом.

Відомо, що елементи таблиці належать двом контекстам: рядках і стовпцях. Однак, як уже зазначалося, в вихідному документі осередку є спадщиною елементами рядків, а не стовпців. Але, тим не менш, на ряд властивостей осередків впливають властивості стовпців. Зокрема, до таких належать border, background, width і visibility. При цьому властивість visibility може приймати значення visible і collapse, а не visible і hidden, як для інших елементів. А яка призначається колонкам властивість background матиме силу тільки в тому випадку, якщо рядки та клітинки таблиці мають прозорий фон. Пов'язано це з тим, що всі елементи таблиці мають визначене позиціонування по верствам.

Всього в таблиці є 6 шарів. Самим нижнім є власне контейнер таблиці. За ним слідують: групи колонок, колонки, групи рядків, рядки і, нарешті, власне осередки. При цьому не важливо, чи вказані явно всі ці елементи (досить часто колонки і групи колонок і рядків не вказують), оскільки будь-який браузер, що підтримує хоча б HTML 4.0, вважає, що вони все одно є - подібно до того, як мається на увазі наявність тегів HTML , HEAD і BODY в будь-якому документі HTML. Відповідно, якщо задати фон для таблиці в цілому, а потім вказати власний фон для рядків або осередків, то загальний фон видно не буде. Виняток становитимуть лише області, не зайняті осередками - наприклад, простір між ними.

Окремим від таблиці є блок заголовка, що формується в XHTML елементом CAPTION. Він являє собою окремий блок, розташований окремо від власного блоку таблиці, але при цьому заголовок і таблиця разом утворюють загальний анонімний блок. Останнє важливо з точки зору позиціонування, оскільки, наприклад, при обтіканні в якості кордону табличного блоку буде виступати не сама таблиця, а саме такий анонімний блок, утворений таблицею разом з заголовком. Зрозуміло, все це вірно тільки для випадку, коли заголовок визначено в вихідному документі.

Для вирівнювання заголовка в CSS передбачено властивість caption-side. В CSS 2 було визначено 4 види вирівнювання: по верху (top), по низу (bottom), а так само по лівому (left) і по правому (right) краях. Однак в специфікації CSS 2.1 останні два значення зникли, а підтримка такого розташування заголовка за весь час існування CSS 2 була забезпечена лише браузерами Mozilla.

Приклади розташування заголовків, а заодно - і шарів можна подивитися у файлі layers.html.

Таким чином, ми розглянули ряд принципів візуального форматування таблиць, а так само одна з властивостей CSS, що відносяться тільки до таблиць - caption-side.

вирівнювання таблиць

Значення за замовчуванням: top. Успадковані значення: так. Застосовується: до головного заголовку таблиці. Сумісність: все, крім MSIE 6-7.

Ширина таблиці

На відміну від інших елементів, ширина таблиці далеко не завжди визначається значенням властивості width. Справа в тому, що якщо автоматичний підбір ширини діє для інших типів блоків тільки в тих випадках, коли ширина не вказана, то для таблиць завжди діє спеціальний алгоритм, що сприймає зазначену у властивості width ширину як мінімальну, а реальні розміри обчислюються на основі реального вмісту. Фактично, для таблиць властивість width діє як властивість min-width для інших блоків.

Проте, в CSS 2 є властивість, що дозволяє більш жорстко управляти відображенням таблиць це - table-layout. Воно може приймати 2 значення - auto (прийнято за замовчуванням) і fixed. Відповідно, в першому випадку розміри таблиці розраховуються браузером виходячи з вмісту осередків, а в другому будуть враховані тільки задані явно ширина стовпців і таблиці в цілому. Таким чином, при належній акуратності (тобто якщо сумарна зазначена ширина стовпців буде не більше, ніж ширина таблиці) можна дійсно розраховувати на те, що ширина таблиці буде саме такою, як зазначено у властивості width. Розглянемо обидва варіанти розташування таблиць, звернувшись до лістингу 3.10.

Лістинг 3.10. Автоматичне і фіксоване розміщення таблиць

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"> <html> <head> <title> Ширина таблиць </ title> <style type = "text / css"> .t1 {width : 160px; table-layout: auto; border: solid 2px black} .t2 {width: 160px; table-layout: fixed; border: solid 2px black} </ style> </ head> <body> <table class = "t1"> <caption> Автоматичне <caption> <tr> <td> Осередок 1 </ td> <td> Осередок 2 < / td> <td> Осередок 3 </ td> <td> Осередок 4 </ td> </ tr> </ table> <table class = "t2"> <caption> Фіксований <caption> <tr> <td> осередок 1 </ td> <td> осередок 2 </ td> <td> осередок 3 </ td> <td> осередок 4 </ td> </ tr> </ table> </ body> </ html>

Тут задано 2 класу таблиць, один - з автоматичним, а другий - з фіксованим розміщенням. Для обох класів визначена ширина в 160 пікселів. У HTML-частини визначені 2 аналогічні таблиці, перша з яких має клас з автоматичним розміщенням, а друга - з фіксованим. Очевидно, що відведеного розміру (менше 40 пікселів на стовпець) не вистачить для того, щоб вивести вміст. Відповідно, переглянувши приклад в браузері ми побачимо, що перша таблиця була розширена приблизно до 220 пікселів (рис. 2.17, зверху) - це типова поведінка всіх сучасних браузерів. У той же час таке «типова поведінка» нерідко виявляється непотрібним.

Мал. 3.17. Варіанти розміщення (обчислення розмірів) таблиць

Зате друга таблиця отримує саме ту ширину, яка була вказана. При цьому не разом комірки накладається один на одного (по крайней мере, в Mozilla-браузерах - см. Рис. 2.17), що й не дивно, тому що значенням за замовчуванням вступає тут в силу властивості overflow є visible. Втім, таблиці - є таблиці, і в MSIE і Opera для таблиць зроблено виняток, в результаті чого в цих браузерах не вміщається вміст обрізається. Так що для отримання більш передбачуваному результату в різних програмах перегляду краще підстрахуватися і вказати тип переповнення явно:

td {overflow: visible}

У той же час, якби ми для другої таблиці задали явно ширину рядків, використовуючи чи елементи COL або COLGROUP, або ж вказуючи ширину самих осередків, то розмір таблиці все-таки міг би змінитися. Припустимо, ми вкажемо ширину стовпців по 45 пікселів - у результаті розмір таблиці перевищить вказане нами значення, однак, хоча цього розміру все одно буде не зовсім достатньо для повноцінного (без переповнення) відображення осередків, подальшого збільшення ширини не відбудеться. Але якби в якості ми вказали те ж саме в таблиці з автоматичним розміщенням, то зазначені 45 пікселів браузер сприйме як благе побажання, і врахує лише, що ширина всіх стовпців повинна бути однаковою, але все розширить їх до необхідного розміру (в розглянутому прикладі - близько 50px).

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

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

Значення за замовчуванням: auto.
Успадковані значення: немає.
Застосовується: до таблиці в цілому.
Сумісність: все.

Висота таблиці і вертикальне вирівнювання

Подібно ширині, висота таблиці може бути намічена за допомогою властивості height, заданого для таблиці. Однак в остаточному підсумку висота таблиці завжди обчислюється автоматично, і властивість height лише обмежує її мінімальну висоту - варіантів з фіксованим розміщенням для розмірів по вертикалі в CSS не передбачено. В результаті висота таблиці складається із сум висот її рядків, які, в свою чергу, або обчислюються автоматично, або задаються за допомогою властивості height - останній варіант (тобто вказівка ​​висоти для осередку в кожному рядку) є єдиною можливістю вплинути на висоту таблиці в цілому.

Але тут ми можемо розглянути інший аспект, пов'язаний з розмірами по вертикалі. Це - властивість CSS vertical-align. Хоча воно і не пов'язане безпосередньо з таблицями (і, більш того, має обмеження при впливі з осередками таблиць), саме для заміни призначеного для рядків і осередків таблиць HTML-атрибуту VALIGN воно, в першу чергу, і призначається.

Отже, властивість vertical-align для елементу таблиці визначає її вирівнювання в рядку. Вміст кожного осередку має базову лінію, верх, середину і низ (так само, як і сама рядок). Відповідно, серед допустимих значень цієї властивості є baseline, top, middle і bottom. Перш за все, розберемося з базовою лінією - baseline. Стосовно до таблиць за базову лінію осередку приймається базова лінія першого лінійного блоку. На практиці це означає, що якщо є 2 вирівняні за базовою лінії осередку, причому в першій розмір шрифту більше, ніж у другій, то базова лінія, по якій вирівнюється виведений текст, буде однаковою в обох осередках.

За замовчуванням властивості vertical-align є baseline, але тут знову дається взнаки специфіка таблиць: якщо ні для однієї з осередків у рядку не вказано явно властивість vertical-align із значенням baseline, то базова лінія обчислена браузером не буде. Відповідно, висновок таблиці з висновком за замовчуванням і з явно заданим вирівнюванням по базовій лінії буде відрізнятися, в чому неважко переконатися, створивши таблицю, яка містить рядки без вертикального вирівнювання і з вирівнюванням по базовій лінії (див. Файл valign.html). Якщо таку таблицю доповнити рядками, вирівняними по 3 решті варіантів, то можна переконатися, що насправді, браузери вирівнюють вміст комірок по середині (рис. 3.18).

Мал. 3.18. Варіанти вертикального вирівнювання осередків

Якщо тепер трохи відволіктися від таблиць, то можна відзначити, що значення властивості vertical-align крім уже розглянутих, можуть бути наступними:

• sub - Здійснюється зсув базисної лінії вниз до рівня, відведеного для нижніх індексів батьківського блоку;
• super - Здійснюється зсув базисної лінії вгору до рівня, відведеного для верхніх індексів батьківського блоку;
• text-top - Здійснюється вирівнювання верхньої межі по верхній же кромці шрифту батьківського елементу;
• text-bottom - Здійснюється вирівнювання нижньої межі по нижній же кромці шрифту батьківського елементу.

Крім того, в якості значення для vertical-align допустимо вказувати розмір або процентне значення. В такому випадку зміщення буде відбуватися вгору (або вниз - в разі від'ємного значення) на задану величину щодо базової лінії.

Що ж до нечислових значень, то, наприклад, сенс значень sub і super зводиться до того ж, що і використання елементів SUB і SUP в XHTML, з тією лише різницею, що задається за допомогою CSS зміщення не впливає на розмір шрифту:

Основний текст, <sup> нижній індекс (дрібний) </ sup> ще текст <span style = "vertical-align: sub;"> нижній індекс (нормальний) </ span>.

Це буде виведено браузером приблизно так:

Основний текст, нижній індекс (дрібний) ще текст нижній індекс (нормальний).

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

<Span style = "vertical-align: sub; font-size: 10pt;"> нижній індекс </ span>.

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

властивості valign

Значення за замовчуванням: baseline (для комірок таблиць - middle).
Успадковані значення: немає.
Застосовується: до осередків таблиці і строковим блокам.
Сумісність: все.

межі осередків

Подібно до того, як є 2 варіанти розміщення таблиць, кордони між осередками в таблицях так само можуть бути одного з 2-х типів: з окремими (separate) або пересічними (collapse) межами. За вибір моделі кордонів відповідає властивість CSS border-collapse, яке, відповідно, може приймати значення collapsed або separated. Цікаво відзначити, що якщо в CSS 2 за значення за замовчуванням було прийнято collapsed, то в CSS 2.1, з оглядкою на реальний стан речей (тобто на те, як браузери виводять таблиці без CSS), за таке прийняли separated. Щоб розібратися з варіантами виведення кордонів, звернемося до лістингу 3.11.

Лістинг 3.11. варіанти кордонів

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"> <html> <head> <title> Межі </ title> <style type = "text / css"> table, td {border: solid 1px black; } </ Style> </ head> <body> <table style = "border-collapse: separate;"> <caption> ОКРЕМІ </ caption> <tr> <td> Осередок 1-1 </ td> <td> осередок 1-2 </ td> <td> осередок 1-3 </ td> </ tr> <tr> <td> осередок 2-1 </ td> <td> осередок 2-2 </ td> <td > Осередок 2-3 </ td> </ tr> </ table> <br /> <table style = "border-collapse: collapse;"> <caption> пересічні </ caption> <tr> <td> Осередок 1 -1 </ td> <td> Осередок 1-2 </ td> <td> Осередок 1-3 </ td> </ tr> <tr> <td> Осередок 2-1 </ td> <td> Осередок 2-2 </ td> <td> Осередок 2-3 </ td> </ tr> </ table> </ body> </ html>

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

Мал. 3.19. Окремі і пересічні кордону осередків

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

Оскільки в моделі окремих кордонів кожна клітинка має власні кордони, то логічно було б припустити, що можна управляти відстанню між зовнішніми кордонами осередків. І якщо засобами HTML це робиться за допомогою атрибута CELLSPACING, то в CSS для цього є властивість border-spacing. Створене таким чином меж'ячеечное простір заповнюється фоном елемента таблиці (це ви вже могли бачити на прикладі шарів у файлі layers.html).

ПРИМІТКА
Очевидно, що у випадку з осередками властивість border-spacing фактично є еквівалентом властивості margin для інших елементів. А ось для визначення внутрішнього відступу як і раніше можна використовувати властивість padding (або ж атрибут CELLPADDING стосовно HTML).

Тут залишається відзначити, що властивість border-spacing має сенс застосовувати лише в тому випадку, коли використовується модель таблиці з роздільними межами осередків, оскільки в іншому випадку меж'ячеечних інтервалів просто не буде.

Так само слід взяти до відома, що для рядків, стовпців і їх груп не може бути кордонів. Справа в тому, що навіть в разі, якщо ви вказали, що кордони повинні проходити, скажімо, по рядках (наприклад, присвоївши HTML-атрибуту RULES значення Rows), кордони все одно будуть належати самим осередкам, а не абстрактної лінії, що проходить меду двома їх рядами.

Властивості border-collapse і border-spacing

Значення за замовчуванням: border-collapse - separate; border-spacing - 0.
Успадковані значення: так.
Застосовується: до таблиць.
Сумісність: все.

Відображення меж порожніх клітинок

На завершення теми таблиць з окремими межами між осередками розглянемо такий випадок, коли потрібно виводити кордону навіть в тому випадку, коли осередок є марною. Під терміном «порожня клітинка» розуміється випадок, коли осередок не містить ніякої інформації: тобто або взагалі нічого, або тільки пробільні символи. Як вам, напевно, вже відомо, браузери практично ігнорують такі осередки при виведенні таблиць - окремі порожні клітинки виглядають просто як пусте місце, а якщо в рядку всі осередки виявляться порожніми, то вся рядок буде стиснута практично до нульової висоти.

Щоб проілюструвати таку поведінку, візьмемо за основу першу таблиці з попереднього прикладу (лістинг 3.11) і модифікуємо її таким чином, щоб в першому рядку залишилася тільки одна непорожній осередок, а в другій непустих осередків не було зовсім, після чого додамо ще одну, третю рядок :

<Table style = "border-collapse: separate;"> <tr> <td> Осередок 1-1 </ td> <td> Осередок 1-2 </ td> <td> Осередок 1-3 </ td> < / tr> <tr> <td> </ td> <td> </ td> <td> </ td> </ tr> <tr> <td> Осередок 3-1 </ td> <td> Осередок 3 -2 </ td> <td> Осередок 3-3 </ td> </ tr> </ table>

Якщо тепер відкрити файл з такою таблицею в браузері, то можна буде переконатися, що в першому рядку окреслена кордоном лише перший осередок, правіше якої знаходиться порожній простір, а про існування 2-го рядка можна тільки здогадуватися. І хоча такий стан речей і здається звичним, не завжди це зручно. В такому випадку слід використовувати властивість empty-cells, яке може приймати одне з двох значень - hide (приховувати) і show (показувати).

Так що тепер ми можемо модифікувати таблицю знову, додавши в опис стилю це властивість з потрібним значенням:

<Table style = "border-collapse: separate; empty-cells: show;">

Результати побудови обох варіантів таблиць можна подивитися у файлі empty.html.

Залишається зауважити, що у випадку з пересічними осередками усі можливі межі видно завжди, незалежно від значення властивості empty-cells. Однак, при цьому виникає такий резонне питання, як бути в тому випадку, якщо пересічні кордону мають різне оформлення? В такому випадку на допомогу нам (і розробникам браузерів) приходить описаний в CSS 2 алгоритм вирішення «прикордонних» конфліктів. Суть його зводиться до наступних 4 пунктам:

1. Межі, для властивості border-style яких встановлено значення hidden, мають пріоритет над усіма іншими суміжними межами: всі інші кордону в зазначеному місці не відображаються.
2. У кордонів, що мають стиль none, найнижчий пріоритет. Тільки якщо властивості кордонів всіх осередків, що відносяться до цього краю, мають значення none, кордони не буде (але не забувайте, що значення none використовується для стилю кордону за замовчуванням).
3. Якщо жоден із стилів не має значення hidden і хоча б один з них має значення, відмінне від none, то «перемагають» більш широкі межі. Якщо у декількох кордонів властивості border-width мають однакові значення, стилі застосовуються в наступному порядку: double, solid, dashed, dotted, ridge, outset, groove і inset (по спадаючій пріоритету).
4. Якщо стилі кордонів відрізняються тільки кольором, тоді стиль, заданий для осередку, має пріоритет над стилем рядки, стиль рядка - над стилем групи рядків, стовпці, групи стовпців і таблиці.

Приклад вирішення конфліктів ви можете подивитися у файлі conflict.html.

На цьому знайомство як з властивістю border-collapse, так і зі специфікою таблиць в рамках CSS взагалі можна вважати закінченим - адже всі 5 табличних властивостей нам вже знайомі!

Властивості empty-cells

Значення за замовчуванням: hide.
Успадковані значення: так.
Застосовується: до таблиць.
Сумісність: крім MSIE 6-7.

2011-06-21 // Є питання, пропозиції, зауваження? Ви можете обговорити це на форумі !