CSS :: Таблицы
Заголовок таблицы и css-свойство caption-side
После создания таблицы стандартными средствами HTML внешний вид можно изменить при помощи CSS. Так для того, чтобы расположить заголовок сверху или снизу таблицы, нужно всего лишь воспользоваться наследуемым свойством caption-side, которое может принимать соответствующие значения:
- top – заголовок располагается над таблицей (значение используется браузером по умолчанию);
- bottom – заголовок располагается под таблицей.
Границы таблицы
css-свойства border-collapse и border-spacing
Также на внешний вид таблицы очень сильно влияет способ отображения границ ячеек таблицы. Дело в том, что по умолчанию каждая ячейка имеет собственную границу (рамку), в результате чего пользователь видит у смежных ячеек не общую границу, а две границы, которые находятся на определенном расстоянии друг от друга (см. пример №1). Для того, чтобы изменить такое поведение браузера, нужно воспользоваться наследуемым свойством border-collapse, принимающим следующие значения:
- collapse – границы смежных ячеек в местах соприкосновения сливаются в одну, тоже самое касается границ ячеек и внешних границ таблицы, если они установлены;
- separate – каждая ячейка имеет свою отдельную границу (рамку); в местах соприкосновения смежных ячеек, а также ячеек и внешних границ таблицы, если они установлены, пользователь будет видеть две линии (значение используется браузером по умолчанию).
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex">
<title>Таблицы</title>
<style>
table{
width: 50%;
margin-top: 3em;
border: 1px solid green;
}
td{
border: 1px solid green;
}
.separate_borders{
border-collapse: separate;
}
.collapse_borders{
border-collapse: collapse;
}
</style>
</head>
<body>
<table class="separate_borders">
<caption>Таблица с раздельными границами</caption>
<tr>
<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
</tr>
<tr>
<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
</tr>
</table>
<table class="collapse_borders">
<caption>Таблица с объединенными границами</caption>
<tr>
<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
</tr>
<tr>
<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
</tr>
</table>
</body>
</html>
Пример №1. Форматирование внешнего вида таблицы
Если значение свойства border-collapse установлено, как separate, то возникает необходимость регулирования расстояния между границами смежных ячеек. В этом случае используется наследуемое свойство border-spacing, которое принимает в качестве значения любые используемые в CSS единицы измерения длины (смотреть). При чем, если указано только одно значение, то оно определяет расстояние между ячейками как по вертикали, так и по горизонтали, а если указывается два значения, то первое устанавливает расстояние по горизонтали, а второе – по вертикали (см. пример №2).
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство border-spacing</title>
<style>
table{
width: 50%;
margin-top: 3em;
border: 1px solid green;
border-collapse: separate;
}
td{
border: 1px solid green;
}
.spacing_1{
border-spacing: 5px;
}
.spacing_2{
border-spacing: 0.8em;
}
</style>
</head>
<body>
<table class="spacing_1">
<caption>Интервал между границами 5px</caption>
<tr>
<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
</tr>
<tr>
<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
</tr>
</table>
<table class="spacing_2">
<caption>Интервал между границами 0.8em</caption>
<tr>
<td>Ячейка 1.1</td><td>Ячейка 1.2</td>
</tr>
<tr>
<td>Ячейка 2.1</td><td>Ячейка 2.2</td>
</tr>
</table>
</body>
</html>
Пример №2. Использование свойства border-spacing
Границы и фон ячеек таблицы
css-свойство empty-cells
Также имеется возможность регулировать отображение границ и фона ячеек, у которых отсутствует содержимое, т.е. пустых ячеек, при помощи наследуемого свойства empty-cells (см. пример №3). Данное свойство может принимать следующие значения:
- hide – фон и границы пустых ячеек не отображаются;
- show – фон и границы пустых ячеек отображаются (значение используется браузером по умолчанию).
Опять же, это возможно только, если значение свойства border-collapse установлено, как separate. Отметим, что ячейка считается браузером пустой, если у нее отсутствуют любые символы, за исключением пробельных, либо значение свойства visibility установлено, как hidden (это свойство мы рассмотрим позже).
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство empty-cells</title>
<style>
table{
width: 45%;
margin-top: 3em;
border: 1px solid green;
}
td{
width: 15%;
border: 1px solid green;
background-color: yellow;
}
/* Для ячеек в нечетных строках */
tr:nth-child(odd) td{
empty-cells: hide;
}
</style>
</head>
<body>
<table>
<tr>
<td>Ячейка 1.1</td> <td></td> <td>Ячейка 1.3</td>
</tr>
<tr>
<td>Ячейка 2.1</td> <td></td> <td>Ячейка 2.3</td>
</tr>
<tr>
<td>Ячейка 3.1</td> <td></td> <td>Ячейка 3.3</td>
</tr>
<tr>
<td>Ячейка 4.1</td> <td></td> <td>Ячейка 4.3</td>
</tr>
</table>
</body>
</html>
Пример №3. Использование свойства empty-cells
Формирование таблицы и
css-свойство table-layout
Имеется в CSS и возможность управления процессом формирования браузером макета таблицы, точнее ширины ячеек. Для этого используется ненаследуемое свойство table-layout (см. пример №4). Свойство может принимать следующие значения:
- auto – браузер будет загружать всю таблицу, затем анализировать ее содержимое для определения размеров ячеек и только потом отображать ее на странице (значение используется браузером по умолчанию);
- fixed – данное значение правильно срабатывает только, если задана ширина таблицы, позволяя быстрее сформировать ее макет; действует оно следующим образом: если ширина колонки или ячейки не задана, то браузер будет вычислять ширину на основе первой строки таблицы, при чем вычисленная ширина будет уже фиксированной, и если содержимое ячейки не будет помещаться в указанную ширину, то в зависимости от браузера оно будет либо обрезано, либо будет отображаться поверх таблицы (налезать на соседние ячейки или выходить за пределы таблицы); если браузер по каким-то причинам не сможет получить информацию о размерах колонок первой строки таблицы, он просто разделит таблицу на колонки равной ширины.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство table-layout</title>
<style>
table{
width: 100px;
margin: 3em;
border: 1px solid green;
caption-side: top;
border-collapse: collapse;
table-layout: fixed;
}
td{
border: 1px solid green;
}
/* Для первой таблицы */
table:first-child{
table-layout: auto;
}
/* Для второй таблицы */
table:last-child{
table-layout: fixed;
}
</style>
</head>
<body>
<table>
<caption>table-layout: auto</caption>
<tr>
<td>Ячейка 1.1aaaaaa</td><td>Ячейка 1.2bbbbb</td>
</tr>
<tr>
<td>Ячейка 2.1aaaaaa</td><td>Ячейка 2.2bbbbb</td>
</tr>
</table>
<table>
<caption>table-layout: fixed</caption>
<tr>
<td>Ячейка 1.1aaaaaa</td><td>Ячейка 1.2bbbbb</td>
</tr>
<tr>
<td>Ячейка 2.1aaaaaa</td><td>Ячейка 2.2bbbbb</td>
</tr>
</table>
</body>
</html>
Пример №4. Форматирование внешнего вида таблицы
В конце хотелось бы опять напомнить, что все перечисленные свойства могут принимать значение inherit, которое указывает браузеру, что для элемента наследуется значение аналогичного свойства родительского элемента.
Различные варианты оформления таблиц можно посмотреть на соответствующей странице нашего учебного сайта №1.
Быстрый переход к другим страницам
- Оформление внешнего вида списков
- Оформление внешнего вида таблиц
- Оформление внешнего вида колонок
- Вернуться к оглавлению учебника