Как сделать таблицу в CSS?
Внешний вид HTML-таблиц можно существенно усовершенствовать с помощью CSS :
Границы таблицы CSS
Чтобы задать границы таблицы CSS , воспользуйтесь свойством border .
table, th, td
Объединение границ в таблице CSS
Свойство border-collapse определяет, нужно ли объединять двойную границу в одну:
table < border-collapse: collapse; >table, th, td
table
Ширина и высота таблицы CSS
Ширина и высота таблицы определяется свойствами width и height .
В приведенном ниже примере ширина таблицы выставлена на 100%, а высота элементов на 50px:
table < width: 100%; >th
Выравнивание по горизонтали
В приведенном ниже примере оформления таблицы CSS к содержимому элементов применяется выравнивание по левому краю:
Выравнивание по вертикали
Поля таблицы CSS
th, td
Горизонтальные разделители
th, td
Таблица с hover-эффектом
tr:hover
Полосатая таблица
Чтобы получить CSS таблицы со строками разного цвета, используйте селектор nth-child() , и задайте всем четным и нечетным строкам разный цвет.
tr:nth-child(even)
Цвет таблицы
В приведенном ниже примере показано, как задавать цвет фона и текста для элементов :
Адаптивная таблица
Адаптивная таблица CSS будет показывать горизонтальный скроллинг, если окажется слишком большой для страницы или экрана.
. содержимое таблицы .
Больше примеров
Создаем причудливую таблицу
В этом примере показано, как можно создать забавную таблицу с помощью каскадных таблиц стилей CSS .
Выставляем расположение подписи таблицы
В данном примере показано, как можно расположить подпись к таблице при помощи CSS .
CSS-свойства таблицы
| Свойства | Описание |
| border | Позволяет одним выражением установить сразу все границы |
| border-collapse | Позволяет объединять двойные границы в одну |
| border-spacing | Позволяет указать расстояние между смежными ячейками |
| caption-side | Отвечает за положение подписи к таблице |
| empty-cells | Позволяет показать или скрыть границы для пустых ячеек в таблице |
| table-layout | Позволяет использовать в таблице шаблонный алгоритм |
CSS стиль таблицы
CSS позволяет установть не только стиль границы таблицы, но и стиль границ отдельных ячеек. Так как у каждой ячейки свои границы, то между соседними ячейками граница получается сдвоенная. Но существует возможность объединить границы соседних ячеек в одну. Для этого есть свойство border-collapse . Оно принимает значения:
border-collapse: separate — у каждой ячейки своя граница (по умолчанию)
border-collapse: collapse — общая граница
border-collapse: inherit — значение принимается от родительского элемента
Для примера создадим таблицу и зададим рамку ячейкам всех таблиц, которые будут на странице. Сначала не будем ничего менять, чтобы посмотреть, как таблица будет выглядеть:
14
15
16
17
18
19
20
21
22
23
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| строка 2 ячейка 1 | строка 2 ячейка 2 |
Обратите внимание, у каждой ячейки своя граница. В разных браузерах CSS стиль таблицы может немного отличаться. В одних браузерах по умолчанию между ячейками есть определённое расстояние. В других границы таблицы соприкасаются.
Теперь установим таблице свойство border-collapse .
Границы ячеек объединились, теперь у каждой ячейки нет своей рамки, а одна рамка находится между ячейками.
Расстояние между ячейками
CSS даёт возможность установить конкретное расстояние между ячейками таблицы. Для этого используется свойтсво border-spacing . Расстояние указывается в единицах измерения CSS. Это свойство не работает, если установлено свойство border-collapse со значением collapse .
Создадим ещё одну таблицу и установим расстояние между ячейками:
32
33
34
35
36
37
38
39
40
41
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| строка 2 ячейка 1 | строка 2 ячейка 2 |
Свойству border-spacing можно указать два значения через пробел. При этом, первое значение — это расстояние по горизонтали, а второе — по вертикали.
Укажем созданной таблице разные расстояния.
border-spacing: 5px 15px;
Положение заголовка таблицы
Для таблицы можно создать заголовок. Он создаётся с помощью тэга . Свойство caption-side позволяет установить положение заголовка. Оно принимает значения:
caption-side: top — над таблицей (по умолчанию)
caption-side: bottom — под таблицей
Существуют другие значения, но они поддерживаются не всеми браузерами.
Добавим второй таблице заголовок и расположим его под таблицей:
Заголовок таблицы
Отображение пустых ячеек
Для пустых ячеек можно запретить отображение фона и рамки. Если ячейка содержит пробел, перевод строки или табуляцию, то она всё равно считается пустой. Отмену отображения пустых ячеек устанавливает свойство empty-cells . Может принимать значения:
empty-cells: show — ячейки видны (по умолчанию)
empty-cells: hide — ячейки не видны
Создадим таблицу с пустой ячейкой. Кроме рамки, установим ячейкам фон. Пока не будем ничего менять, посмотрите, как будет выглядеть таблица.
#hid td
47
48
49
50
51
52
53
54
55
56
| строка 1 ячейка 1 | строка 1 ячейка 2 |
| строка 2 ячейка 2 |
Пустая ячейка видна, у неё отображаются рамка и фон.
Теперь добавим таблице свойство empty-cells .
Обратите внимание, пустая ячейка не отображается в таблице
Коприрование материалов сайта возможно только с согласия администрации
2017 — 2023 © basecourse.ru Все права защищены
Оформление таблиц
Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Добавляя к таблицам всю мощь стилей можно весьма удачно вписать таблицы в дизайн сайта, наглядно и красиво представить табличные данные.
Ширина таблицы
По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.
Пример 1. Ширина таблицы в процентах
table < width: 100%; >.tbl-medium < width: 60%; >.tbl-small
Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto , как показано в примере 2.
Пример 2. Выравнивание таблицы с помощью margin
| . |
В данном примере для всех таблиц на странице задано выравнивание по центру.
Цвет фона
Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору table . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th , то он и будет установлен в качестве фона (пример 3).
Пример 3. Цвет фона
| Вид соединения | Поля допусков ширины шпоночного паза | |
|---|---|---|
| Вал | Втулка | |
| Свободное | H9 | D10 |
| Нормальное | N9 | Is9 |
| Плотное | P9 | |
Результат данного примера показан на рис. 1.
Рис. 1. Изменение цвета фона
Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child , добавляя его к селектору tr . Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов и (пример 4).
Пример 4. Создание зебры
| Интервалы размеров, мм | Допуск IT, мкм, для квалитетов | |||
|---|---|---|---|---|
| 5 | 6 | 7 | 8 | |
| До 3 | 4 | 6 | 10 | 14 |
| Св. 3 до 6 | 5 | 8 | 12 | 18 |
| Св. 6 до 10 | 6 | 9 | 15 | 22 |
| Св. 10 до 18 | 8 | 11 | 18 | 27 |
| Св. 18 до 30 | 9 | 13 | 21 | 33 |
| Св. 30 до 50 | 11 | 16 | 25 | 39 |
| Св. 50 до 80 | 13 | 19 | 30 | 46 |
Результат данного примера показан на рис. 2.
Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd , тогда серым цветом будут выделяться нечётные строки.
Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even) .
Поля внутри ячеек
Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding , которое работает с селектором td или th , как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).
Расстояние между ячеек
Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing , добавляя его к селектору table (пример 5).
Пример 5. Использование border-spacing
table < border-spacing: 3px; /* Расстояние между ячеек */ >thead th < background: #e08156; /* Цвет фона заголовка */ color: #333; /* Цвет текста */ >td, th < padding: 5px; /* Поля в ячейках */ background: #4c715b; /* Цвет фона ячеек */ color: #f5e8d0; /* Цвет текста */ >Добавляя этот стиль к любой таблице получим результат продемонстрированный на рис. 3.
Рис. 3. Вид таблицы с расстоянием между ячеек
Если к table добавляется свойство border-collapse со значением collapse , то border-spacing игнорируется, потому как расстояния между ячеек уже нет.
Границы и рамки
Пример 6. Применение свойства border-collapse при создании рамок таблицы
| O | X | X |
| O | O | X |
| X | X | O |
Разница между границами таблицы при добавлении свойства border-collapse , а также без него, представлена на рис. 4.
а — свойство не установлено
б — свойство установлено
Рис. 4. Вид таблицы при использовании border-collapse
На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).
Пример 7. Линии между строк
| Вид соединения | Поля допусков ширины шпоночного паза | |
|---|---|---|
| Вал | Втулка | |
| Свободное | H9 | D10 |
| Нормальное | N9 | Is9 |
| Плотное | P9 | |
Результат данного примера показан на рис. 5.
Рис. 5. Таблица с горизонтальными линиями
Выравнивание текста в ячейках
По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент , он определяет ячейку заголовка, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 8).
Пример 8. Выравнивание содержимого ячеек по горизонтали
| Заголовок 1 | Ячейка 1 | Ячейка 2 |
|---|---|---|
| Заголовок 2 | Ячейка 3 | Ячейка 4 |
Рис. 6. Выравнивание текста в ячейках
Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top , как показано в примере 9.
Пример 9. Выравнивание содержимого ячеек по вертикали
| Вид соединения | Поля допусков ширины шпоночного паза | |
|---|---|---|
| Вал | Втулка | |
| Свободное | H9 | D10 |
| Нормальное | N9 | Is9 |
| Плотное | P9 | |
В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.
Рис. 7. Выравнивание текста в ячейках
См. также
- border-collapse
- border-spacing
Сетка таблицы
Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить стилевое свойство border для каждой ячейки и воспользоваться свойством border-collapse .
Рис. 1. Вид таблицы с сеткой
При добавлении свойства border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse , как показано в примере 1.
Пример 1. Создание сетки
Таблица 2004 2005 2006 Рубины 43 51 79 Изумруды 28 34 48 Сапфиры 29 57 36
В данном примере также устанавливается цвет фона для ячеек заголовка (тег ) через свойство background .
Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).
Рис. 2. Сетка внутри таблицы
При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет, совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан белым и такого же цвета используется граница, которая добавляется к селектору TABLE .
Пример 2. Таблица без внешней рамки
Таблица 2004 2005 2006 Рубины 43 51 79 Изумруды 28 34 48 Сапфиры 29 57 36
В данном примере толщина линий между ячейками составляет один пиксел, а белая рамка вокруг — два пиксела, т.е. на один пиксел больше. Это требуется для того, чтобы надежно скрыть внешнюю границу вокруг таблицы.