Оформление внешнего вида таблиц в CSS
http://belarusweb.net
Основы создания сайтов

Оформление внешнего вида таблиц

Заголовок таблицы и css-свойство caption-side

После создания таблицы стандартными средствами HTML внешний вид можно изменить при помощи CSS. Так для того, чтобы расположить заголовок сверху или снизу таблицы, нужно всего лишь воспользоваться наследуемым свойством caption-side, которое может принимать соответствующие значения:

  • top – заголовок располагается над таблицей; значение используется браузером по умолчанию;
  • bottom – заголовок располагается под таблицей.

Границы таблицы
css-свойства border-collapse и border-spacing

Также на внешний вид таблицы очень сильно влияет способ отображения границ ячеек таблицы. Дело в том, что по умолчанию каждая ячейка имеет собственную границу (рамку), в результате чего пользователь видит у смежных ячеек не общую границу, а две границы, которые находятся на определенном расстоянии друг от друга (см. пример 2.11). Для того, чтобы изменить такое поведение браузера, нужно воспользоваться наследуемым свойством border-collapse, принимающим следующие значения:

  • separate – каждая ячейка имеет свою отдельную границу (рамку), а в местах соприкосновения смежных ячеек пользователь будет видеть две линии; значение используется браузером по умолчанию;
  • collapse – границы смежных ячеек в местах соприкосновения сливаются в одну.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Таблицы</title>
	<style>
		.table_1{
		caption-side: bottom;
		border-collapse: collapse;
		}
	</style>
</head>
<body>
	<table class="table_1" border="1">
		<caption>Таблица №1</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.11. Форматирование внешнего вида таблицы (пример №1)

Если значение свойства border-collapse установлено, как separate, то возникает необходимость регулирования расстояния между границами смежных ячеек. В этом случае используется наследуемое свойство border-spacing, которое принимает в качестве значения любые единицы измерения длины, используемые в CSS, т.е. px, em и т.д. При чем, если указано только одно значение, то оно определяет расстояние между ячейками как по вертикали, так и по горизонтали, а если указывается два значения, то первое устанавливает расстояние по горизонтали, а второе – по вертикали (см. пример 2.12).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Таблицы</title>
	<style>
		.table_1{
		caption-side: top;
		border-collapse: separate;
		empty-cells: hide;
		border-spacing: 15px 30px;
		}
	</style>
</head>
<body>
	<table class="table_1" border="1">
		<caption>Таблица №1</caption>
		<tr>
			<td></td><td>Ячейка 1.2</td>
		</tr>
		<tr>
		<!-- Неразрывный пробел считается символом -->	
			<td>Ячейка 2.1</td><td>&nbsp;</td>
		</tr>
	</table>
</body>
</html>

Пример 2.12. Форматирование внешнего вида таблицы (пример №2)

Границы и фон ячеек таблицы
css-свойство empty-cells

Также имеется возможность регулировать отображение границ и фона ячеек, у которых отсутствует содержимое, т.е. пустых ячеек, при помощи наследуемого свойства empty-cells. Данное свойство может принимать следующие значения:

  • hide – фон и границы пустых ячеек не отображаются;
  • show – фон и границы пустых ячеек отображаются; значение используется браузером по умолчанию.

Опять же, это возможно только, если значение свойства border-collapse установлено, как separate. Отметим, что ячейка считается браузером пустой, если у нее отсутствуют любые символы, за исключением пробельных, либо значение свойства visibility установлено, как hidden (это свойство мы рассмотрим далее).

Формирование таблицы и
css-свойство table-layout

Имеется в CSS и возможность управления процессом формирования браузером макета таблицы, точнее ширины ячеек. Для этого используется ненаследуемое свойство table-layout (см. пример 2.13). Свойство может принимать следующие значения:

  • auto – браузер будет загружать всю таблицу, затем анализировать ее содержимое для определения размеров ячеек и только потом отображать ее на странице; значение используется браузером по умолчанию;
  • fixed – данное значение правильно срабатывает только, если задана ширина таблицы, позволяя быстрее сформировать ее макет; действует оно следующим образом: если ширина колонки или ячейки не задана, то браузер будет вычислять ширину на основе первой строки таблицы, при чем вычисленная ширина будет уже фиксированной, и если содержимое ячейки не будет помещаться в указанную ширину, то в зависимости от браузера оно будет либо обрезано, либо будет отображаться поверх таблицы (налезать на соседние ячейки или выходить за пределы таблицы); если браузер по каким-то причинам не сможет получить информацию о размерах колонок первой строки таблицы, он просто разделит таблицу на колонки равной ширины.
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Таблицы</title>
	<style>
		.table_1{
		caption-side: top;
		border-collapse: collapse;
		table-layout: fixed;
		width: 100px;
		}
	</style>
</head>
<body>
	<table class="table_1" border="1">
		<caption>Таблица №2</caption>
		<tr>
			<td>Начальная ячейка</td><td>Ячейка 1.2</td>
		</tr>
		<tr>
			<td>Ячейка 2.1aaaaaa</td><td>Ячейка 2.2bbbbb</td>
		</tr>
	</table>
</body>
</html>

Пример 2.13. Форматирование внешнего вида таблицы (пример №3)

В конце хотелось бы опять напомнить, что все перечисленные свойства могут принимать значение inherit, которое указывает браузеру, что для элемента наследуется значение аналогичного свойства родительского элемента.

Различные варианты оформления таблиц можно посмотреть на соответствующей странице нашего учебного сайта №1.