- 17. Таблиці.
- 17.5.1. Табличні шари і прозорість.
- 17.5.2. Алгоритми для ширини таблиці: властивість 'table-layout'.
- Фіксована розмітка таблиці.
- Автоматична розмітка таблиці.
- 17.5.3. Алгоритми для висоти таблиці.
- 17.5.4. Горизонтальне вирівнювання в колонці.
- 17.5.5. Динамічні ефекти для рядів і колонок.
17. Таблиці.
Подібно до інших елементів мови документа, внутрішні табличні елементи генерують прямокутні блоки з вмістом, відступами і кордонами. Але, вони не мають полів.
Візуальна розмітка цих блоків управляється прямокутником (нерівномірної гратами рядів і колонок). Кожен блок займає все осередки решітки, визначені відповідно до наступних правил. Ці правила не застосовуються для HTML 4.0 або більш ранніх версій; тому HTML використовує свої власні обмеження для рядів і колонок.
- Кожен блок рядів займає один ряд осередків решітки. Разом блоки рядів заповнюють таблицю з верху вниз в порядку, який вони займають в документі джерелі (тобто таблиця займає точно стільки рядів решітки, скільки існує елементів рядів).
- Група рядів займає ті ж осередку решітки, що і ряди, які вона містить.
- Блок колонок займає одну або кілька колонок осередків решітки. Блоки колонок розміщуються послідовно за кожним іншим в порядку, який вони займають. Перший блок колонок може бути або ліворуч, або праворуч, залежно від значення властивості таблиці 'direction'.
- Група колонок займає ті ж осередку решітки, що і колонки, які вона містить.
- Осередки можуть займати кілька рядів або колонок. (Хоча CSS2 не визначають, як кількість зайнятих рядів або колонок визначаються, пристрій виведення може мати спеціальні відомості про документ джерелі; майбутні версії CSS можливо нададуть спосіб виразити це в синтаксисі). Кожна клітинка є прямокутним блоком з шириною і висотою однієї або декількох осередків решітки. Верхній ряд цього прямокутника знаходиться в ряду, визначеному батьківським елементом осередку. Прямокутник повинен бути якнайдалі вліво, але він не може перекриватися з іншим блоком осередки і повинен бути праворуч від всіх осередків в тому ряду, який знаходиться раніше в документі джерелі. (Це обмеження зберігається, якщо властивість таблиці 'direction' встановлено як 'ltr'; якщо 'direction' - 'rtl', то переставте "ліво" і "право" в попередньому реченні).
- Блок комірок не може розширюватися за останній блок рядів таблиці або групи рядів; пристрою виведення повинні вкорочувати його до повної підгонки.
Нижче наведено два приклади. Перший - для HTML-документа:
<TABLE>
<TR> <TD> 1 <TD rowspan = "2"> 2 <TD> 3 <TD> 4
<TR> <TD colspan = "2"> 5
</ TABLE>
<TABLE>
<ROW> <CELL> 1 <CELL rowspan = "2"> 2 <CELL> 3 <CELL> 4
<ROW> <CELL colspan = "2"> 5
</ TABLE>
Друга таблиця форматується, як на малюнку справа. Але, візуалізація HTML-таблиці точно не визначена в HTML, а CSS не намагається визначити її. Пристрої виведення вільні в її візуалізації, наприклад, на малюнку зліва.
D Зліва - одна можлива візуалізація неправильної таблиці HTML 4.0; праворуч - тільки можливе форматування схожою таблиці, не мовою HTML.
17.5.1. Табличні шари і прозорість.
З метою знаходження фону кожного елементу таблиці, різні табличні елементи можуть складатися з шести накладаються шарів. Шар, встановлений для елемента, буде видимим, тільки якщо шари над ним прозорі.
D Схема табличних шарів.
- Самий нижній шар - це площина, що представляє сам табличний блок. Подібно до всіх блокам, він може бути прозорим.
- Наступний шар містить групу колонок. Групи колонок такої ж висоти, як і таблиця, але їм не потрібно покривати всю таблицю горизонтально.
- На вершині групи колонок знаходяться області, що представляють блоки колонок. Подібно групам колонок, колонки такої ж висоти, як і таблиця, але їм не потрібно покривати всю таблицю горизонтально.
- Наступний - це шар, що містить групу рядів. Кожна група рядів має таку ж ширину, що і таблиця. Разом групи рядів повністю покривають таблицю зверху до дна.
- Наступний шар містить ряди до самого останнього шару. Ряди теж покривають всю таблицю.
- Самий верхній шар містить самі осередки. Як показує малюнок, хоча все ряди містять однакову кількість осередків, але не кожна клітинка має зміст. Ці "порожні" осередки прозорі, і дозволяють нижнім верствам просвічуватися через них.
У наступному прикладі, перший ряд містить чотири осередки, але другий ряд не містить осередків, і таким чином фон таблиці просвічує через нього, виключаючи випадок, де осередок з першого ряду триває в цьому ряду. Наступні HTML-код і стильові правила:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 // EN">
<HTML>
<HEAD>
<STYLE type = "text / css">
TABLE {background: # ff0; border-collapse: collapse}
TD {background: red; border: double black}
</ STYLE>
</ HEAD>
<BODY>
<P>
<TABLE>
<TR>
<TD> 1
<TD rowspan = "2"> 2
<TD> 3
<TD> 4
</ TR>
<TR> <TD> </ TD> </ TR>
</ TABLE>
</ BODY>
</ HTML>
повинні форматироваться наступним чином:
D Таблиця з трьома порожніми осередками в нижньому ряду.
17.5.2. Алгоритми для ширини таблиці: властивість 'table-layout'.
CSS не визначають "оптимальної" розмітки для таблиць, оскільки у багатьох випадках оптимальність - це справа смаку. CSS не встановлюють обмеження, які пристрої виведення повинні враховувати, размечая таблиці. Пристрої виведення можуть використовувати будь-які алгоритми, які вони хочуть виконувати, і вони вільні у виборі швидкої візуалізації над точністю, виключаючи випадок, коли обраний "алгоритм фіксованою розмітки".
'table-layout'Тип значення: auto | fixed | inherit
Початкова величина: auto
Застосовується: до елементів 'table' і 'inline-table'
Спадкування: немає
Процентна база: немає
Медіа: візуальні
Властивість 'table-layout' контролює алгоритм, який використовується для розмітки табличних комірок, рядів і колонок. Значення властивості наступні:
fixedВикористовує алгоритм фіксованою розмітки таблиці.
auto
Використовує алгоритм автоматичної розмітки таблиці.
Обидва алгоритми описані нижче.
Фіксована розмітка таблиці.
З цим швидким алгоритмом, горизонтальна розмітка таблиці не залежить від змісту осередків; вона залежить тільки від ширини таблиці, ширини колонок і кордонів або інтервалу між осередками.
Ширина таблиці може визначатися властивістю 'width' точно. Значення 'auto' (для обох властивостей 'display: table' і 'display: inline-table') означає використання алгоритму автоматичної розмітки таблиці.
В алгоритмі фіксованою розмітки ширина кожної колонки визначається наступним чином:
- Елемент колонки зі значенням, відмінним від 'auto' для властивості 'width', встановлює ширину для такої колонки.
- Інакше, осередок в першому ряду зі значенням, відмінним від 'auto' для властивості 'width', встановлює ширину для такої колонки. Якщо осередок тягнеться більш ніж на одну колонку, то ширина розділяється між колонками.
- Будь-які залишилися колонки ділять так само залишився горизонтальне простір таблиці (мінус кордону або інтервали між осередками).
Ширина таблиці стає більше значення властивості 'width' для табличного елементу і суми ширини колонок (плюс інтервал між осередками або кордону). Якщо таблиця ширше, ніж колонки, то це додатковий простір розподіляється по колонках.
Таким же способом, пристрій виведення може почати розмітку таблиці відразу, як тільки буде виведений весь перший ряд. Осередки в послідовних рядах не впливають на ширину колонок. Будь-яка осередок, яка має зміст, що виходить за межі, використовує властивість 'overflow' для визначення: вирізається таке зміст.
Автоматична розмітка таблиці.
У цьому алгоритмі (який зазвичай вимагає не більше двох прогонів) ширина таблиці дана по ширині її колонок (і проміжних кордонів). Цей алгоритм відображає поведінку декількох популярних пристроїв виведення HTML при написанні специфікацій. Для виконання цього алгоритму не потрібний пристрій виведення при визначенні табличній розмітки в разі, при якому 'table-layout' встановлено як 'auto'; тобто вони можуть використовувати будь-які інші алгоритми.
Цей алгоритм може бути неефективним, так як він вимагає, щоб пристрій виведення мало доступ до всього вмісту в таблиці перед визначенням остаточної розмітки, що може зажадати більш ніж одного прогону.
Ширина колонок визначається наступним чином:
- Розраховують мінімальну ширину змісту (МШС) для кожного осередку: отформатироване зміст може сягати на будь-яку кількість рядків, але не може переходити за блок осередки. Якщо певна ширина 'width' (Ш) осередки більше, ніж МШС, то Ш є мінімальною шириною осередки. Значення 'auto' означає, що МШС є мінімальною шириною осередки. Крім цього, розраховують "максимальну" ширину осередку кожного осередку: форматується зміст без розриву рядків, на відміну від місць, де рядки обриваються.
- Для кожної колонки визначають максимальну і мінімальну ширину для осередків, які є тільки в цій колонці. Мінімальна - це та, яка потрібна осередком з найбільшою мінімальною шириною осередку (або ширина колонки 'width', яка більше). Максимальна - це та, яка потрібна осередком з найбільшою максимальною шириною осередку (або ширина колонки 'width', яка більше).
- Для кожного осередку, яка тягнеться більш ніж на одну колонку, збільшують мінімальну ширину, на розмір, який вона займає в колонках. Роблять те ж саме, що і для максимальних ширин. Якщо можливо, розширюються всі зайняті колонки приблизно на однакову кількість.
Все це дає максимальну або мінімальну ширину для кожної колонки. Ширина колонки впливає на остаточну ширину таблиці:
- Якщо властивість 'width' елемента 'table' або 'inline-table' має певне значення (Ш) відрізняється від 'auto', то розраховане значення властивості більше Ш і мінімальної ширини, необхідної усіма колонками плюс інтервали між осередками або кордону (МІН). Якщо Ш більше, ніж МІН, то додаткова ширина повинна розподілятися по колонках.
- Якщо елемент table 'або' inline-table 'має' width: auto ', то розрахована ширина таблиці більше ширини осяжний блоку таблиці і МІН. Але, якщо максимальна ширина, яка потрібна колонками, плюс інтервал між осередками або кордону (МАХ) менше, ніж ширина осяжний блоку, то використовують МАХ.
Процентне значення для ширини колонки є відносною величиною до ширини таблиці. Якщо таблиця має 'width: auto', то відсотки представляють обмеження для ширини колонки, яке пристрій виведення намагається задовольнити. (Очевидно, це не завжди можливо: якщо ширина колонки складає '110%', то обмеження не може задовольнятися).
Зверніть увагу. У цьому алгоритмі ряди (і групи рядів) і колонки (і групи колонок) все обмежують і обмежуються розмірами вічок, які вони містять. Установка ширини колонки може побічно впливати на висоту ряду і навпаки.
17.5.3. Алгоритми для висоти таблиці.
Висота таблиці встановлюється властивістю 'height' для елемента 'table' або 'inline-table'. Значення 'auto' означає, що висота є сумою висот рядів плюс будь-які інтервали між осередками або кордону. Будь-яке інше значення визначає висоту явно; таблиця може, таким чином, бути вище або коротше, ніж висота її рядів. CSS2 не визначає візуалізацію, коли певна табличная висота відрізняється від висоти змісту, зокрема, чи повинна висота змісту долати встановлену висоту; як має додаткове відстань розподілятися серед рядів, коли воно додається до меншої встановленої висоті таблиці; або якщо висота змісту перевищує певну табличную висоту, то чи повинен пристрій виведення надавати механізм скролінгу. Зверніть увагу. Майбутні версії CSS можуть визначити це в майбутньому.
Висота блоку елемента 'table-row' розраховується, як тільки пристрій виведення отримує все осередки в низці: вона є максимумом від певної висоти ряду 'height' і мінімальної висоти (МІН), необхідної для осередку. Значення 'height' як 'auto' для 'table-row' означає, що розрахована висота ряду є МІН. МІН залежить від висоти блоків осередків і їх вирівнювання (дуже схоже на розрахунок висоти сатиричного блоку). CSS2 не визначають, до яких процентним значенням 'height' звертаються, коли висота визначається для рядів таблиці і груп рядів.
CSS2 не визначають, як осередки, які простягаються більш, ніж на один ряд, впливають на розрахунки висоти ряду, за винятком того, що сума висот відповідних рядів повинні бути досить великими для включення осередки, що займає ряди.
Властивість 'vertical-align' кожного елементу таблиці визначає її вирівнювання всередині ряду. Кожне зміст осередку має базову лінію: верх, середину і дно, що визначаються поруч. В контексті таблиць значення для 'vertical-align' має наступне значення:
baselineБазова лінія осередку розміщується на тій же висоті, що і базова лінія першого з лав, який вона займає (дивіться нижче про визначення базової лінії осередків і рядів).
top
Вершина блоку осередків вирівнюється з вершиною першого ряду, який вона займає.
bottom
Дно блоку вічка вирівнюється з дном останнього ряду, який вона займає.
middle
Центр вічка вирівнюється з серединою ряду, який вона займає.
sub, super, text-top, text-bottom
Ці значення не застосовуються до осередків; осередок вирівнюється по базовій лінії.
Базова лінія - це базова лінія першого сатиричного блоку в осередку. Якщо немає тексту, то базова лінія визначається базовою лінією вводиться в осередок об'єкта, а якщо його немає, то дном блоку осередків. Максимальна відстань між верхом блоку осередку і базовою лінією всіх осередків, які мають 'vertical-align: baseline', використовується для установки базової лінії ряду. Нижче наведено приклад:
D Діаграма, що показує вплив різних значень 'vertical-align' на елементи таблиці.
Блоки осередків 1 і 2 вирівнюються за своїми базовими лініями. Блок комірок 2 має найбільшу висоту (вище базової лінії), тому він визначає базову лінію ряду. Зверніть увагу на те, що якщо немає блоку осередків, вирівняних по його базової лінії, то ряд не матиме (або вона не потрібна) базової лінії.
Для уникнення двозначних ситуацій, вирівнювання осередків виконується в наступному порядку:
- По-перше, позиціонуються осередки, які вирівнюються по своїй базової лінії. Це буде засновувати базову лінію ряду. Далі, позиціонуються осередки з 'vertical-align: top'.
- Тепер ряд має верх, можливо, базову лінію, і попередню висоту, яка є дистанцією від вершини до найнижчого дну осередків, позиціонуються так далеко. (Дивіться умови по відступами осередків нижче.)
- Якщо будь-яка з решти осередків вирівняна по низу або по середині, має висоту більше, ніж поточна висота ряду, то висота ряду буде збільшуватися до максимального значення цього осередку, знижуючи низ.
- В кінці, позиціонуються залишилися осередки.
Блоки осередків, які менше, ніж висота ряду, отримують додаткові відступи вгорі і внизу.
17.5.4. Горизонтальне вирівнювання в колонці.
Горизонтальне вирівнювання вмісту комірки всередині блоку осередку визначається властивістю 'text-align'.
Коли властивість 'text-align' більш ніж для одного осередку в колонці встановлюється зі значенням <string>, то зміст таких осередків вирівнюється вздовж вертикальної осі. Початок рядка стосується цієї осі. Напрямок символів визначається випадком: чи лежить рядок ліворуч або праворуч від осі.
Вирівнювання тексту таким способом корисно тільки, якщо текст підганяється до одного рядка. Результат не визначається, якщо зміст осередку займає більше одного рядка.
Якщо значення 'text-align' для елементу таблиці є рядком, але рядок не перебуває в утриманні осередки, то кінець змісту комірки стосується вертикальної осі вирівнювання.
Зверніть увагу на те, що рядки не повинні бути однаковими для кожного осередку, хоча вони зазвичай є.
CSS не надають способу, як визначати зміщення вертикальної осі вирівнювання з урахуванням краю блоку колонки.
Наступна стильова таблиця:
TD {text-align: "." }
TD: before {content: "$"}
буде приводити колонку з цифрами доларів в наступній HTML-таблиці:
<TABLE>
<COL width = "40">
<TR> <TH> Long distance calls
<TR> <TD> 1.30
<TR> <TD> 2.50
<TR> <TD> 10.80
<TR> <TD> 111.01
<TR> <TD> 85.
<TR> <TD> 90
<TR> <TD> .05
<TR> <TD> .06
</ TABLE>
до вирівнювання по десятковій крапці. Для розваги ми використовували псевдо-елемент: before для вставки знака долара перед кожною цифрою. Таблиця може визуализироваться наступним чином:
Long distance calls
$ 1.30
$ 2.50
$ 10.80
$ 111.01
$ 85.
$ 90.
$ .05
$ .06
17.5.5. Динамічні ефекти для рядів і колонок.
Властивість 'visibility' приймає значення 'collapse' для елементів ряду, групи рядів, колонки та групи колонок. Це значення призводить до повного зникнення ряду або колонки з екрану, а простір, займане цим поруч або колонкою, стає доступним для іншого змісту. Стиснення ряду або колонки, однак, не впливає на розкладку таблиці. Це дозволяє здійснювати динамічний ефект приховування табличних рядів або колонок без вимушеної переразметкой таблиці для обліку потенційного зміни в обмеженнях для колонок.