{{CSSTutorialTOC}}{{previousPage("/ru/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout")}}
Это 13-я секция руководства CSS Начало работы; оно описывает более продвинутые селекторы и некоторые специфичные способы, которыми вы можете стилизовать таблицу. Вы создаёте новый пример документа, содержащий таблицу и таблицу стилей для неё.
Таблица располагает информацию в прямоугольной сетке. Некоторые таблицы могут быть сложными, и для сложных таблиц разные браузеры выдают разный результат.
Когда вы проектируете ваш документ, используйте таблицы для выражения отношений между кусочками информации. Поэтому это не важно, если различные браузеры отображают информацию слегка различными способами, потому что значение остаётся ясным.
Не используйте таблицы необычным способом для создания особенной визуальной разметки. Техники на предыдущей странице руководства (Разметка) предпочтительнее для этой цели.
В таблице, каждый кусок информации отображается в ячейке (cell).
Ячейки, лежащие на одной линии, составляют строку (row).
В некоторых таблицах, строки могут быть сгруппированы. Специальная группа строк в начале таблицы - заголовок (header), в конце - нижний колонтитул (footer). Главные строки таблицы - тело (body), и они могут быть также сгруппированы.
Ячейки в линии сверху вниз, составляют столбец (column), но столбцы имеют ограниченное применение в таблицах CSS.
Таблица Селекторов, основанных на отношении в Селекторы имеет десять ячеек в пяти строках.
Первая строка - заголовок. Остальные четыре строки - тело таблицы. Нижнего колонтитула нет.
У неё два столбца.
Это руководство охватывает только простые таблицы, где результат довольно предсказуемый. В простой таблице, каждая ячейка занимает только одну ячейку в строке и в столбце. Вы можете использовать CSS для сложных таблиц, где ячейки занимают диапазон ячеек более чем одна в строке или столбце, но таблицы, подобно этим находятся вне пределов этого руководства.
Ячейки не имеют границ.
У ячеек нет рамок и наполнений. По умолчанию, рамки разделены значениями таблицы, свойство {{cssxref("border-spacing")}}. Вы можете также полностью удалить пространство, установив свойство таблицы {{cssxref("border-collapse")}} в collapse.
Здесь три таблицы.
У таблицы слева интервал рамки 0.5 em. У таблицы по центру он составляет ноль. Таблица справа имеет сжатые границы:
|
|
|
{{HTMLElement("caption")}} элемент - это метка, которая применяется ко всей таблице. По умолчанию, она отображается вверху таблицы.
Чтобы переместить её вниз, установите её свойство {{cssxref("caption-side")}} в bottom. Это свойство наследуется, поэтому, в качестве альтернативы вы можете установить это свойство у таблицы или у другого элемента предка.
Чтобы стилизовать заголовок текста, используйте любое из обычных свойств для текста.
У этой таблицы заголовок внизу
#demo-table > caption {
caption-side: bottom;
font-style: italic;
text-align: right;
}
|
Вы можете отобразить пустые ячейки (т.е. их рамки и фон) указывав {{cssxref("empty-cells")}}: show; для элемента таблицы.
Вы можете скрыть их, указав empty-cells: hide;. Тогда, если у элемента родителя ячейки есть фон, он будет отображён через пустую ячейку.
Эти таблицы имеют бледно-зелёный фон. Их ячейки имеют бледно-серый фон и тёмно-серые рамки.
В таблице слева пустая таблица отображается. В таблице справа, она скрыта:
|
|
Для подробной информации о таблицах, смотрите Таблицы в Спецификации CSS.
Информации там больше, чем в этом руководстве, но она не покрывает различия между браузерами, которые могут влиять на сложные таблицы.
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;
}
|
Океаны
|
Измените таблицу стилей, чтобы она выглядела, как эта:
Океаны |
Посмотреть решение для этой задачи.
{{nextPage("/ru/docs/Web/Guide/CSS/Getting_Started/Media", "Media")}}Это последняя страница в этом руководстве, которая фокусируется на CSS свойствах и значениях. Для полного обзора свойств и значений, смотрите все свойства таблиц в CSS Спецификациях.
Следующая страница тоже рассматривает цель и структуру CSS таблиц.