Здравствуйте! От стилизации списков плавно переходим к заданиям стилей для таблиц. В этом уроке мы рассмотрим стили для таблиц.
CSS предоставляет ряд свойств, которые помогают стилизовать таблицу:
-
border-collapse: устанавливает, как будет стилизоваться граница смежных ячеек
-
border-spacing: устанавливает промежутки между границами смежных ячеек
-
caption-side: устанавливает положение элемента caption
-
empty-cells: задает режим отрисовки для пустых ячеек
-
table-layout: определяет размеры таблицы
Установка таблицы
Ранее для установки границы в таблице широко использовался атрибут border, например:
<table border="2px" >
Сейчас же тенденция для стилизации использовать только стили CSS, поэтому граница также задается через CSS с помощью стандартного свойства border:
table {
border: 1px solid #ccc; /* граница всей таблицы */
}
tr {
border: 1px solid #ccc; /* границы между строками */
}
td, th {
border: 1px solid #ccc; /* границы между столбцами */
}
При установке границ между столбцами с помощью свойства border-collapse можно установить общую или раздельную границу между смежными ячейками:
-
collapse: смежные ячейки имеют общую границу
-
separate: смежные ячейки имеют отдельные границы, которые разделяются пространством
Если смежные ячейки имеют раздельные границы, то с помощью свойства border-spacing можно установить пространство между границами:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Стилизаци таблиц в CSS3</title>
<style>
table {
border: 1px solid #ccc;
border-spacing: 3px;
}
td, th{
border: solid 1px #ccc;
}
.collapsed{
border-collapse: collapse;
}
.separated{
border-collapse: separate;
}
</style>
</head>
<body>
<h3>Collapse</h3>
<table class="collapsed">
<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
<tr><td>Lumia 950</td><td>Microsoft</td><td>29900</td></tr>
<tr><td>iPhone 6S</td><td>Apple</td><td>52900</td></tr>
<tr><td>Nexus 6P</td><td>Huawei</td><td>49000</td></tr>
</table>
<h3>Separate</h3>
<table class="separated">
<tr><th>Модель</th><th>Производитель</th><th>Цена</th></tr>
<tr><td>G 5</td><td>LG</td><td>44900</td></tr>
<tr><td>HTC 10</td><td>HTC</td><td>49900</td></tr>
<tr><td>Nexus 5X</td><td>Google/LG</td><td>25000</td></tr>
</table>
</body>
</html>
Читать далее
Вступите в группу, и вы сможете просматривать изображения в полном размере
Это интересно
+1
|
|||
Последние откомментированные темы:
-
Лучший чат-бот с искусственным интеллектом - какой из них вам подходит?
(1)
boris 1
,
13.01.2022
-
Новогоднее украшение рабочего стола ПК
(1)
Елена2022
,
21.12.2021
-
Как JPG преобразовать в Word с распознаванием текста
(1)
Olejaweb
,
13.11.2021
-
Как вернуть классическое ленточное меню в проводник Windows 11
(1)
Сергей Михайлов сын
,
26.10.2021
20251119051428