|
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.
При задании чрезмерно малых величин ширины и высоты таблицы, браузер определяет минимальные значения, которые позволяют нормально отображать данные.
Все вышесказанное относится и к ячейкам таблицы. При этом вовсе не обязательно задавать размеры каждой отдельной ячейки. При изменении ширины ячейки все соседние ячейки в пределах столбца будут отображаться с учетом нового значения. То же справедливо и в отношении высоты ячейки.
Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу.
Ширина ячеек таблицы определяется шириной их содержимого, поэтому ширина столбцов таблицы может быть разной. Высота всех ячеек ряда одинаковая и определяется высотой самой высокой ячейки.
Форматирование таблиц
1. Границы таблицы border
Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы
задаются свойством border: Table {
border-collapse: collapse; /*убираем пустые промежутки между ячейками*/
border: 1px solid grey; /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/
}
Границы ячеек заголовка
каждого столбца задаются для элемента th: Th {border: 1px solid grey;}
Границы ячеек
тела таблицы задаются для элемента td: Td {border: 1px solid grey;}
Толщина рамок соседних ячеек не удваивается, поэтому задать границы для всей таблицы можно следующим способом: Th, td {border: 1px solid grey;}
Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину: Table {border: 3px solid grey;}
Границы можно задавать частично:
/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */
table {border-top: 3px solid grey; }
/* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */
td {border-bottom: 1px solid grey;}
Подробнее о свойстве border вы можете прочитать .
2. Как задать ширину и высоту таблицы
По умолчанию ширина и высота таблицы
определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).
Ширина таблицы и столбцов
задаётся с помощью свойства width . Если для таблицы задано table {width: 100%;} , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.
Ширину таблицы и столбцов обычно задают в px или % , например: Table {width: 600px;}
th {width: 20%;}
td:first-child {width: 30%;}
Высота таблицы
не задается. Высотой рядов
таблицы можно управлять, добавив верхний и нижний padding для элементов | и | . Фиксировать высоту с помощью свойства height не рекомендуется. Th, td {padding: 10px 15px;}
3. Как задать фон таблицы
По умолчанию фон таблицы
и ячеек прозрачный. Если страница или блок, содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек могут выступать:
заливка ,
,
.
4. Столбцы таблицы
Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега |
|---|
. На практике бывают случаи, когда необходимо специальное форматирование столбцов, которое возможно следующими способами:
с
помощью тега Можно задать фон для любого количества столбцов;
с
помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);
с
помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.
Подробнее про CSS-селекторы вы сможете прочитать .
5. Как добавить таблице заголовок
Добавить заголовок в таблицу можно с помощью тега , а с помощью свойства caption-side его можно поместить перед таблицей или под ней. Для горизонтального выравнивания текста заголовка применяется свойство text-align . Наследуется.
Таблица № 1
| Company |
Q1 |
Q2 |
Q3 |
Q4 |
...
caption {
caption-side: bottom;
text-align: right;
padding: 10px 0;
font-size: 14px;
}
 Рис. 2. Пример отображения заголовка под таблицей
6. Как убрать промежуток между рамками ячеек
Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся. Свойство наследуется.
Синтаксис
Table {border-collapse: collapse;}
 Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек
7. Как увеличить промежуток между рамками ячеек
С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется.
Синтаксис
Table {border-collapse: separate; border-spacing: 10px 20px;}
table {border-collapse: separate; border-spacing: 10px;}
 Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек
8. Как скрыть пустые ячейки таблицы
Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;} , то ячейка не будет скрыта. Наследуется.
| Company |
Q1 |
Q2 |
Q3 |
| Microsoft |
20.3 |
30.5 |
|
| Google |
50.2 |
40.63 |
45.23 |
table {
border: 1px solid #69c;
border-collapse: separate;
empty-cells: hide;
}
th, td {border: 2px solid #69c;}
 Рис. 5. Пример скрытия пустой ячейки таблицы
9. Компоновка макета таблицы с помощью свойства table-layout
Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется.
Синтаксис
Table {table-layout: fixed;}
10. Лучшие макеты таблиц
1. Горизонтальный минимализм
Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th .
| Employee | Salary | Bonus | Supervisor |
|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
background: white;
max-width: 70%;
width: 70%;
border-collapse: collapse;
text-align: left;
}
th {
font-weight: normal;
color: #039;
border-bottom: 2px solid #6678b1;
padding: 10px 8px;
}
td {
color: #669;
padding: 9px 8px;
transition: .3s linear;
}
tr:hover td {color: #6699ff;}
При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами td .
 Td {
border-bottom: 1px solid #ccc;
color: #669;
padding: 9px 8px;
transition: .3s linear;
}/*остальной код - как в примере выше*/
Добавление эффекта:hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.
 Th {
font-weight: normal;
color: #039;
padding: 10px 15px;
}
td {
color: #669;
border-top: 1px solid #e8edff;
padding: 10px 15px;
}
tr:hover td {background: #e8edff;}
2. Вертикальный минимализм
Несмотря на то, что подобные таблицы используются редко, тем не менее, вертикально ориентированные таблицы полезны для категоризации или сравнения описания объектов, представленных колонкой. Можно оформить их в минималистском стиле, добавив пробел, разделяющий столбцы.
 Th {
font-weight: normal;
border-bottom: 2px solid #6678b1;
border-right: 30px solid #fff;
border-left: 30px solid #fff;
color: #039;
padding: 8px 2px;
}
td {
border-right: 30px solid #fff;
border-left: 30px solid #fff;
color: #669;
padding: 12px 2px;
}
3. «Коробочный» стиль
Наиболее надежным стилем для оформления таблиц всех типов, является так называемый «коробочный» стиль. Достаточно подобрать хорошую цветовую гамму, а затем задать цвет фона для всех ячеек. Не забудьте подчеркнуть различие между строками, установив границы в качестве разделителя.
 Th {
font-size: 13px;
font-weight: normal;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039;
padding: 8px;
}
td {
background: #e8edff;
border-bottom: 1px solid #fff;
color: #669;
border-top: 1px solid transparent;
padding: 8px;
}
tr:hover td {background: #ccddff;}
Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.
 Table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
max-width: 70%;
width: 70%;
text-align: center;
border-collapse: collapse;
border-top: 7px solid #9baff1;
border-bottom: 7px solid #9baff1;
}
th {
font-size: 13px;
font-weight: normal;
background: #e8edff;
border-right: 1px solid #9baff1;
border-left: 1px solid #9baff1;
color: #039;
padding: 8px;
}
td {
background: #e8edff;
border-right: 1px solid #aabcfe;
border-left: 1px solid #aabcfe;
color: #669;
padding: 8px;
}
4. Горизонтальная зебра
Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.
 Th {
font-weight: normal;
color: #039;
padding: 10px 15px;
}
td {
color: #669;
border-top: 1px solid #e8edff;
padding: 10px 15px;
}
tr:nth-child(2n) {background: #e8edff;}
5. Газетный стиль
Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект:hover при наведении на строку.
 Table {border: 1px solid #69c;}
th {
font-weight: normal;
color: #039;
border-bottom: 1px dashed #69c;
padding: 12px 17px;
}
td {
color: #669;
padding: 7px 17px;
}
tr:hover td {background: #ccddff;}
Table {border: 1px solid #69c;}
th {
font-weight: normal;
color: #039;
padding: 10px;
}
td {
color: #669;
border-top: 1px dashed #fff;
padding: 10px;
background:#ccddff;
}
tr:hover td {background: #99bcff;}
Table {border: 1px solid #6cf;}
th {
font-weight: normal;
font-size: 13px;
color: #039;
text-transform: uppercase;
border-right: 1px solid #0865c2;
border-top: 1px solid #0865c2;
border-left: 1px solid #0865c2;
border-bottom: 1px solid #fff;
padding: 20px;
}
td {
color: #669;
border-right: 1px dashed #6cf;
padding: 10px 20px;
}
6. Фон таблицы
Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.
 Png") 98% 86% no-repeat;
}
th {
font-weight: normal;
font-size: 14px;
color: #339;
padding: 10px 12px;
background: white;
}
td {
color: #669;
border-top: 1px solid white;
padding: 10px 12px;
background: rgba(51, 51, 153, .2);
transition: .3s;
}
tr:hover td {
background: rgba(51, 51, 153, .1);
}
Мы с Вами рассмотрели множество методов стилизации таких элементов на странице как текстовая информация, ссылки, изображения, заголовки, но всего этого пока недостаточно. В своих статьях я часто применяю такие элементы HTML как таблицы, потому что они в большинстве случаев помогают систематизировать важную информацию и сделать её подачу более простой.
В этой статье я познакомлю Вас с тонкостями стилизации HTML таблиц, и вы узнаете новые свойства CSS, предназначенные для достижения этих целей.
Язык гипертекстовой разметки HTML предоставил нам большое количество возможностей, чтобы осуществить привязку CSS стилей к десяти уникальным тегам, предназначенных для работы с таблицами, предлагаю их повторить перед дальнейшим изучением:
| Тег
| Описание
|
|---|
| Определяет содержимое таблицы.
|
|
| Определяет наименование таблицы.
|
|
| Определяет заголовочную ячейку таблицы.
|
|---|
|
| Определяет строку таблицы.
|
|
| Определяет ячейку данных таблицы.
|
| Используется для содержания заголовка группы в таблице (шапка таблицы).
|
| |
Используется для содержания "тела" таблицы.
|
|
Используется для содержания "подвала" таблицы (футер).
|
|
| Определяет заданные свойства столбцов для каждого столбца в пределах тега .
|
|
| Определяет группу столбцов в таблице.
|
Работа с отступами в таблице
Использование внутренних отступов в таблице
Отступы в таблице
|
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
В этой главе:
Табличные данные - информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется элемент , представляющий из себя контейнер с содержимым таблицы. Контент таблицы описывается построчно, каждая строка начинается с открывающего тега и заканчивается закрывающим тегом .
Внутри элемента располагаются ячейки таблицы, представленные элементами | или | . Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.
Рамка таблицы
По умолчанию таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border . Но стоит обратить внимание на то, что если добавить рамку только к элементу , то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов | и | . Table, th, td { border: 1px solid black; }
Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing , которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.
Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing, то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse . Оно может принимать два значения:
- separate:
является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
- collapse:
соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.
Название документа
| Имя | Фамилия |
|---|
| Гомер | Симпсон |
| Мардж | Симпсон |
| Имя | Фамилия |
|---|
| Гомер | Симпсон |
| Мардж | Симпсон |
Размер таблицы
После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding : Th, td { padding: 7px; }
Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height , задавая нужные размеры или самой таблице или ячейкам: Table { width: 70%; }
th { height: 50px; }
Выравнивание текста
По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.
Понравилась статья? Поделиться с друзьями:
| | | |
|
|
Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице
CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html
List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom)
Разное оформление для внутренних и внешних ссылок через CSS
Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили
Правила Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в CSS
Float и clear в CSS - инструменты блочной верстки
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS
