Работа с таблицами в 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>

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

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

Рис. 144 Пример использования внутренних отступов в таблице.
Рис. 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>

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


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


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

Рис. 145 Пример изменения промежутка между таблицами.
Рис. 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>

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

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

Рис. 146 Пример отображения границ вокруг ячеек таблицы.
Рис. 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 Пример отображения пустых ячеек таблицы.
Рис. 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.
Рис. 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 Пример горизонтального выравнивания в таблице.
Рис. 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 Пример вертикального выравнивания в таблице.
Рис. 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>

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


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

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

Мы с Вами частично уже затрагивали методы стилизации строк и столбцов таблицы в статье «Селекторы. Часть 3.». В этой статье мы рассматривали применение группового псевдокласса :nth-childcss3, который позволяет чередовать стили строк в таблицах с использованием значений 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>

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

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

Рис. 152 Пример использования псевдокласса :nth-child с таблицами.
Рис. 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>

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

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

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

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

<!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>

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

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

Рис. 154 Пример скругления углов ячейки.
Рис. 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>

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

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

Рис. 155 Пример подсветки колонок таблицы.
Рис. 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>

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

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

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

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



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

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

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

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

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

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