Расстояние между столбцами в таблице цсс. Отступы между ячейками
Итак, мы изучили с вами наиболее простые действия, которые можно осуществлять с границами таблиц. И теперь таблица выглядит куда более эстетично. Однако, наполнение ячеек прямо таки упирается в границы. Это легко можно исправить, достаточно лишь сделать отступы в ячейках в таблице HTML. И тогда текст внутри рамки, в ячейке, будет более читабельным.
Для того, чтобы сделать отступы в ячейке следует использовать атрибут cellpadding
для тега
. Однако, есть и другой, более предпочтительный вариант: CSS
.
В таком случае отступы задаются с помощью свойства padding
. С его помощью не составит труда сделать отступ там, где надо, то есть – сверху, справа, снизу или слева, используя, соответственно, одно из данных свойств: padding-top
, padding-right
, padding-bottom
и padding-left
.
Можно задать, на сколько именно пикселей должен осуществляться отступ. Приведем пример, в котором нижний отступ будет составлять 20
пикселей, а все остальные будут по 10
. Такой CSS
-код будет выглядеть вот так:
Td {
padding: 10px;
padding-bottom: 20px;
}
А полный код стилей на данном этапе:
Table {
border: solid 1px blue;
border-collapse: collapse;
}
td {
border: solid 1px blue;
padding: 10px;
padding-bottom: 20px;
}
Результат в браузере:
Отступы между ячейками
Как правило, задачи, связанные с созданием таблиц, можно решить, используя для этого теги, атрибуты и свойства, которые позволяют создавать рамки, отступы в ячейках, а также задать цветовой фон самих ячеек.
Отступы в таблицах бывают не только внутри ячеек. Они могут также присутствовать и между самими ячейками.
Существует две возможности сделать отступы между ячейками:
- с использованием атрибута cellspacing
для тега
.
- с использованием CSS
-свойства border-spacing
.
Надо подчеркнуть, что border-spacing
прописывается для таблицы в целом, в то время как свойство padding
прописывается непосредственно для ячеек.
Давайте глянем на пример:
Table {
border: solid 1px blue;
border-collapse: separate;
border-spacing: 5px;
}
td {
border: solid 1px blue;
padding: 10px;
padding-bottom: 20px;
}
И на получившийся результат:
Сразу оговорим, что не надо пытаться сделать такие отступы с помощью border-collapse: collapse
. Ведь при использовании этой опции ячейки «липнут» друг к другу.
А чтобы они находились отдельно друг от друга, следует использовать border-collapse: separate
. Важно понимать, что данное значение является значением по умолчанию. И применяется оно только для того, чтобы наглядно показать, как решается эта задача. Если мы удалим эту строку, то результат в виде отдельно расположенных друг от друга ячеек будет сохранен.
Мы уже выяснили с вами, что у HTML-таблиц есть рамки
, хотя по умолчанию их браузеры и не показывают. Но это еще не все, у каждой ячейки таблицы тоже есть рамка, которая называется граница ячейки
. Но и это еще не все, используя специальные атрибуты тега
можно изменять расстояния между ячейками и от ячеек до рамки таблицы, а также внутренние отступы от границ ячеек до их содержимого.
Рамка HTML-таблицы, границы ячеек, расстояния между ними и внутренние отступы.
Итак, для создания рамки
HTML-таблицы и границ ее ячеек
используется всего один атрибут тега
- border
. Значением атрибута являются целые неотрицательные числа (ноль по умолчанию), которые означают размер в пикселях. Но, внимание, размер изменяется только у рамки таблицы, у границ ячеек он всегда неизменен.
Для изменения расстояния между ячейками
(их границами) и от ячеек до рамки
таблицы в теге
применяется атрибут cellspacing
. Его значениями тоже могут быть только числа, отмеряющие расстояния в пикселях.
Чтобы установить внутренние отступы от границ ячеек до их содержимого
необходимо в теге
использовать атрибут cellpadding
. И его значения это числа, означающие пиксельные размеры.
Обратите внимание, что браузеры по умолчанию устанавливают небольшие (в два пикселя) значения cellspacing
и cellpadding
, поэтому чтобы убрать расстояния вовсе - установите у атрибутов значения ноль (0).
Пример границ, рамок и отступов HTML-таблиц
Границы, рамки и отступы таблиц
Ячейка 1.1 | Ячейка 1.2 | Ячейка 1.3 |
Ячейка 2.1 | Ячейка 2.2 | Ячейка 2.3 |
Ячейка 3.1 | Ячейка 3.2 | Ячейка 3.3 |
Таблица только с установленными рамкой и границами ячеек:
Ячейка 1.1 | Ячейка 1.2 | Ячейка 1.3 |
Ячейка 2.1 | Ячейка 2.2 | Ячейка 2.3 |
Ячейка 3.1 | Ячейка 3.2 | Ячейка 3.3 |
Результат в браузере
Таблица с измененными отступами и расстояниями:
Естественно не обязательно рисовать у таблицы рамку и границы ячеек, чтобы изменять внутренние отступы и расстояния между ячейками.
Согласно синтаксиса HTML, браузеры прибавляют значения cellspacing
и cellpadding
к размерам таблицы и ее ячеек. Например, если вы установите ширину ячейки в 100 пикселей и cellpadding=
"10"
- браузеры прибавят к ширине 20 пикселей (по 10 слева и справа) и она станет равна 120 пикселей. В общем, по ходу дела разберетесь.
Отступление от темы или как убрать отступы по краям страницы
Изначально все браузеры устанавливают небольшие отступы по краям HTML-страницы, которые часто бывают не нужны, поэтому сейчас вы научитесь их убирать. Вообще, эту информацию следовало бы поместить в начало учебника, но там бы она вряд ли вам пригодилась.
В свое время у тега
существовало четыре атрибута, которые устанавливали размер этих отступов для каждой стороны страницы: topmargin
(сверху), rightmargin
(справа), bottommargin
(снизу) и leftmargin
(слева). Сейчас эти атрибуты устарели, поэтому будем применять стили (CSS). Итак, изменить расстояния отступов по краям страницы можно несколькими способами, я покажу вам два, а о третьем узнаете, если решите изучать CSS.
Способ первый. B теге
указать атрибут style
со следующими значениями:
style=
"margin:0"
>...
- убирает отступы сразу со всех сторон HTML-страницы.
style=
"margin:сверху справа снизу слева"
>...
- регулирует размер отступов для каждой стороны по часовой стрелке. Как правило используются размеры в пикселях, например: style=
"margin:5px 3px 4px 5px"
>...
Второй и более удобный способ. В теге
Домашнее задание.
В этом уроке я тоже не буду все подробно описывать - только общие моменты. Для полноты картины посмотрите результат примера.
- Создайте три таблицы, каждая должны состоять из одной строки и трех столбцов (колонок).
- В первой таблице разместите Header или «шапку» страницы (не путать с «шапкой» HTML-документа), во второй - левое и правое меню, а также основное содержимое (контент), в третьей - Footer или «подвал» страницы.
- Пусть ширина первого и последнего столбца каждой таблицы будет фиксированная.
- Важно. Используйте тег
только для создания четырех кнопок горизонтального меню в «шапке» страницы. В остальных случаях пусть изображения идут фоном, а во вторых ячейках таблиц вообще используются только цвета, причем в первой и последней таблице это #99FF99.
- Пусть текст контента страницы будет выровнен по обеим сторонам ячейки таблицы, а заголовок располагается по центру.
- Что касается расстояний между ячейками таблиц, а также отступов ячеек, то думайте сами, где их надо совсем убрать, а где - увеличить.
Мы с Вами рассмотрели множество методов стилизации таких элементов на странице как текстовая информация, ссылки, изображения, заголовки, но всего этого пока недостаточно. В своих статьях я часто применяю такие элементы 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-2020 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу сайт@gmail.com
Табличные данные
- информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег , представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега и заканчивается закрывающим тегом .
Внутри тега располагаются ячейки таблицы, представленные тегами или | . Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.
Рамка таблицы
По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется 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 свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align:
- top:
текст выравнивается по верхней границе ячейки
- middle:
выравнивает текст по центру (значение по умолчанию)
- bottom:
текст выравнивается по нижней границе ячейки
Название документа
Имя | Фамилия |
Гомер | Симпсон |
Мардж | Симпсон |
Попробовать »
Чередование фонового цвета строк таблицы
При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class , добавляя его к каждой второй строке таблицы:
Название документа
Имя | Фамилия | Положение |
Гомер | Симпсон | отец |
Мардж | Симпсон | мать |
Барт | Симпсон | сын |
Лиза | Симпсон | дочь |
Попробовать »
Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс:nth-child , позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса:nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные): Tr:nth-child(odd) { background-color: #EAF2D3; }
Попробовать »
Изменение фона строки при наведении курсора
Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.
Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс:hover к селектору строки таблицы и задать нужный цвет фона: Tr:hover { background-color: #E0E0FF; }
Попробовать »
Выравнивание таблицы по центру
Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе - за автоматическое выравнивание по центру: Table { margin: 10px auto; }
Попробовать »
Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу: Table { margin: 10px auto 30px; }
Статьи по теме:
| | | |
|