Layout
Это 13-я секция руководства CSS Начало работы; оно описывает более продвинутые селекторы и некоторые специфичные способы, которыми вы можете стилизовать таблицу. Вы создаете новый пример документа, содержащий таблицу и таблицу стилей для неё.
Информация: Таблицы
Таблица распологает информацию в прямоугольной сетке. Некоторые таблицы могут быть сложными, и для сложных таблиц разные браузеры выдают разный результат.
Когда вы проектируете ваш документ, используйте таблицы для выражения отношений между кусочками информации. Поэтому это не важно, если различные браузеры отображают информацию слегка различными способами, потому что значение остается ясным.
Не используйте таблицы необычным способом для создания особенной визуальной разметки. Техники на предыдущей странице руководства (Разметка) предпочтительнее для этой цели.
Структура таблицы
В таблице, каждый кусок информации отображается в ячейке (cell).
Ячейки, лежащие на одной линии, составляют строку (row).
В некоторыех таблицах, строки могут быть сгруппирированы. Специальная группа строк в начале таблицы - заголовок (header), в конце - нижний колонтитул (footer). Главные строки таблицы - тело (body), и они могут быть также сгруппирированы.
Ячейки в линии сверху вниз, составляют столбец (column), но столбцы имеют ограниченное приминение в таблицах CSS.
Таблица Селекторов, основанных на отношении в Селекторы имеет десять ячеек в пяти строках.
Первая строка - заголовок. Остальные четыре строки - тело таблицы. Нижнего колонтитула нет.
У неё два столбца.
Это руководство охватывает только простые таблицы, где результат довольно предсказуемый. В простой таблице, каждая ячейка занимает только одну ячейку в строке и в столбце. Вы можете использовать CSS для сложных таблиц, где ячейки занимают диапазон ячеек более чем одна в строке или столбце, но таблицы, подобно этим находятся вне пределов этого руководства.
Рамки
Ячейки не имеют границ.
У ячеек нет рамок и наполнений. По умолчанию, рамки разделены значениями таблицы, свойство border-spacing. Вы можете также полностью удалить пространство, установив свойство таблицы border-collapse в collapse.
Здесь три таблицы.
У таблицы слева интервал рамки 0.5 em. У таблицы по центру он составляет ноль. Таблица справа имеет сжатые границы:
|
|
|
Заголовок
<caption> элемент - это метка, которая применяется ко всей таблице. По умолчанию, она отображается вверху таблицы.
Чтобы переместить её вниз, установите её свойство caption-side в bottom. Это свойство наследуется, поэтому, в качестве альтернативы вы можете установить это свойство у таблицы или у другого элемента предка.
Чтобы стилизовать заголовок текста, используйте любое из обычных свойств для текста.
У этой таблицы заголовок внизу
#demo-table > caption {
caption-side: bottom;
font-style: italic;
text-align: right;
}
|
Пустые ячейки
Вы можете отобразить пустые ячейки (т.е. их рамки и фон) указывав empty-cells: show; для элемента таблицы.
Вы можете скрыть их, указав empty-cells: hide;. Тогда, если у элемента родителя ячейки есть фон, он будет отображен через пустую ячейку.
Эти таблицы имеют бледно-зелёный фон. Их ячейки имеют бледно-серый фон и тёмно-серые рамки.
В таблице слева пустая таблица отображается. В таблице справа, она скрыта:
|
|
Для подбробной информации о таблицах, смотрите Таблицы в Спецификации CSS.
Информации там больше, чем в этом руководстве, но она не покрывает различия между браузерами, которые могут влиять на сложные таблицы.
Действие: Стилизация таблицы
- Создайте новый HTML документ,
doc3.html. Скопируйте и вставьте содержимое отсюда:<!DOCTYPE html> <html> <head> <title>Документ примера 3</title> <link rel="stylesheet" href="style3.css"> </head> <body> <table id="demo-table"> <caption>Океаны</caption> <thead> <tr> <th></th> <th>Площадь</th> <th>Средняя глубина</th> </tr> <tr> <th></th> <th>млн. км<sup>2</sup></th> <th>м</th> </tr> </thead> <tbody> <tr> <th>Северный Ледовитый</th> <td>13,000</td> <td>1,200</td> </tr> <tr> <th>Атлантический</th> <td>87,000</td> <td>3,900</td> </tr> <tr> <th>Тихий</th> <td>180,000</td> <td>4,000</td> </tr> <tr> <th>Индийский</th> <td>75,000</td> <td>3,900</td> </tr> <tr> <th>Южный</th> <td>20,000</td> <td>4,500</td> </tr> </tbody> <tfoot> <tr> <th>Общая</th> <td>361,000</td> <td></td> </tr> <tr> <th>Средняя</th> <td>72,000</td> <td>3,800</td> </tr> </tfoot> </table> </body> </html> - Создайте новую таблицу стилей,
style3.css. Скопируйте и вставьте содержимое отсюда:/*** Style for doc3.html (Tables) ***/ #demo-table { font: 100% sans-serif; background-color: #efe; border-collapse: collapse; empty-cells: show; border: 1px solid #7a7; } #demo-table > caption { text-align: left; font-weight: bold; font-size: 200%; border-bottom: .2em solid #4ca; margin-bottom: .5em; } /* basic shared rules */ #demo-table th, #demo-table td { text-align: right; padding-right: .5em; } #demo-table th { font-weight: bold; padding-left: .5em; } /* header */ #demo-table > thead > tr:first-child > th { text-align: center; color: blue; } #demo-table > thead > tr + tr > th { font-style: italic; color: gray; } /* fix size of superscript */ #demo-table sup { font-size: 75%; } /* body */ #demo-table td { background-color: #cef; padding:.5em .5em .5em 3em; } #demo-table tbody th:after { content: ":"; } /* footer */ #demo-table tfoot { font-weight: bold; } #demo-table tfoot th { color: blue; } #demo-table tfoot th:after { content: ":"; } #demo-table > tfoot td { background-color: #cee; } #demo-table > tfoot > tr:first-child td { border-top: .2em solid #7a7; } - Откройте документ в вашем браузере. Он должен выглядеть наподобие этого:
Океаны
Площадь Средняя глубина млн. км2 м Северный Ледовитый: 13,000 1,200 Атлантический: 87,000 3,900 Тихий: 180,000 4,000 Индийский: 75,000 3,900 Южный: 20,000 4,500 Общая: 361,000 Средняя: 72,000 3,800 - Сравните правила в таблице стилей с отображенной таблицей, чтобы гарантировать, что вы понимаете действие для каждого правила. Если вы найдете правило, значение которого вы не понимаете, то закомментируйте его и обновите страницу, чтобы посмотреть, что изменилось. Вот несколько заметок об этой таблице:
- Заголовок находится снаружи рамки таблицы.
- Если у вас установлен минимальный размер точки в Опциях, это может повлиять на верхний индекс в km2.
- Три пустые ячейки. Через две из них позволено показывать фон таблицы. У третьей есть фон и верхняя рамка.
- Двоеточия добавлены с помощью таблицы стилей.
Измените таблицу стилей, чтобы она выглядела, как эта:
Океаны |
Посмотреть решение для этой задачи.
Что дальше?
Go to Next Section:
MediaЭто последняя страница в этом руководстве, которая фокусируется на CSS свойствах и значениях. Для полного обзора свойств и значений, смотрите все свойства таблиц в CSS Спецификациях.
Следующая страница тоже рассматривает цель и структуру CSS таблиц.