| Определяет содержимое таблицы.
|
|
| Определяет наименование таблицы.
|
|
| Определяет заголовочную ячейку таблицы.
|
|---|
|
| Определяет строку таблицы.
|
|
| Определяет ячейку данных таблицы.
|
| Используется для содержания заголовка группы в таблице (шапка таблицы).
|
| |
Используется для содержания "тела" таблицы.
|
|
Используется для содержания "подвала" таблицы (футер).
|
|
| Определяет заданные свойства столбцов для каждого столбца в пределах тега .
|
|
| Определяет группу столбцов в таблице.
|
Работа с отступами в таблице
Использование внутренних отступов в таблице
Отступы в таблице
|
1 |
2 |
3 |
4 |
|
2 | | | |
|
3 | | | |
|
4 | | | |
В данном примере мы:
- Разместили таблицу по центру, используя прием центровки по горизонитали внешними отступами (margin : 0 auto
).
- Для наименования таблицы (тег ) мы установили внутренний отступ снизу равный 19
пикселей. Надеюсь, Вас не смущают неровные числа:)
Результат нашего примера:
Промежуток между ячейками
После рассмотренного выше примера, вы могли заметить, что у нас остался промежуток между всеми ячейками таблицы. Давайте рассмотрим, как убрать промежуток между ячейками таблицы, либо его увеличить.
Чтобы задать расстояние между границами соседних ячеек необходимо использовать свойство CSS - border-spacing .
Изменение промежутка между таблицами
border-spacing: 30px 10px;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
border-spacing: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
border-spacing:0.2em;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
В данном примере мы:
- float : left
). Если вы пропустили тему плавающих элементов, то вы всегда можете к ней вернуться в этом учебнике - « ».
- Кроме того установили для таблиц внешний отступ справа равный 30px
и установили вертикальное выравнивание таблиц (верх элемента выравнивается по верху самого высокого элемента). Мы еще вернемся к подробному рассмотрению этого свойства в этой статье.
- ) – жирное начертание.
- Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1
пиксель шестнадцатеричным цветом #F50
и установили внутренние отступы размером 19
пикселей для всех сторон.
- Для первой таблицы с классом .first
мы установили промежуток между ячейками таблицы (свойство border-spacing) равный 30px 10px
, для второй таблицы с классом .second
равный нулю, для третей таблицы с классом .third
равный 0.2em
.
Обращаю Ваше внимание, что если в свойстве border-spacing указано только одно значение длины, то оно указывает интервалы, как по горизонтали, так и вертикали, а если указаны два значения длины, то первое определяет горизонтальное расстояние, а второе вертикальное.
Расстояние между границами соседних ячеек допускается указывать в единицах измерения CSS (px, cm, em и др). Отрицательные значения не допускаются.
Результат нашего примера:
Отображение границ вокруг ячеек таблицы
Вы можете сказать: - так, мы убрали промежуток между ячейками, используя свойство border-spacing со значением 0
, но почему у нас теперь границы у ячеек то пересекаются?
Двойные границы образуются из-за того, что нижняя граница одной ячейки добавляется к верхней границе ячейки, которая находится под ней, аналогичная ситуация происходит по бокам ячеек и это логично с точки зрения отображения таблицы, но к счастью есть способ, сообщить браузеру, что мы не хотим видеть такое развязное поведение границ ячеек.
Для этого необходимо использовать CSS свойство border-collapse . Как не странно, но использование свойства border-collapse со значением collapse
является лучшим способом как можно убрать промежуток между ячейками и при этом не получить двойных границ между ними.
Рассмотрим сравнение поведения границ при использовании свойства border-spacing со значением 0
и свойства border-collapse со значением collapse
:
Пример отображения границ вокруг ячеек таблицы
border-spacing: 0;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
border-collapse: collapse;
|
1 |
2 |
3 |
|
2 | | |
|
3 | | |
В данном примере мы:
- Сделали наши таблицы плавающими и сместили по левому краю (float : left
), установили для них внешний отступ справа равный 30px
.
- Установили для наименования таблицы (тег ) – жирное начертание.
- Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 5
пикселей шестнадцатеричным цветом #F50
и установили фиксированную ширину 50px
и высоту 75
пикселей.
- Для первой таблицы с классом .first
мы установили промежуток между ячейками таблицы равный нулю (border-spacing
: 0
;), а для второй таблицы с классом .second
установили свойство border-collapse со значением collapse
, которое объединяет границы ячеек в одну, когда это возможно.
Результат нашего примера:
Поведение пустых ячеек
Силами CSS можно установить, следует ли отображать границы и фон пустых ячеек в таблице или нет. За это поведение отвечает свойство empty-cells , которое по умолчанию, как вы могли заметить из предыдущих примеров, отображает пустые ячейки.
Давайте перейдем к примеру:
Пример отображения пустых ячеек таблицы
empty-cells: show;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
empty-cells: hide;
|
1 |
2 |
3 |
|
2 | |
☺ |
|
3 |
☺ | |
Понять, как действует свойство empty-cells из этого примера очень просто, если для него установлено значение hide
, то пустые ячейки и фон в них будут скрыты, если установлено значение show
(по умолчанию), то они будут отображаться.
Расположение заголовка таблицы
Давайте рассмотрим еще одно простое свойство для стилизации таблиц - caption-side , которое устанавливает расположение заголовка таблицы (над или под таблицей). По умолчанию свойство caption-side имеет значение top
, которое помещает заголовок над таблицей. Для того, чтобы поместить заголовок под таблицу необходим использовать свойство со значение bottom
.
Давайте рассмотрим пример использования этого свойства:
Пример использования свойства caption-side
Заголовок над таблицей
|
Наименование |
Цена |
|
Рыба |
350 рублей |
|
Мясо |
250 рублей |
Заголовок под таблицей
|
Наименование |
Цена |
|
Рыба |
350 рублей |
|
Мясо |
250 рублей |
В данном примере мы создали два класса
, которые управляют расположением заголовка таблицы. Первый класс (.topCaption
) помещает заголовок таблицы над ней, мы применили его к первой таблице, а второй класс (.bottomCaption
) помещает заголовок таблицы под ней, мы применили его ко второй таблице. Класс .topCaption
имеет значение свойства caption-side по умолчанию и создан для демонстрации.
Результат нашего примера:
Горизонтальное и вертикальное выравнивание
В большинстве случаев при работе с таблицами вам придется настраивать выравнивание содержимого внутри заголовочных ячеек и ячеек данных. Свойство text-align применяется для горизонтального выравнивания по аналогии с любой текстовой информацией. Применение этого свойства для текста мы рассматривали ранее в статье « ».
Чтобы установить выравнивание для содержимого в ячейках, необходимо использовать специальные ключевые слова со свойством text-align . Рассмотрим применение ключевых слов этого свойства на следующем примере.
Пример горизонтального выравнивания в таблице
|
Значение |
Описание |
|
left |
Выравнивает текст ячейки влево. Это значение по умолчанию (если направление текста слева направо). |
|
right |
Выравнивает текст ячейки вправо. Это значение по умолчанию (если направление текста справа налево). |
|
center |
Выравнивает текст ячейки по центру. |
|
justify |
Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст ячейки по ширине). |
В этом примере мы создали четыре класса
, которые задают различное горизонтальное выравнивание в ячейках и применили их по порядку к строкам таблицы. Значение в ячейке соответствует значению свойства text-align
Результат нашего примера:
Кроме горизонтального выравнивания вы также можете определить и вертикальное выравнивание в ячейках таблицы с помощью свойства vertical-align .
Обращаю Ваше внимание, что при работе с ячейками таблицы применяются только следующие значения * этого свойства:
*
- Значения sub
, super
, text-top
, text-bottom
, length
и %
, примененные к ячейке таблицы будут вести себя как при использовании значения baseline
.
Рассмотрим пример использования:
Пример вертикального выравнивания в таблице
|
Значение |
Описание |
|
baseline |
Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию. |
|
top |
Выравнивает содержимое ячейки вертикально по верхнему краю. |
|
middle |
Выравнивает содержимое ячейки вертикально по середине. |
|
bottom |
Выравнивает содержимое ячейки вертикально по нижнему краю. |
В этом примере мы создали четыре класса
, которые задают различное вертикальное выравнивание в ячейках и применили их по порядку к строкам таблицы. Значение в ячейке соответствует значению свойства vertical-align , которое было применено к этой строке.
Алгоритм размещения макета таблицы браузером
В CSS по умолчанию используется алгоритм автоматического размещения макета таблицы браузером. В этом случае ширина столбца задается самым широким неразрывным содержимым ячейки
. Данный алгоритм может быть в некоторых случаях медленным, так как браузер должен прочитать все содержимое в таблице, прежде чем определить её окончательный макет.
Чтобы изменить тип размещения макета таблицы браузером с автоматического
на фиксированный
, необходимо использовать CSS свойство table-layout со значением fixed
.
В этом случае горизонтальное размещение зависит только от ширины таблицы и ширины столбцов, а не от содержимого ячеек.
Браузер начинает отображать таблицу сразу после того, как получена первая строка. Как следствие, фиксированный алгоритм, позволяет создавать макет такой таблицы быстрее, чем используя автоматический вариант. При работе с большими таблицами в целях увеличения производительности вы можете использовать фиксированный алгоритм.
Давайте рассмотрим применение этого свойства на следующем примере:
Пример использования свойства table-layout
table-layout: auto;
|
Наименование |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
|
Пшеница |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
table-layout: fixed;
|
Наименование |
2009 |
2010 |
2011 |
2012 |
2013 |
2014 |
2015 |
2016 |
|
Пшеница |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
В данном примере мы:
Стилизация строк и столбцов таблицы
Мы с Вами частично уже затрагивали методы стилизации строк и столбцов таблицы в статье « ». В этой статье мы рассматривали применение группового псевдокласса , который позволяет чередовать стили строк в таблицах с использованием значений even
(четный
) и odd
(нечетный
), либо по элементарной математической формуле
.
Давайте повторим ранее рассмотренные методы и познакомимся с новыми способами стилизации строк и столбцов в таблицах. Перейдем к примерам.
Пример использования псевдокласса:nth-child с таблицами
|
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
|
2 | | | | | | |
| | | | | | |
|
3 | | | | | | |
| | | | | | |
|
4 | | | | | | |
| | | | | | |
В данном примере мы:
Результат нашего примера:
Перейдем к следующему примеру, в котором рассмотрим варианты стилизации строк таблицы.
Пример стилизации строк в таблицах
|
Услуга |
Стоимость |
|
Сумма |
15 000 |
|
1 |
1 000 |
|
2 |
2 000 |
|
3 |
3 000 |
|
4 |
4 000 |
|
5 |
5 000 |
В этом примере мы:
- Установили ширину таблицы в 100%
от ширины родительского элемента, для заголовочных и ячеек данных установили сплошную границу шириной 1px
.
- Установили для элемента («подвал» таблицы) цвет заднего фона – coral
, для элемента («шапка» таблицы) установили цвет заднего фона silver
.
- Для элементов
, которые находятся внутри элемента (тело таблицы) установили изменение цвета заднего фона при наведении (псевдокласс :hover) c белого
на цвет khaki
(подсвечивается вся строка).
Результат нашего примера: Рис. 153 Пример стилизации строк в таблицах
Следующий пример рассматривает применение скругления углов к ячейкам таблицы (свойство ).
Пример скругления углов ячейки
В этом примере мы:
- Отцентровали таблицу внешними отступами, задали для заголовочных ячеек ширину и высоту 50px
, указали прозрачную
границу 5
пикселей.
- Установили, что при наведении (псевдокласс :hover) на заголовочную ячейку она получает задний фон синего
цвета, оранжевый
цвет текста, границу оранжевого
цвета 5
пикселей и радиус скругления 100%
.
- Прозрачная граница
необходима для того, чтобы зарезервировать место под границу, которая будет отображена при наведении, если этого не сделать таблица будет «прыгать».
Результат нашего примера:
Следующий пример затрагивает использование HTML элементов и и их стилизации.
Пример подсветки колонок таблицы
|
№ заявки |
Услуга |
Цена, руб. |
Итого |
|
1 |
Пение |
6 000 |
6 000 |
|
2 |
Мытье |
2 000 |
2 000 |
|
3 |
Уборка |
1 000 |
1 000 |
|
4 |
Нытьё |
1 500 |
1 500 |
|
5 |
Чтение |
3 000 |
3 000 |
В этом примере мы:
Результат нашего примера:
Ну и заключительный пример, который довольно сложен для понимания и требует продвинутых знаний в CSS, так как затрагивает будущие темы, планируемые к подробному изучению в рамках этого курса.
В предыдущем примере мы поняли, что к HTML элементу можно применить только одно CSS свойство – цвет заднего фона (background-color), но при этом задать цвет заднего фона при наведении (псевдокласс :hover) на этот элемент напрямую нельзя. В этом примере мы рассмотрим, как подсветить столбец таблицы, используя только CSS.
Пример подсветки колонок и строк таблицы при наведении
|
№ заявки |
Услуга |
Цена, руб. |
Итого |
|
1 |
Пение |
6 000 |
6 000 |
|
2 |
Мытье |
2 000 |
2 000 |
|
3 |
Уборка |
1 000 |
1 000 |
|
4 |
Нытьё |
1 500 |
1 500 |
|
5 |
Чтение |
3 000 |
3 000 |
В этом примере мы:
- Устанавливаем, что наша таблица занимает 100%
от родительского элемента, ячейки таблицы занимают 25%
от родительского элемента и имеют сплошную границу 1
пиксель зеленого цвета, высота заголовочных и ячеек данных составляет 45px
. Промежуток между ячейками мы убрали, используя свойство border-collapse со значением
.
- И так, используя псевдоэлемент ::after добавляем содержимое после каждого элемента
при наведении. Псевдоэлемент ::after обязательно используется вместе со свойством content , благодаря которому мы вставляем блочный элемент, который имеет задний фон цвета forestgreen
и имеет абсолютное позиционирование
.
- Абсолютное позиционирование здесь необходимо для смещения элемента относительно заданного края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию - static
, иначе отсчёт будет вестись относительно, указанного края окна браузера, по этой причине мы установили для таблицы относительное позиционирование
(relative
).
- Установили для нашего сгенерированного блока свойство top , которое указывает направление смещения позиционированного элемента от верхнего края и свойство bottom , которое указывает направление смещения позиционированного элемента от нижнего края. Для обоих свойств указали значение 0
, таким образом, блок будет полностью занимать элемент от низа и верха таблицы, ширину этого блока задали 25%
это значение соответствует значению ширины самой ячейки.
- И заключительное свойство, которое мы установили для этого блока: z-index со значением "-1"
оно определяет порядок расположения позиционированных элементов по оси Z
. Это свойство необходимо, чтобы текст находился впереди этого блока, а не за ним, если не задать значение меньше нуля, то блок будет закрывать текст.
Результат нашего примера:
Если Вам на этом этапе изучения не понятен процесс позиционирование элементов, то не расстраивайтесь это сложная для понимания тема, которую мы к тому же не рассматривали, но обязательно рассмотрим в следующей статье учебника "Позиционирование элементов в CSS ".
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
 Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
2016-2019 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу сайт@gmail.com
Здравствуйте уважаемые читатели! При просомтре таблиц с большим количеством строк и столбцов бывает сложно отследить какие данные относятся к конкретной строке. Поэтому чтобы улучшить восприятие информации пользователями сайта и повысить юзабилити, можно использовать чередование фонового цвета в строках таблицы, либо в кнопках навигационного меню.
С появлением CSS3 эффекта чередования фонового цвета можно добиться исключительно средствами CSS, не изменяя HTML-разметки документа. Для этого используется псевдокласс nth-child
, который позволяет выбрать все четные или нечетные элементы, используя значения odd — нечетные или even — четные элементы, либо числовое выражение an+b , где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2... и так далее. Перейдем от теории к практике.
Допустим у Вас на сайте есть какая-то большая таблица. Например таблица футбольного чемпионата:
| М
|
Команда
|
И
|
В
|
Н
|
П
|
Заб
|
Проп
|
О
|
| 1
|
Зенит
|
30
|
20
|
7
|
3
|
58
|
17
|
67
|
| 2
|
ЦСКА
|
30
|
19
|
3
|
8
|
67
|
27
|
60
|
| 3
|
Краснодар
|
30
|
17
|
9
|
4
|
52
|
27
|
60
|
| 4
|
Динамо
|
30
|
14
|
8
|
8
|
53
|
36
|
50
|
| 5
|
Рубин
|
30
|
13
|
9
|
8
|
39
|
33
|
48
|
| 6
|
Спартак
|
30
|
12
|
8
|
10
|
42
|
42
|
44
|
| 7
|
Локомотив
|
30
|
11
|
10
|
9
|
31
|
25
|
43
|
| 8
|
Мордовия
|
30
|
11
|
5
|
14
|
22
|
43
|
38
|
| 9
|
Терек
|
30
|
10
|
7
|
13
|
30
|
30
|
37
|
| 10
|
Кубань
|
30
|
8
|
12
|
10
|
32
|
36
|
36
|
| 11
|
Амкар
|
30
|
8
|
8
|
14
|
25
|
42
|
32
|
| 12
|
Уфа
|
30
|
7
|
10
|
13
|
26
|
39
|
31
|
| 13
|
Урал
|
30
|
9
|
3
|
18
|
31
|
44
|
30
|
| 14
|
Ростов
|
30
|
7
|
8
|
15
|
27
|
51
|
29
|
| 15
|
Торпедо
|
30
|
6
|
11
|
13
|
28
|
45
|
29
|
| 16
|
Арсенал Тула
|
30
|
7
|
4
|
19
|
20
|
46
|
25
|
HTML-код таблицы с минимальным оформлением:
М | Команда | И | В | Н | П | Заб | Проп | О |
1 | Зенит | 30 | 20 | 7 | 3 | 58 | 17 | 67 |
2 | ЦСКА | 30 | 19 | 3 | 8 | 67 | 27 | 60 |
3 | Краснодар | 30 | 17 | 9 | 4 | 52 | 27 | 60 |
4 | Динамо | 30 | 14 | 8 | 8 | 53 | 36 | 50 |
5 | Рубин | 30 | 13 | 9 | 8 | 39 | 33 | 48 |
6 | Спартак | 30 | 12 | 8 | 10 | 42 | 42 | 44 |
7 | Локомотив | 30 | 11 | 10 | 9 | 31 | 25 | 43 |
8 | Мордовия | 30 | 11 | 5 | 14 | 22 | 43 | 38 |
9 | Терек | 30 | 10 | 7 | 13 | 30 | 30 | 37 |
10 | Кубань | 30 | 8 | 12 | 10 | 32 | 36 | 36 |
11 | Амкар | 30 | 8 | 8 | 14 | 25 | 42 | 32 |
12 | Уфа | 30 | 7 | 10 | 13 | 26 | 39 | 31 |
13 | Урал | 30 | 9 | 3 | 18 | 31 | 44 | 30 |
14 | Ростов | 30 | 7 | 8 | 15 | 27 | 51 | 29 |
15 | Торпедо | 30 | 6 | 11 | 13 | 28 | 45 | 29 |
16 | Арсенал Тула | 30 | 7 | 4 | 19 | 20 | 46 | 25 |
Таблица имеет много строк и столбцов и при однородном фоне ее тяжело просматривать. Для улучшения восприятия здесь как раз поможет чередование фонового цвета у четных и нечетных строк
. Для этого добавляем следующий CSS-код:
Результат:
| М
|
Команда
|
И
|
В
|
Н
|
П
|
Заб
|
Проп
|
О
|
| 1
|
Зенит
|
30
|
20
|
7
|
3
|
58
|
17
|
67
|
| 2
|
ЦСКА
|
30
|
19
|
3
|
8
|
67
|
27
|
60
|
| 3
|
Краснодар
|
30
|
17
|
9
|
4
|
52
|
27
|
60
|
| 4
|
Динамо
|
30
|
14
|
8
|
8
|
53
|
36
|
50
|
| 5
|
Рубин
|
30
|
13
|
9
|
8
|
39
|
33
|
48
|
| 6
|
Спартак
|
30
|
12
|
8
|
10
|
42
|
42
|
44
|
| 7
|
Локомотив
|
30
|
11
|
10
|
9
|
31
|
25
|
43
|
| 8
|
Мордовия
|
30
|
11
|
5
|
14
|
22
|
43
|
38
|
| 9
|
Терек
|
30
|
10
|
7
|
13
|
30
|
30
|
37
|
| 10
|
Кубань
|
30
|
8
|
12
|
10
|
32
|
36
|
36
|
| 11
|
Амкар
|
30
|
8
|
8
|
14
|
25
|
42
|
32
|
| 12
|
Уфа
|
30
|
7
|
10
|
13
|
26
|
39
|
31
|
| 13
|
Урал
|
30
|
9
|
3
|
18
|
31
|
44
|
30
|
| 14
|
Ростов
|
30
|
7
|
8
|
15
|
27
|
51
|
29
|
| 15
|
Торпедо
|
30
|
6
|
11
|
13
|
28
|
45
|
29
|
| 16
|
Арсенал Тула
|
30
|
7
|
4
|
19
|
20
|
46
|
25
|
Можно сделать акцент на столбцы оформив вертикальную зебру
. Для этого используется все тот же псевдокласс nth-child и применяем его к элементам td . А при наведении на строку выделять ее цветом с помощью псевдокласса hover:
Результат:
| М
|
Команда
|
И
|
В
|
Н
|
П
|
Заб
|
Проп
|
О
|
| 1
|
Зенит
|
30
|
20
|
7
|
3
|
58
|
17
|
67
|
| 2
|
ЦСКА
|
30
|
19
|
3
|
8
|
67
|
27
|
60
|
| 3
|
Краснодар
|
30
|
17
|
9
|
4
|
52
|
27
|
60
|
| 4
|
Динамо
|
30
|
14
|
8
|
8
|
53
|
36
|
50
|
| 5
|
Рубин
|
30
|
13
|
9
|
8
|
39
|
33
|
48
|
| 6
|
Спартак
|
30
|
12
|
8
|
10
|
42
|
42
|
44
|
| 7
|
Локомотив
|
30
|
11
|
10
|
9
|
31
|
25
|
43
|
| 8
|
Мордовия
|
30
|
11
|
5
|
14
|
22
|
43
|
38
|
| 9
|
Терек
|
30
|
10
|
7
|
13
|
30
|
30
|
37
|
| 10
|
Кубань
|
30
|
8
|
12
|
10
|
32
|
36
|
36
|
| 11
|
Амкар
|
30
|
8
|
8
|
14
|
25
|
42
|
32
|
| 12
|
Уфа
|
30
|
7
|
10
|
13
|
26
|
39
|
31
|
| 13
|
Урал
|
30
|
9
|
3
|
18
|
31
|
44
|
30
|
| 14
|
Ростов
|
30
|
7
|
8
|
15
|
27
|
51
|
29
|
| 15
|
Торпедо
|
30
|
6
|
11
|
13
|
28
|
45
|
29
|
| 16
|
Арсенал Тула
|
30
|
7
|
4
|
19
|
20
|
46
|
25
|
Тоже самое можно сделать и для списков. В статье мы сделали несколько вариантов горизонтального меню. Вот одно из них:
Это меню можно немного оживить с помощью чередования фонового цвета у соседних пунктов. Для этого нужно всего лишь добавить одну строчку кода:
Результат:
Полный код меню:
Псевдокласса nth-child позволяет применять различные свойства не только к четным или нечетным элементам, но и к конкретным элементам. Так, например, если необходимо изменить цвет шрифта только в первом пункте списка, то поможет следующее CSS правило:
li:nth-child (1){
color:orange;
}
Если надо выделить все строки таблицы начиная с третьей то достаточно такой строчки:
tr:nth-child (n + 3){
background-color: silver;
}
Можно выделить какой-то диапазон, например с четвертого по седьмой:
tr:nth-child (n+4):nth-child (-n+7){
font-size: 20px;
}
Так с помощью простых манипуляций с CSS
стилями и псевдокласса nth-child
можно менять оформления страницы и значительно улучшить восприятие и юзабилити сайта.
Пробуйте и предлагайте свои варианты. На этом все, до новых встреч!
При помощи атрибута BGCOLOR можно изменять цвет содержимого ячейки, строки, группы столбцов, крупы строк, таблицы целиком.
Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #.
Пример:
|
HTML-код:
Графический фон таблицы html страницы
При помощи атрибута BACKGROUND можно задать графический фон ячейки или таблицы целиком. Если размеры изображения превышают габариты ячейки или таблицы, для которых оно предназначено, браузер обрезает изображение таким образом, чтобы оно уместилось в пределах соответствующего объекта.
Пример:
|
HTML-код:
| 11111 |
22222 |
33333 |
44444 |
Отображение в браузере:
|
Выравнивание данных в таблице html страницы
Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.
Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево.
Атрибут VALIGN выравнивает данные по вертикали. По умолчанию информация выравнивается посередине.
Средствами выравнивания можно пользоваться в отдельной ячейке, строке, группе столбцов, группе строк. Самым высоким приоритетом обладает атрибут выравнивания в ячейках таблицы.
Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN="top", данные будут размещены на расстоянии трех пикселей от верхней границы ячейки.
Пример:
|
HTML-код:
1111
2222 |
22222 |
Нижняя ячейка |
Нижняя ячейка |
Отображение в браузере:
1111
2222
|
22222
|
| Нижняя ячейка
|
Нижняя ячейка
|
|
Изменение размеров таблицы html страницы
Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). Например, задав значение ширины в 600 пикселей, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора.
То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT.
При задании чрезмерно малых величин ширины и высоты таблицы, браузер определяет минимальные значения, которые позволяют нормально отображать данные.
Все вышесказанное относится и к ячейкам таблицы. При этом вовсе не обязательно задавать размеры каждой отдельной ячейки. При изменении ширины ячейки все соседние ячейки в пределах столбца будут отображаться с учетом нового значения. То же справедливо и в отношении высоты ячейки.
информирует браузер о завершении таблицы.
Любая таблица состоит из столбцов и строк.
Тег |
создает строку, а тег |
ячейку в строке. Соответственно сколько ячеек включено в строку, столько будет и столбцов в таблице.
Тег |
также создает ячейку. Его отличие от тега |
в том, что ячейка созданная тегом |
является ячейкой - заголовком: ее содержимое располагается по центру, а если это текст, то браузер отображает его жирным шрифтом.
Содержимое ячейки, созданной тегом |
по умолчанию располагается в ее левой чаcти.
Тег
создает заголовок таблицы, он располагается внутри тега
- сразу после открывающего тега. Заголовок по умолчанию располагается над таблицей и выравнивается по ее центру.
Заголовок таблицы
1-я ячейка 1-ой строки |
2-я ячейка 1-ой строки |
1-я ячейка 2-ой строки |
2-я ячейка 2-ой строки |
|
|
Выравнивание таблицы. Выравнивание содержимого ячеек
Для выравнивания таблицы используется атрибут align
тега
.
При помощи атрибут align
Вы можете разместить таблицу в левой или правой (align=
"left"
и align=
"right"
) части окна браузера (родительского элемента
) или по его центру (align=
"center"
).
Выравнивание содержимого строк (тег
) и ячеек (тег |
) по горизонтали также осуществляется при помощи атрибута align
, а по вертикали при помощи атрибута valign
:
Атрибут align
принимает значения left
, right
, center
и justify
, которые задают выравнивание содержимого строк и ячеек по их левому, правому краю, по центру и по ширине соответственно;
Атрибут valign
, принимающий значения top
, bottom
и middle
, задает выравнивание содержимого строк и ячеек по их верхнему, нижнему краю и по середине соответственно.
Атрибут align
служит также для выравнивания заголовка (тег
) по горизонтали и определения его расположения - над таблицей или под ней.
По умолчанию содержимое ячеек расположено по левому краю по горизонтали, и выравнено по середине в вертикальной плоскости.
Высота и ширина таблицы и ячеек
По умолчанию размеры (высота и ширина
) и таблицы, и ячеек меняются в зависимости от размеров их содержимого.
Но высоту и ширину как таблицы, так и отдельных ее ячеек можно задать явно - при помощи атрибутов hieght
и width
соответственно.
Тег |
, создающий строку таблицы не имеет атрибутов hieght
и width
. Высота строки соответствует высоте ячеек, расположенных в ней. А ширина строки равна ширине таблицы.
Значения высоты и ширины задаются в пикселях или в процентах относительно свободного пространства. Для задания значений:
Указывается целое положительное число. В этом случае размер будет задан в пикселях;
Указывается целое положительное число с символом %.
Если содержимое таблицы или ячейки превышает заданные размеры - они будут проигнорированы браузером, а новые размеры автоматически подобраны в соответствии с размерами содержимого.
Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.
Границы таблицы и ячеек
Таблица и каждая ее ячейка имеют свои собственные границы, которые по умолчанию не видны.
Атрибут border
тега
позволяет сделать границы видимыми и задать их толщину. При этом будут отображены границы и вокруг таблицы и вокруг каждой ячейки.
Толщина границы (или рамки
) задается в пикселях. В качестве значения атрибута border
указывается целое положительное число. Если атрибут border
указан без значения, толщина рамки составит 1 пиксель.
Толщина границы задается только для таблицы. Толщина рамки вокруг ячеек всегда составляет 1 пиксель (либо отсутствует
).
По умолчанию граница отображается с эффектом трехмерности и имеет черный цвет.
Атрибут bordercolor
задает цвет границы и устраняет эффект трехмерности. Атрибут может использоваться для задания цвета границы таблицы (тег
), строки (тег
) или ячейки (тег |
).
Атрибут bordercolor
поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS
).
Атрибут border не указан. |
Поэтому границы отсутствуют. |
|
|
Толщина границы таблицы составляет 3 пикселя. |
Ячейки имеют границы толщиной 1 пиксель! |
|
|
Частичное отображение границ
Граница таблицы и рамка вокруг ячеек могут быть отображены частично.
Атрибут frame
тега
указывает, где рисовать границу таблицы. Атрибут rules
указывает, как отобразить границы ячеек.
"500px"
frame=
"hsides"
rules=
"cols"
>
Установлены |
горизонтальные |
границы таблицы |
И |
отображены границы |
между колонками |
Отступы внутри и снаружи ячеек
При форматировании таблиц в HTML, для наглядного представления некоторой информации и удобного ее восприятия, может оказаться полезным использование отступов внутри и снаружи ячеек.
Внутренние отступы - от границ ячеек до их содержимого, задаются атрибутом cellpadding
тега
.
Внешние отступы - расстояние между границами соседних ячеек и расстояние от границ ячеек до границы таблицы, задаются атрибутом cellspacing
тега
.
В качестве значений атрибутов указываются целые положительные числа, которые задают расстояние в пикселях.
Расстояние от содержимого ячеек |
до их границ составляет 10 пикселей |
Расстояние между ячейками и от ячеек |
до границы таблицы составляет 25 пикселей |
Объединение ячеек
При оформлении и форматировании таблиц в HTML нередко требуется объединить рядом расположенные ячейки. И если такая необходимость возникла, то Вам следует воспользоваться атрибутами colspan
и rowspan
тега
.
Атрибут colspan
указывает количество ячеек, которые будут объединены по горизонтали, а атрибут rowspan
устанавливает количество ячеек, объединяемых по вертикали.
Оба атрибута имеют смысл, если таблица состоит из нескольких строк.
Фон таблицы. Фон ячеек таблицы
В HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки.
Атрибут background
тега
задает изображение, которое будет фоновым рисунком таблицы. В качестве значения атрибута указывается адрес файла с изображением - абсолютный или относительный путь к файлу ().
Атрибут bgcolor
тега
задает цвет фона таблицы. Цвет можно задать двумя способами ()
При помощи этих же атрибутов задают фоновый рисунок и цвет фона для любой ячейки таблицы (тег
).
|
Темно-розовый - цвет фона таблицы. |
Фоновый рисунок отдельной ячейки - небо! |
|
Напомним также о существовании атрибута cols
тега
, который указывает браузеру количество столбцов в таблице.
Использование атрибута cols
позволяет браузеру быстрее отобразить содержимое таблицы.
Редактирование таблицы
В этом разделе, рассмотрим теги, которые применяют при редактировании сразу нескольких элементов таблицы. Эти теги можно разделить на две группы.
К первой группе относятся теги
и
. Они практически идентичны и служат для задания некоторых свойств и изменения характеристик одной или нескольких колонок таблицы.
Один из этих тегов располагают сразу после тега
. Допустим это тег
.
При помощи атрибута span
тега
указывают количество колонок, к которым будут применены атрибуты align
, valign
или width
(выравнивание содержимого ячеек колонок по горизонтали, вертикали или задание ширины колонок
).
Если атрибут span
в теге
отсутствует, то будут изменены характеристики одной - первой колонки таблицы. При втором использовании тега
задаются свойства для следующих (следующей - если атрибут span
отсутствует
) колонок таблицы и т.д.
"2"
width=
"70px"
>
1
|
2
|
3
|
4
|
5
|
Ко второй группе тегов относятся также практически идентичные между собой теги
,
и
.
Любой из них можно применить для изменения некоторых свойств одной или нескольких строк таблицы: это опять же выравнивание содержимого ячеек в строках по горизонтали и по вертикали - при помощи атрибутов align
и valign
соответственно; и задание фонового цвета ячеек при помощи атрибута bgcolor
.
При использовании этих тегов следует знать несколько нюансов, которые как раз и определяют различия между ними.
Теги
и
должны быть расположены перед тегом
, сразу после открывающего таблицу тега
. Строки, помещенные в тег
представлены вверху таблицы, а строки заключенные в тег
будут расположены внизу таблицы. Оба тега могут быть применены только один раз в пределах одной таблицы.
Тег
допускается использовать несколько раз внутри тега
.
|
1
|
2
|
|
3
|
4
|
|
5
|
6
|
|
7
|
8
|
"right"
bgcolor=
"#00FF33"
>
|
9
|
10
|
Не кажется ли вам, что черно-белая таблица выглядит скучновато? Вот и мы так думаем! Поэтому в этом уроке мы поговорим о том, как изменить цвет таблицы в HTML. Существует три возможности добавления цвета, для каждой из которых присутствует свое свойство.
- Указание цвета фона ячеек. Осуществляется с помощью свойства background-color
.
- Указание цвета текста в ячейках. Осуществляется с помощью свойства color
.
- Указание цвета рамок ячеек. Осуществляется с помощью свойства border-color
.
Ранее, чтобы изменить цвет, применялась более сжатая форма описания рамки. Выглядела она вот так: Border: 1px solid lightgray
И за цвет здесь отвечала последняя часть – lightrgay
.
Существуют различные способы, позволяющие задать значение цветов в CSS
. Мы же покажем вам, как происходит описание цвета с использованием атрибутов.
Как изменить цвет ячейки
Давайте посмотрим, как выглядит код в CSS
, в котором задан цвет для ячейки. Td {
background-color: цвет-фона;
}
Разумеется, изменять цвета можно и у table
, и у td
, и у th
. Давайте попробуем придать нашей таблице умножения более солидный вид.
Добавим стили для ячеек-заголовков с тегом th
, а также для ячеек по диагонали, в которых расположены квадраты чисел:
Таблица умножения
Таблица умножения
| * |
2 |
3 |
| 2 |
4 |
6 |
| 3 |
6 |
9 |
Результат в браузере:
Как изменить цвет рамки в таблице
Как вы уже заметили в примере выше, в таблице мы изменили цвет рамки. Для этого мы использовали свойство border. В нём задаются параметры в порядке, перечисленном ниже:
- тип линии, в нашем случае solid (сплошная)
- толщина линии, в нашем случае 1px
- цвет линии, в нашем случае синий
Напомним ещё раз, как выглядит задание цвета рамки для ячейки: Td {
border: 1px solid blue;
}
Как изменить цвет строки в таблице
Итак, мы с вами научились менять цвета ячеек, а также ячеек-заголовков, используя возможности CSS. Если мы указываем стили для таких тегов, как th
или td
, то должны понимать, что применимы стили будут и к остальным тегам.
Однако, бывают ситуации, когда надо изменить цвет конкретной ячейки или же несколько ячеек, или же всю строку целиком. Что делать в данном случае? Здесь следует использовать классы, а также осуществлять применение их стилей. На практике это выглядит вот так: RowGreen {
background-color:green;
}
А чтобы изменить цвет с помощью этого класса определённые строки нужно сделать следующее:
Таблица с чередованием цвета в строках
| 1 |
2 |
3 |
4 |
5 |
| 1 |
2 |
3 |
4 |
5 |
| 1 |
2 |
3 |
4 |
5 |
И результат в браузере:
Как изменить цвет текста в таблице
Для того, чтобы изменить цвет текста в таблице используется свойство color
. Применять его можно к самым разным элементам: к table, tr, th, td. В зависимости от этого цвет в выбранном элементе будет изменён. Например, для всей таблицы зададим зелёный цвет шрифта: Table {
color: green;
...
}
Аналогично можно изменять цвет для отдельных ячеек. А на этом данный урок заканчивается, не забудьте сделать домашнее задание. Всем пока!
| | | |
|
|
| |
|
