Как стилизовать таблицу в css

Как стилизовать таблицу в css

CSS предоставляет ряд свойств, которые помогают стилизовать таблицу:

Установка таблицы

Ранее для установки границы в таблице широко использовался атрибут border , например:

Сейчас же тенденция для стилизации использовать только стили CSS, поэтому граница также задается через CSS с помощью стандартного свойства border :

table < border: 1px solid #ccc; /* граница всей таблицы */ >tr < border: 1px solid #ccc; /* границы между строками */ >td, th < border: 1px solid #ccc; /* границы между столбцами */ >

При установке границ между столбцами с помощью свойства border-collapse можно установить общую или раздельную границу между смежными ячейками:

• collapse : смежные ячейки имеют общую границу
• separate : смежные ячейки имеют отдельные границы, которые разделяются пространством

Если смежные ячейки имеют раздельные границы, то с помощью свойства border-spacing можно установить пространство между границами:

     table < border: 1px solid #ccc; border-spacing: 3px; >td, th < border: solid 1px #ccc; >.collapsed < border-collapse: collapse; >.separated 
Collapse
 
Модель
Производитель
Цена
 
Lumia 950
Microsoft
29900
 
iPhone 6S
Apple
52900
 
Nexus 6P
Huawei
49000
 
 
Separate
 
Модель
Производитель
Цена
 
G 5
LG
44900
 
HTC 10
HTC
49900
 
Nexus 5X
Google/LG
25000
 
   

Пустые ячейки

Свойство empty-cells позволяет стилизовать пустые ячейки с помощью одного из следующих значений:

• show : пустые ячейки отображаются, значение по умолчанию
• hide : пустые ячейки не отображаются

     table < border: 1px solid #ccc; border-spacing: 3px; >td, th < border: solid 1px #ccc; >.hidden-empty-cells 
Show
 
Модель
Производитель
Цена
 
Lumia 950
Microsoft
29900
 
iPhone 6S
 
 
Nexus 6P
Huawei
49000
 
 
Hide
 
Модель
Производитель
Цена
 
G 5
LG
44900
 
HTC 10
 
 
Nexus 5X
Google/LG
25000
 
   

Позиционирование заголовка

Свойство caption-side управляет позицией заголовка и может принимать следующие значения:

• top : позиционирование заголовка вверху (значение по умолчанию)
• bottom : позиционирование заголовка внизу

     table < border: 1px solid #ccc; border-spacing: 3px; >caption < font-weight: bold; >td, th < border: solid 1px #ccc; >.captionBottom 
Top
 
Флагманы 2015 года
 
Модель
Производитель
Цена
 
Lumia 950
Microsoft
29900
 
iPhone 6S
Apple
52900
 
Nexus 6P
Huawei
49000
 
 
Bottom
 
Новинки 2016 года
 
Модель
Производитель
Цена
 
G 5
LG
44900
 
HTC 10
HTC
49900
 
iPhone SE
Apple
37000
 
   

Управление размером таблицы

С помощью свойства table-layout можно управлять размером таблицы. По умолчанию это свойство имеет значение auto , при котором браузер устанавливает ширину столбцов таблицы автоматически, исходя из ширины самой широкой ячейки в столбце. А из ширины отдельных столбцов складывается ширина всей таблицы.

Однако с помощью другого значения — fixed можно установить фиксированную ширину:

table

Вертикальное выравнивание ячеек

Как правило, содержимое ячеек таблицы выравнивается по центру ячейки. Но с помощью свойства vertical-align это поведение можно переопределить. Это свойство принимает следующие значения:

• top : выравнивание содержимого по верху ячейки
• baseline : выравнивание первой строки текста по верху ячейки
• middle : выравнивание по центру (значение по умолчанию)
• bottom : выравнивание по низу

Стилизация таблиц с помощью CSS

HTML-таблицы используются на веб-страницах по своему прямому назначению — для отображения структурированной информации. Как говорилось еще в первом уроке учебника, таблицы уже давно не используются с целью компоновки других элементов на странице, ведь их место заняла блочная верстка.

HTML-таблица состоит из ячеек, строк и столбцов, у нее может быть заголовок, подпись, шапка, тело и футер. Через CSS ее можно стилизовать, используя в качестве селекторов как внутренние теги таблицы, так и собственные классы и идентификаторы.

Для придания таблицам красивого внешнего вида можно использовать многие CSS-свойства, с которыми вы уже хорошо знакомы: padding , border , width , height , color , display и прочие.

Давайте вспомним стандартный стиль HTML-таблицы:

Согласитесь, на данном этапе вид совсем не привлекательный. Но путем несложных манипуляций со стилями CSS можно сделать эту таблицу очень симпатичной. Ниже показан наш вариант оформления, а также приведен готовый код, который вы при желании можете дополнить либо изменить:

th < text-align: left; color: #fff; background-color: #706d97; >td < min-width: 250px; color: #696969; border-bottom: 1px solid #eee; >th, td < padding: 10px; height: 20px; >td:first-child < width: 150px; min-width: 0; >th:last-child < text-align: right; >td:last-child < width: 80px; min-width: 0; text-align: right; >tr:nth-child(odd)

Замена атрибутов таблиц на стили CSS

Как вы знаете, в HTML существуют специальные атрибуты для настройки базового стиля таблиц: cellpadding , cellspacing , border , bordercolor и другие. Но намного удобнее настраивать внешний вид элементов через CSS. Мы расскажем, какие свойства являются аналогами табличных атрибутов.

Атрибут align

С помощью этого атрибута можно выровнять всю таблицу относительно края окна браузера, выбрав одно из трех значений — left , center либо right . Обратите внимание, атрибут выравнивает не текст, а сам блок таблицы. Аналогом CSS в данном случае является комбинация свойств:

/* аналог align=»left» */ table < display: table; margin-right: auto; >/* аналог align=»center» */ table < display: table; margin-left: auto; margin-right: auto; >/* аналог align=»right» */ table

Также таблицу можно выровнять, задав ее родительскому элементу свойство text-align с соответствующим значением. Но это сработает только при условии, что для таблицы установлено свойство display со значением inline либо inline-block .

Атрибут background

Данный атрибут позволяет задать фоновое изображение для всей таблицы, указав его URL-адрес в качестве значения. Контролировать поведение такого фона нет возможности, в отличие от аналога CSS — свойства background-image и других свойств для настройки фона.

/* аналог background="img/bg.png" */ table < background-image: url(img/bg.png); >

Атрибут bgcolor

Устанавливает цвет фона для всей таблицы. Вы наверняка уже догадались, каким CSS-свойством можно успешно заменить атрибут bgcolor :

/* аналог bgcolor=»#eaeaea» */ table

Атрибуты border, bordercolor и frame

Атрибуты таблицы border , bordercolor и frame задают толщину рамки, ее цвет и расположение соответственно. Рекомендуем забыть о них и пользоваться CSS-свойством border (и его производными), которое объединяет эти атрибуты и дает даже больше.

/* аналоги border=»1″ и bordercolor=»#eee» */ table

Если в CSS задано свойство border , оно перекроет значение атрибута. Такое же поведение будет и в случае с другими атрибутами, имеющими точный аналог в CSS.

Атрибут rules

Атрибут, который определяет, где отображать границы (вокруг ячеек, между колонками, между строками и т. д.), опять-таки можно заменить CSS-свойством border , применяя его к соответствующим тегам таблицы.

/* аналог rules=»cols» */ td

Атрибут cellpadding

/* аналог cellpadding=»10″ */ td

Дополнительное преимущество CSS в данном случае заключается в том, что вы можете задать разные размеры отступов по вертикали и горизонтали, тогда как через HTML-атрибут устанавливается один размер отступа для всех сторон.

Атрибут cellspacing

Этот атрибут устанавливает расстояние между самими ячейками таблицы. В качестве аналога существует CSS-свойство border-spacing , при помощи которого тоже можно создать промежутки между ячейками. Кроме того, это свойство может принимать два значения одновременно (разделяются пробелом): одно для промежутков по горизонтали, второе — по вертикали.

/* аналог cellspacing=»10″ */ table

Атрибуты width и height

Разумеется, эти атрибуты можно легко заменить на CSS width и height :

/* аналоги width=»500″ и height=»500″ */ table

Завершение

Как вы уже знаете, в современной веб-разработке принято отделять структуру документа от его визуального оформления. Именно поэтому рекомендуется использовать CSS и не обращаться к HTML-атрибутам, которые предназначены для изменения внешнего вида. Это обеспечивает более удобную разработку, редактирование и дальнейшую поддержку стилей на сайте.

Далее в учебнике: CSS-стили для форм.

Стили таблиц

Внешний вид HTML таблиц можно при помощи CSS значительно улучшить.

Компания	Контакт	Страна
Alfreds Futterkiste	Maria Anders	Германия
Berglunds snabbköp	Christina Berglund	Швеция
Centro comercial Moctezuma	Francisco Chang	Мексика
Ernst Handel	Roland Mendel	Австрия

Рамка таблицы

Чтобы при помощи CSS определить у таблицы рамку, используется свойство border .

 table, th, td

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Таблица на всю ширину

 table

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Чтобы убрать двойные рамки, смотрите пример далее.

Объединение рамок таблиц

Свойство border-collapse определяет, должны ли рамки таблицы объединиться в одну общую рамку.

Свойство border-collapse может принимать следующие значения:

• separate — Значение по умолчанию. Каждая ячейка таблицы будет иметь собственную рамку.
• collapse — Ячейки таблицы будут иметь общую рамку.
• initial — Устанавливает значение по умолчанию.
• inherit — Значение наследуется от родительского элемента.

В следующем примере рамки таблицы объединяются в одну единую рамку:

 table

Firstname	Lastname
Peter	Griffin
Lois	Griffin

 table

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Ширина и высота таблицы

Ширина и высота таблицы определяется при помощи свойств width и height .

В следующем примере устанавливается ширина таблицы 100% и высота элемента 70px:

 table < width: 100%; >th

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Чтобы таблица занимала только половину страницы, используйте значение width: 50% :

 table

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Выравнивание по горизонтали

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Чтобы выровнять содержимое элемента по левому краю, используйте свойство text-align: left :

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Готовые CSS стили для таблиц

CSS-свойство display table и другие, делают вывод группы элементов подобно таблице, но с ограничением – объединения ячеек colspan и rowspan не поддерживаются.

Приемы как сделать шахматную сетку на псевдо-свойстве :nth-child().

Несколько способов как сделать выделение ячеек и рамок таблицы при наведении курсора. Во всех примерах верстка таблиц.

Метод добавления рамки к отдельным ячейкам, столбцам и строкам таблиц. К ячейке таблицы добавляются position: relative.

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

Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.