Для структурирования табличных данных лучше всего использовать HTML, несмотря на то что по умолчанию такие таблицы выглядят не слишком привлекательно. К счастью, вид таблицы можно изменить с помощью CSS, что почти не увеличивает объем разметки и позволяет в дальнейшем управлять отображением табличных данных из таблицы стилей.

Рис. 5.6. Неотформатированные табличные данные выглядят не слишком привлекательно

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

body {
	font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.datatable {
	border: 1px solid #D6DDE6;
	border-collapse: collapse;
}
.datatable td {
	border: 1px solid #D6DDE6;
	text-align: right;
	padding: 0.2em;
}
.datatable th {
	border: 1px solid #828282;
	background-color: #BCBCBC;
	font-weight: bold;
	text-align: left;
	padding: 0.2em;
}
.datatable caption {
	font: bold 120% "Times New Roman", Times, serif;
	background-color: #B0C4DE;
	color: #33517A;
	padding: 0.4em 0 0.3em 0;
	border: 1px solid #789AC6;
}

На рис. 5.7 показан результат. Надо сказать, получилось вполне симпатично!

Рис. 5.7. Благодаря CSS таблица выглядит более привлекательно

Обсуждение
В данном случае я поставила перед собой цель максимально приблизить вид таблицы к виду стандартной электронной таблицы Excel. Прежде всего было создано базовое правило для элемента body. Подобные
правила, скорее всего, станут частью большинства каскадных таблиц стилей для сайтов, создаваемых на основе CSS:

body {
	font: 0.8em Verdana, Geneva, Arial, Helvetica, sans-serif;
}

Затем зададим стиль для таблицы в целом:

.datatable {
	border: 1px solid #D6DDE6;
	border-collapse: collapse;
}

Как мы уже видели, свойство border позволяет задать параметры рамки вокруг таблицы, а свойство border-collapse удаляет пустое пространство между ее ячейками.

Затем обратимся к ячейкам таблицы:

.datatable td {
	border: 1px solid #D6DDE6;
	text-align: right;
	padding: 0.2em;
}

Здесь я добавила рамку для ячеек таблицы и выровняла их содержимое по правой стороне с помощью свойства text-align, чтобы она больше походила на электронную таблицу. На данный момент при просмотре документа вы увидите рамку вокруг всех ячеек, кроме тех, что содержат заголовки, как показано на рис. 5.8.

Рис. 5.8. Применение свойства border по отношению к элементам table и td

Затем была добавлена рамка и цвет фона для ячеек с заголовками. Я использовала более темный цвет для рамки, поскольку их фон также темнее фона обычных ячеек, что позволяет выделить заголовки:

.datatable th {
	border: 1px solid #828282;
	background-color: #BCBCBC;
	font-weight: bold;
	text-align: left;
	padding: 0.2em;
}

В завершение зададим стиль для элемента caption, чтобы он выглядел частью таблицы.

.datatable caption {
	font: bold 120% "Times New Roman", Times, serif;
	background-color: #B0C4DE;
	color: #33517A;
	padding: 0.4em 0 0.3em 0;
	border: 1px solid #789AC6;
}