Работа с таблицами в CSS

Мы с Вами рассмотрели множество методов стилизации таких элементов на странице как текстовая информация, ссылки, изображения, заголовки, но всего этого пока недостаточно. В своих статьях я часто применяю такие элементы HTML как таблицы, потому что они в большинстве случаев помогают систематизировать важную информацию и сделать её подачу более простой.

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

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

Тег	Описание
<table>	Определяет содержимое таблицы.
<caption>	Определяет наименование таблицы.
<th>	Определяет заголовочную ячейку таблицы.
<tr>	Определяет строку таблицы.
<td>	Определяет ячейку данных таблицы.
<thead>	Используется для содержания заголовка группы в таблице (шапка таблицы).
<tbody>	Используется для содержания "тела" таблицы.
<tfoot>	Используется для содержания "подвала" таблицы (футер).
<col>	Определяет заданные свойства столбцов для каждого столбца в пределах тега <colgroup>.
<colgroup>	Определяет группу столбцов в таблице.

Работа с отступами в таблице

В статье «Блочная и строчная модель в CSS» мы научились применять внутренние и внешние отступы к текстовой информации, добавляя промежуток вокруг содержимого элементов. При работе с таблицами надо понимать, что добавить внутренний отступ (padding) вы сможете либо к её заголовку, либо к ее ячейкам, напрямую к тегу <table> добавить вы сможете только внешний отступ (margin):

<!DOCTYPE html>
<html>
<head>
	<title>Использование внутренних отступов в таблице</title>
<style> 
table {
margin: 0 auto; /* центруем по горизонитали внешними отступами */
}
td, th {
border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
padding: 19px; /* устанавливаем внутренние отступы для всех сторон */
}
caption {
padding-bottom: 19px;	/* устанавливаем внутренние отступы снизу для всех сторон */
}
</style>
</head>
	<body>
		<table>
		<caption>Отступы в таблице</caption>
			<tr>
				<th>1</th><th>2</th><th>3</th><th>4</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>4</td><td></td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В данном примере мы:

Разместили таблицу по центру, используя прием центровки по горизонитали внешними отступами (margin: 0 auto).
Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1 пиксель шестнадцатеричным цветом #F50 и установили внутренние отступы размером 19 пикселей для всех сторон.
Для наименования таблицы (тег <caption>) мы установили внутренний отступ снизу равный 19 пикселей. Надеюсь, Вас не смущают неровные числа :)

Результат нашего примера:

Рис. 144 Пример использования внутренних отступов в таблице.

Промежуток между ячейками

После рассмотренного выше примера, вы могли заметить, что у нас остался промежуток между всеми ячейками таблицы. Давайте рассмотрим, как убрать промежуток между ячейками таблицы, либо его увеличить.

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

<!DOCTYPE html>
<html>
<head>
	<title>Изменение промежутка между таблицами</title>
<style> 
table {
vertical-align: top; /* верх элемента выравнивается по верху самого высокого элемента */
float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */
margin-right: 30px; /* устанавливаем внешние отступы справа */
}
td, th {
border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
padding: 19px; /* устанавливаем внутренние отступы для всех сторон */
}
caption {
font-weight: bold; /* жирное начертание */
}
.first {
border-spacing: 30px 10px; /* промежуток между ячейками таблицы (первое значение - горизонтальный, второе вертикальный)*/	
}
.second {
border-spacing: 0; /* промежуток между ячейками таблицы отсутствует */
}
.third {
border-spacing: 0.2em; /* промежуток между ячейками таблицы (горизонтальный и вертикальный) */	
}
</style>
</head>
	<body>
		<table class = "first">
			<caption>border-spacing: 30px 10px;</caption>
			<tr>
				<th>1</th><th>2</th><th>3</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td>
			</tr>
		</table>
		<table class = "second">
			<caption>border-spacing: 0;</caption>
			<tr>
				<th>1</th><th>2</th><th>3</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td>
			</tr>
		</table>
		<table class = "third">
			<caption>border-spacing:0.2em;</caption>
			<tr>
				<th>1</th><th>2</th><th>3</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В данном примере мы:

Сделали наши таблицы плавающими и сместили по левому краю (float: left). Если вы пропустили тему плавающих элементов, то вы всегда можете к ней вернуться в этом учебнике - «Плавающие элементы в CSS».
Кроме того установили для таблиц внешний отступ справа равный 30px и установили вертикальное выравнивание таблиц (верх элемента выравнивается по верху самого высокого элемента). Мы еще вернемся к подробному рассмотрению этого свойства в этой статье.
Установили для наименования таблицы (тег <caption>) – жирное начертание.
Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1 пиксель шестнадцатеричным цветом #F50 и установили внутренние отступы размером 19 пикселей для всех сторон.
Для первой таблицы с классом .first мы установили промежуток между ячейками таблицы (свойство border-spacing) равный 30px 10px, для второй таблицы с классом .second равный нулю, для третей таблицы с классом .third равный 0.2em.

Обращаю Ваше внимание, что если в свойстве border-spacing указано только одно значение длины, то оно указывает интервалы, как по горизонтали, так и вертикали, а если указаны два значения длины, то первое определяет горизонтальное расстояние, а второе вертикальное. Расстояние между границами соседних ячеек допускается указывать в единицах измерения CSS (px, cm, em и др). Отрицательные значения не допускаются.

Результат нашего примера:

Рис. 145 Пример изменения промежутка между таблицами.

Отображение границ вокруг ячеек таблицы

Вы можете сказать: - так, мы убрали промежуток между ячейками, используя свойство border-spacing со значением 0, но почему у нас теперь границы у ячеек то пересекаются?

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

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

Рассмотрим сравнение поведения границ при использовании свойства border-spacing со значением 0 и свойства border-collapse со значением collapse:

<!DOCTYPE html>
<html>
<head>
<title>Пример отображения границ вокруг ячеек таблицы</title>
<style> 
table {
float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */
margin-right: 30px; /* устанавливаем внешние отступы справа */
}
td, th {
border: 5px solid #F50; /* задаем сплошную границу размером 5 пикселей цвета #F50 */
width: 50px; /* ширина ячеек */
height: 75px; /* высота ячеек */
}
caption {
font-weight: bold; /* жирное начертание */
}
.first {
border-spacing: 0; /* промежуток между ячейками таблицы отсутствует */
}
.second {
border-collapse: collapse; /* объединяем границы ячеек в одну */	  
}
</style>
</head>
	<body>
		<table class = "first">
			<caption>border-spacing: 0;</caption>
			<tr>
				<th>1</th><th>2</th><th>3</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td>
			</tr>
		</table>
		<table class = "second">
			<caption>border-collapse: collapse;</caption>
			<tr>
				<th>1</th><th>2</th><th>3</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В данном примере мы:

Сделали наши таблицы плавающими и сместили по левому краю (float: left), установили для них внешний отступ справа равный 30px.
Установили для наименования таблицы (тег <caption>) – жирное начертание.
Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 5 пикселей шестнадцатеричным цветом #F50 и установили фиксированную ширину 50px и высоту 75 пикселей.
Для первой таблицы с классом .first мы установили промежуток между ячейками таблицы равный нулю (border-spacing: 0;), а для второй таблицы с классом .second установили свойство border-collapse со значением collapse, которое объединяет границы ячеек в одну, когда это возможно.

Результат нашего примера:

Рис. 146 Пример отображения границ вокруг ячеек таблицы.

Свойство border-collapse имеет всего два значения для отображения границ вокруг ячеек таблицы:

Значение	Описание
separate	Отдельно стоящие границы (свойства border-spacing и empty-cells не будут игнорироваться). Это значение по умолчанию.
collapse	Границы объединяются в одну, когда это возможно (свойства border-spacing и empty-cells игнорируются).

Обратите внимание, что когда мы используем свойство border-collapse со значением collapse такие свойства как border-spacing и empty-cells игнорируются (не употребляйте их одновременно)! Стоп, а что за empty-cells?

Поведение пустых ячеек

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

Давайте перейдем к примеру:

<!DOCTYPE html>
<html>
<head>
	<title>Пример отображения пустых ячеек таблицы</title>
<style> 
table {
float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */
margin-right: 30px; /* устанавливаем внешние отступы справа */
}
td, th {
border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */
width: 75px; /* ширина ячеек */
height: 50px; /* высота ячеек */
background: wheat; /* задаем цвет заднего фона ячеек */
}
caption {
font-weight: bold; /* жирное начертание */
}
.first {
empty-cells: show; /* показывать пустые ячейки (по умолчанию) */	
}
.second {
empty-cells: hide; /* скрывать пустые ячейки */	
}
</style>
</head>
	<body>
		<table class = "first">
			<caption>empty-cells: show;</caption>
			<tr>
				<th>1</th><th>2</th><th>3</th>
			</tr>
			<tr>
				<td>2</td><td></td><td>☺</td>
			</tr>
			<tr>
				<td>3</td><td>☺</td><td></td>
			</tr>
		</table>
		<table class = "second">
			<caption>empty-cells: hide;</caption>
			<tr>
				<th>1</th><th>2</th><th>3</th>
			</tr>
			<tr>
				<td>2</td><td></td><td>☺</td>
			</tr>
			<tr>
				<td>3</td><td>☺</td><td></td>
			</tr>
		</table>
	</body>
</html>

Понять, как действует свойство empty-cells из этого примера очень просто, если для него установлено значение hide, то пустые ячейки и фон в них будут скрыты, если установлено значение show (по умолчанию), то они будут отображаться.

Рис. 147 Пример отображения пустых ячеек таблицы.

Расположение заголовка таблицы

Давайте рассмотрим еще одно простое свойство для стилизации таблиц - caption-side, которое устанавливает расположение заголовка таблицы (над или под таблицей). По умолчанию свойство caption-side имеет значение top, которое помещает заголовок над таблицей. Для того, чтобы поместить заголовок под таблицу необходим использовать свойство со значение bottom.

Давайте рассмотрим пример использования этого свойства:

<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства caption-side</title>
<style> 
td, th {
border: 1px solid blue; /* задаем сплошную границу размером 1 пиксель синего цвета */
}
.topCaption {
caption-side: top; /* заголовок таблицы находится над ней */
}
.bottomCaption {
caption-side: bottom; /* заголовок таблицы находится под ней */
}
</style>
</head>
	<body>
		<table class = "topCaption">
			<caption>Заголовок над таблицей</caption>
			<tr>
				<th>Наименование</th><th>Цена</th>
			</tr>
			<tr>
				<td>Рыба</td><td>350 рублей</td>
			</tr>
			<tr>
				<td>Мясо</td><td>250 рублей</td>
			</tr>
		</table> 
		<br>
		<table class = "bottomCaption">
			<caption>Заголовок под таблицей</caption>
			<tr>
				<th>Наименование</th><th>Цена</th>
			</tr>
			<tr>
				<td>Рыба</td><td>350 рублей</td>
			</tr>
			<tr>
				<td>Мясо</td><td>250 рублей</td>
			</tr>
		</table> 
	</body>
</html>

В данном примере мы создали два класса, которые управляют расположением заголовка таблицы. Первый класс (.topCaption) помещает заголовок таблицы над ней, мы применили его к первой таблице, а второй класс (.bottomCaption) помещает заголовок таблицы под ней, мы применили его ко второй таблице. Класс .topCaption имеет значение свойства caption-side по умолчанию и создан для демонстрации.

Результат нашего примера:

Рис. 148 Пример использования свойства caption-side.

Горизонтальное и вертикальное выравнивание

В большинстве случаев при работе с таблицами вам придется настраивать выравнивание содержимого внутри заголовочных ячеек и ячеек данных. Свойство text-align применяется для горизонтального выравнивания по аналогии с любой текстовой информацией. Применение этого свойства для текста мы рассматривали ранее в статье «Форматирование текста в CSS».

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример горизонтального выравнивания в таблице</title>
<style> 
table {
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
}
.left {
text-align: left; /* выравнивает текст ячейки влево */
}
.right {
text-align: right; /* выравнивает текст ячейки вправо */
}
.center {
text-align: center; /* выравнивает текст ячейки по центру */
}
.justify {
text-align: justify; /* выравнивает текст ячейки по ширине */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>Значение</th><th>Описание</th>
			</tr>
			<tr class = "left">
				<td>left</td><td>Выравнивает текст ячейки влево. Это значение по умолчанию (если направление текста слева направо).</td>
			</tr>
			<tr class = "right">
				<td>right</td><td>Выравнивает текст ячейки вправо. Это значение по умолчанию (если направление текста справа налево).</td>
			</tr>
			<tr class = "center">
				<td>center</td><td>Выравнивает текст ячейки по центру.</td>
			</tr>
			<tr class = "justify">
				<td>justify</td><td>Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст ячейки по ширине).</td>
			</tr>
		</table>
	</body>
</html>

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

Результат нашего примера:

Рис. 149 Пример горизонтального выравнивания в таблице.

Кроме горизонтального выравнивания вы также можете определить и вертикальное выравнивание в ячейках таблицы с помощью свойства vertical-align.

Обращаю Ваше внимание, что при работе с ячейками таблицы применяются только следующие значения^* этого свойства:

Значение	Описание
baseline	Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.
top	Выравнивает содержимое ячейки вертикально по верхнему краю.
middle	Выравнивает содержимое ячейки вертикально по середине.
bottom	Выравнивает содержимое ячейки вертикально по нижнему краю.

^* - Значения sub, super, text-top, text-bottom, length и %, примененные к ячейке таблицы будут вести себя как при использовании значения baseline.

Рассмотрим пример использования:

<!DOCTYPE html>
<html>
<head>
	<title>Пример вертикального выравнивания в таблице</title>
<style> 
table {
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
height: 55px; /* задаем высоту ячеек */
}
.baseline {
vertical-align: baseline; /* выравнивает базовую линию ячейки по базовой линии родителя */
}
.top {
vertical-align: top; /* выравнивает содержимое ячейки вертикально по верхнему краю */
}
.middle {
vertical-align: middle; /* выравнивает содержимое ячейки вертикально по середине */
}
.bottom {
vertical-align: bottom; /* выравнивает содержимое ячейки вертикально по нижнему краю */
}
</style>
</head>
	<body>
		<table> 
			<tr>
				<th>Значение</th><th>Описание</th>
			</tr>
			<tr class = "baseline"> 
				<td>baseline</td><td>Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.</td>
			</tr>
			<tr class = "top"> 
				<td>top</td><td>Выравнивает содержимое ячейки вертикально по верхнему краю.</td>
			</tr>
			<tr class = "middle"> 
				<td>middle</td><td>Выравнивает содержимое ячейки вертикально по середине.</td>
			</tr>
			<tr class = "bottom"> 
				<td>bottom</td><td>Выравнивает содержимое ячейки вертикально по нижнему краю.</td>
			</tr>
		</table> 
	</body>
</html>

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

Рис. 150 Пример вертикального выравнивания в таблице.

Алгоритм размещения макета таблицы браузером

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

Чтобы изменить тип размещения макета таблицы браузером с автоматического на фиксированный, необходимо использовать CSS свойство table-layout со значением fixed.

В этом случае горизонтальное размещение зависит только от ширины таблицы и ширины столбцов, а не от содержимого ячеек. Браузер начинает отображать таблицу сразу после того, как получена первая строка. Как следствие, фиксированный алгоритм, позволяет создавать макет такой таблицы быстрее, чем используя автоматический вариант. При работе с большими таблицами в целях увеличения производительности вы можете использовать фиксированный алгоритм.

Давайте рассмотрим применение этого свойства на следующем примере:

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства table-layout</title>
<style> 
table {
width: 50%; /* задаем ширину таблицы */
word-wrap: break-word; /* слово может быть прервано в произвольном месте */
}
td, th {
border: 1px solid Chocolate; /* задаем сплошную границу размером 1 пиксель цвета шоколад */
}
.test {
table-layout: auto; /* автоматический алгоритм размещения макета таблицы браузером (по умолчанию) */
}
.test2 {
table-layout: fixed; /* фиксированный алгоритм размещения макета таблицы браузером */
}
</style>
</head>
	<body>
		<table class = "test">
			<caption>table-layout: auto;</caption>
			<tr>
				<th>Наименование</th><th>2009</th><th>2010</th><th>2011</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th>
			</tr>
			<tr>
				<td>Пшеница</td><td>125</td><td>215</td><td>2540</td><td>33287</td><td>695878</td><td>1222222</td><td>125840000</td><td>125</td>
			</tr>
		</table>
		<table class = "test2">
			<caption>table-layout: fixed;</caption>
			<tr>
				<th>Наименование</th><th>2009</th><th>2010</th><th>2011</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th>
			</tr>
			<tr>
				<td>Пшеница</td><td>125</td><td>215</td><td>2540</td><td>33287</td><td>695878</td><td>1222222</td><td>125840000</td><td>125</td>
			</tr>
		</table>
	</body>
</html>

В данном примере мы:

К одной и той же таблице применили различные алгоритмы размещения макета таблицы браузером. Для первой таблицы мы использовали автоматический алгоритм (auto). Обратите внимание, что при этом размер таблицы стал больше заданного значения в 50% от родительского элемента (произошло переполнение).
Кроме того мы использовали для таблиц новое для вас свойство word-wrap, которое указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов). Значение break-word указывает, что слово может быть прервано в произвольном месте, если нет допустимой точки для разрыва.
Для второй таблицы был использован фиксированный алгоритм (fixed) размещения макета таблицы браузером. Как вы можете заметить размер таблицы соответствует заданным нами значениям ширины в процентах, а числа прерваны в произвольных местах, чтобы не произошло переполнение. Если бы мы не использовали свойство word-wrap, то ширина второй таблицы бы не изменилась, но числа переполнили бы ячейки (вышли из ячеек).

Рис. 151 Пример использования свойства table-layout.

Стилизация строк и столбцов таблицы

Мы с Вами частично уже затрагивали методы стилизации строк и столбцов таблицы в статье «Селекторы. Часть 3.». В этой статье мы рассматривали применение группового псевдокласса :nth-child css3 , который позволяет чередовать стили строк в таблицах с использованием значений even (четный) и odd (нечетный), либо по элементарной математической формуле.

Давайте повторим ранее рассмотренные методы и познакомимся с новыми способами стилизации строк и столбцов в таблицах. Перейдем к примерам.

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования псевдокласса :nth-child с таблицами</title>
<style> 
table {
width: 100%; /* задаем ширину таблицы */
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
}
tr:nth-child(even) { /* выбираем все четные строки */
border: 3px solid red; /* задаем сплошную границу размером 3 пикселя красного цвета */
}
td:nth-child(4n+2) { /* выбираем каждый четвертый элемент, начиная со второго */
background: #E8E8FF; /* задаем цвет заднего фона */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th>
				<th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th>
			</tr>
			<tr>
				<td>2</td><td></td><td></td><td></td><td></td><td></td><td></td>
				<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>3</td><td></td><td></td><td></td><td></td><td></td><td></td>
				<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
			<tr>
				<td>4</td><td></td><td></td><td></td><td></td><td></td><td></td>
				<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
			</tr>
		</table>
	</body>
</html>

В данном примере мы:

Указали, что наша таблица занимает 100% от родительского элемента, промежутки между ячеек отсутствуют.
С использованием псевдокласса :nth-child задали, что все четные строки имеют сплошную границу 3 пикселя красного цвета.
С использованием псевдокласса :nth-child задали, что каждая четвёртая ячейка данных таблицы (тег <td>) внутри строки, начиная со второй ячейки таблицы, будет выделена цветом (4n – каждый четвертый элемент выделяется, 2 – с какого элемента начинать).

Результат нашего примера:

Рис. 152 Пример использования псевдокласса :nth-child с таблицами.

Перейдем к следующему примеру, в котором рассмотрим варианты стилизации строк таблицы.

<!DOCTYPE html>
<html>
<head>
	<title>Пример стилизации строк в таблицах</title>
<style> 
table {
width: 100%; /* задаем ширину таблицы */
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
}
tfoot {
background-color: coral; /* задаем цвет заднего фона */
}
thead {
background-color: silver; /* задаем цвет заднего фона */
}
tbody tr:hover { /* стилизуем элемент, на который в данный момент указывает курсор мыши */
background-color: khaki; /* задаем цвет заднего фона */
}
</style>
</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>Услуга</th><th>Стоимость</th>
				</tr>
			</thead>
			<tfoot> <!-- Тег <tfoot> применяется для создания "подвала" таблицы. Его принято писать после закрывающего тега </thead>, но отображается он в самом низу таблицы. -->
				<tr>
					<td>Сумма</td><td>15 000</td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td>1</td><td>1 000</td>
				</tr>
				<tr>
					<td>2</td><td>2 000</td>
				</tr>
				<tr>
					<td>3</td><td>3 000</td>
				</tr>
				<tr>
					<td>4</td><td>4 000</td>
				</tr>
				<tr>
					<td>5</td><td>5 000</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

В этом примере мы:

Установили ширину таблицы в 100% от ширины родительского элемента, для заголовочных и ячеек данных установили сплошную границу шириной 1px .
Установили для элемента <tfoot> («подвал» таблицы) цвет заднего фона – coral, для элемента <thead> («шапка» таблицы) установили цвет заднего фона silver.
Для элементов <tr>, которые находятся внутри элемента <tbody> (тело таблицы) установили изменение цвета заднего фона при наведении (псевдокласс :hover) c белого на цвет khaki (подсвечивается вся строка).

Результат нашего примера:

Рис. 153 Пример стилизации строк в таблицах. — Рис. 153 Пример стилизации строк в таблицах

Следующий пример рассматривает применение скругления углов к ячейкам таблицы (свойство border-radius css3 ).

<!DOCTYPE html>
<html>
<head>
	<title>Пример скругления углов ячейки</title>
<style> 
table {
margin: 0 auto; /* центруем по горизонитали внешними отступами */
}
th {
width: 50px; /* задаем ширину ячейки */
height: 50px; /* задаем высоту ячейки */
border: 5px solid transparent; /* устанавливаем сплошную прозрачную границу размером 5 пикселей */
}
th:hover { /* стилизуем элемент, на который в данный момент указывает курсор мыши */
background: blue; /* задаем цвет заднего фона */
color: orange; /* устанавливаем цвет текста */
border-radius: 100%; /* задаем радиус скругления */
border: 5px solid orange; /* устанавливаем сплошную границу размером 5 пикселей оранжевого цвета */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
			</tr>
		</table>
	</body>
</html>

В этом примере мы:

Отцентровали таблицу внешними отступами, задали для заголовочных ячеек ширину и высоту 50px, указали прозрачную границу 5 пикселей.
Установили, что при наведении (псевдокласс :hover) на заголовочную ячейку она получает задний фон синего цвета, оранжевый цвет текста, границу оранжевого цвета 5 пикселей и радиус скругления 100%.
Прозрачная граница необходима для того, чтобы зарезервировать место под границу, которая будет отображена при наведении, если этого не сделать таблица будет «прыгать».

Результат нашего примера:

Рис. 154 Пример скругления углов ячейки.

Следующий пример затрагивает использование HTML элементов <colgroup> и <col> и их стилизации.

<!DOCTYPE html>
<html>
<head>
	<title>Пример подсветки колонок таблицы</title>
<style> 
table {
width: 100%; /* задаем ширину таблицы */
border-collapse: collapse; /* объединяем границы ячеек в одну */	
}
td, th {
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
width: 25%; /* задаем ширину ячеек */
}
col:first-child {
background: rgba(0,0,0,.3); /* задаем цвет заднего фона */
}
col:nth-of-type(2) {
background: rgba(0,0,0,.2); /* задаем цвет заднего фона */
}
col:last-child {
background: rgba(0,0,0,.1); /* задаем цвет заднего фона */
}
</style>
</head>
	<body>
		<table>
			<colgroup> 
				<col>
				<col>
				<col span = "2"> <!-- объединяем два столбца в одну колонну (атрибут span="2") -->
			</colgroup>
			<tr>
				<th>№ заявки</th><th>Услуга</th><th>Цена, руб.</th><th>Итого</th>
			</tr>
			<tr>
				<td>1</td><td>Пение</td><td>6 000</td><td>6 000</td>
			</tr>
			<tr>
				<td>2</td><td>Мытье</td><td>2 000</td><td>2 000</td>
			</tr>
			<tr>
				<td>3</td><td>Уборка</td><td>1 000</td><td>1 000</td>
			</tr>
			<tr>
				<td>4</td><td>Нытьё</td><td>1 500</td><td>1 500</td>
			</tr>
			<tr>
				<td>5</td><td>Чтение</td><td>3 000</td><td>3 000</td>
			</tr>
		</table>
	</body>
</html>

В этом примере мы:

Устанавливаем, что наша таблица занимает 100% от родительского элемента, ячейки таблицы занимают 25% от родительского элемента и имеют сплошную границу 1 пиксель зеленого цвета. Промежуток между ячейками мы убрали, используя свойство border-collapse со значением collapse.
К сожалению, единственное, что пока можно сделать с элементом <col>, используя css, это задать цвет заднего фона и определить через HTML, сколько он занимает колонок таблицы. В этом примере мы создали группу из трех колонок, третья из них при этом занимает 2 столбца (атрибут span элемента <col> со значением "2").
Используем псевдокласс :first-child, который выбирает первый дочерний элемент <col> своего родителя (<colgroup>) и задаем ему задний фон.
Используем псевдокласс :nth-of-type(2) в котором указан элемент, который является заданным дочерним элементом своего родительского элемента (второй элемент <col>) и задаем ему задний фон.
По аналогии с псевдоклассом :first-child, который выбирает первый дочерний элемент, используем псевдокласс :last-child и выбираем последний дочерний элемент <col> своего родителя (<colgroup>), благодаря которому мы стилизуем третью и четвертую колонку.

Результат нашего примера:

Рис. 155 Пример подсветки колонок таблицы.

Ну и заключительный пример, который довольно сложен для понимания и требует продвинутых знаний в CSS, так как затрагивает будущие темы, планируемые к подробному изучению в рамках этого курса.

В предыдущем примере мы поняли, что к HTML элементу <col> можно применить только одно CSS свойство – цвет заднего фона (background-color), но при этом задать цвет заднего фона при наведении (псевдокласс :hover) на этот элемент напрямую нельзя. В этом примере мы рассмотрим, как подсветить столбец таблицы, используя только CSS.

<!DOCTYPE html>
<html>
<head>
	<title>Пример подсветки колонок и строк таблицы при наведении</title>
<style> 
table {
width: 100%; /* задаем ширину таблицы */
border-collapse: collapse; /* объединяем границы ячеек в одну */	
position: relative; /* элемент с относительным позиционированием */
}
td, th {
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
width: 25%; /* задаем ширину ячеек */
height: 45px; /* задаем высоту ячеек */
}
tr:hover:not(:first-child) { /* стилизуем элемент, на который в данный момент указывает курсор мыши (но не строка с заголовочными ячейками) */
background: lime; /* задаем цвет заднего фона */
}
td:hover:after { /* стилизуем элемент, на который в данный момент указывает курсор мыши и добавляем содержимое после каждого такого элемента */
content: ''; /* добавляем наше содержимое */
display: block; /* отображает элемент как блочный элемент */
position: absolute; /* элемент с абсолютным позиционированием */
width: 25%; /* задаем ширину блока, который будет появляться */
top: 0; /* определяем смещение позиционированного элемента относительно верхнего края */
bottom: 0; /* определяем смещение позиционированного элемента относительно нижнего края */
background: forestgreen; /* задаем цвет заднего фона */
z-index: -1; /* определяем порядок наложения элемента по оси z */
}
</style>
</head>
	<body>
		<table>
			<tr>
				<th>№ заявки</th><th>Услуга</th><th>Цена, руб.</th><th>Итого</th>
			</tr>
			<tr>
				<td>1</td><td>Пение</td><td>6 000</td><td>6 000</td>
			</tr>
			<tr>
				<td>2</td><td>Мытье</td><td>2 000</td><td>2 000</td>
			</tr>
			<tr>
				<td>3</td><td>Уборка</td><td>1 000</td><td>1 000</td>
			</tr>
			<tr>
				<td>4</td><td>Нытьё</td><td>1 500</td><td>1 500</td>
			</tr>
			<tr>
				<td>5</td><td>Чтение</td><td>3 000</td><td>3 000</td>
			</tr>
		</table>
	</body>
</html>

В этом примере мы:

Устанавливаем, что наша таблица занимает 100% от родительского элемента, ячейки таблицы занимают 25% от родительского элемента и имеют сплошную границу 1 пиксель зеленого цвета, высота заголовочных и ячеек данных составляет 45px. Промежуток между ячейками мы убрали, используя свойство border-collapse со значением collapse.
Для элемента <tr> установили при наведении (псевдокласс :hover) изменение цвета заднего фона c белого на lime (подсвечивается вся строка). Но мы, добавили псевдокласс отрицания :not(:first-child), который сообщает браузеру: - ты строки то подсвечивай, но только не первую дочернюю своего родителя (первая строка таблицы, состоящая из заголовочных элементов <th>).
Кроме того мы установили свойство position для таблицы, которое определяет, что она у нас является элементом с относительным позиционированием (relative). Это означает, что при смещении элемент сдвигается относительно его текущей позиции. Это нам необходимо, чтобы мы могли позиционировать блок, который будет появляться при наведении на любой элемент <td>.
И так, используя псевдоэлемент ::after добавляем содержимое после каждого элемента <td> при наведении. Псевдоэлемент ::after обязательно используется вместе со свойством content, благодаря которому мы вставляем блочный элемент, который имеет задний фон цвета forestgreen и имеет абсолютное позиционирование.
Абсолютное позиционирование здесь необходимо для смещения элемента относительно заданного края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию - static, иначе отсчёт будет вестись относительно, указанного края окна браузера, по этой причине мы установили для таблицы относительное позиционирование (relative).
Установили для нашего сгенерированного блока свойство top, которое указывает направление смещения позиционированного элемента от верхнего края и свойство bottom, которое указывает направление смещения позиционированного элемента от нижнего края. Для обоих свойств указали значение 0, таким образом, блок будет полностью занимать элемент от низа и верха таблицы, ширину этого блока задали 25% это значение соответствует значению ширины самой ячейки.
И заключительное свойство, которое мы установили для этого блока: z-index со значением "-1" оно определяет порядок расположения позиционированных элементов по оси Z. Это свойство необходимо, чтобы текст находился впереди этого блока, а не за ним, если не задать значение меньше нуля, то блок будет закрывать текст.

Результат нашего примера:

Рис. 156 Пример подсветки колонок и строк таблицы при наведении.

Если Вам на этом этапе изучения не понятен процесс позиционирование элементов, то не расстраивайтесь это сложная для понимания тема, которую мы к тому же не рассматривали, но обязательно рассмотрим в следующей статье учебника "Позиционирование элементов в CSS".

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

Используя полученные знания составьте следующую таблицу:

Практическое задание № 31.

Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.

CSS функции: радиальные градиенты

Позиционирование элементов