Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Добавляя к таблицам всю мощь стилей можно весьма удачно вписать таблицы в дизайн сайта, наглядно и красиво представить табличные данные.
Ширина таблицы
По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.
Пример 1. Ширина таблицы в процентах
Table { width: 100%; } .tbl-medium { width: 60%; } .tbl-small { width: 200px; }
В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу
В данном примере для всех таблиц на странице задано выравнивание по центру.
Цвет фона
Цвет фона одновременно всех ячеек таблицы устанавливается через свойство 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.
Рис. 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 игнорируется, потому как расстояния между ячеек уже нет.
Границы и рамки
Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border , которое применяется к элементам (
Пример 6. Применение свойства border-collapse при создании рамок таблицы
| O | X | X |
| O | O | X |
| X | X | O |
Разница между границами таблицы при добавлении свойства border-collapse , а также без него, представлена на рис. 4.
Рис. 4. Вид таблицы при использовании border-collapse
На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).
Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom , border-left и другие подобные. Применять границы к элементам
Пример 7. Линии между строк
| Вид соединения | Поля допусков ширины шпоночного паза | |
|---|---|---|
| Вал | Втулка | |
| Свободное | H9 | D10 |
| Нормальное | N9 | Is9 |
| Плотное | P9 | |
Результат данного примера показан на рис. 5.
Рис. 5. Таблица с горизонтальными линиями
По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент
Пример 8. Выравнивание содержимого ячеек по горизонтали
| Заголовок 1 | Ячейка 1 | Ячейка 2 |
|---|---|---|
| Заголовок 2 | Ячейка 3 | Ячейка 4 |
В данном примере содержимое
Рис. 6. Выравнивание текста в ячейках
Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top , как показано в примере 9.
Пример 9. Выравнивание содержимого ячеек по вертикали
| Вид соединения | Поля допусков ширины шпоночного паза | |
|---|---|---|
| Вал | Втулка | |
| Свободное | H9 | D10 |
| Нормальное | N9 | Is9 |
| Плотное | P9 | |
В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.
Таблицы - неотъемлемый элемент языка гипертекстовой разметки HTML, остающийся до сих пор актуальным для структуризации и удобном представлении различных данных.
Давным давно, когда сайты верстали преимущественно в табличном виде, таблицы пользовались высоким спросом и составляли чуть ли не весь каркас нового ресурса. После, значимость элемента поубавила в популярности относительно блоков (div), с помощью которых возможности верстки стали более расширенными как для десктопной, так и мобильной версий сайтов.
В настоящее время таблицы используются, например, для прайс-листов, списков, характеристик, анкет и много другого, а с применением каскадных таблиц стилей (CSS), мы можем усовершенствовать визуальное представление таблиц в документе. Здесь я представлю несколько примеров оформления HTML-таблиц с исходным кодом, что в дальнейшем можно будет применить при разработке своего проекта.
Стилизация таблиц с помощью CSS
Стилизация таблиц представляет из себя готовую, построенную таблицу на HTML с указанием свойств CSS на определенные теги. Я надеюсь, вы знаете, как и куда вставлять полученный исходный код, чтобы отобразить результат на экране.
В начале приведу общий HTML-код таблицы, который мы в последствии будем стилизовать.
| Наименование | Описание | Цена |
| Имя | Характеристики | Стоимость |
| Имя #2 | Характеристики | Стоимость |
| Имя #3 | Характеристики | Стоимость |
Шаблоны CSS
Шаблоны не претендуют на оригинальность, но могут быть полезные многим.
Table {width: 100%; border-collapse: collapse;} table td {padding: 12px 16px;} table thead tr {font-weight: bold; border-top: 1px solid #e8e9eb;} table tr {border-bottom: 1px solid #e8e9eb;} table tbody tr:hover {background: #e8f6ff;}
Кстати, если бы мы не использовали тег , то задать свои стили к первому ряду можно было с помощью псевдокласса:nth-child(1) . Table {width: 100%; border-collapse: collapse;}
table thead tr {color: #ffffff; font-weight: bold; background: #00bf80;}
table thead tr td {border: 1px solid #01ab73;}
table tbody tr td {border: 1px solid #e8e9eb;}
table tbody tr:nth-child(2n) {background: #f4f4f4;}
table tbody tr:hover {background: #ebffe8;}
Table {width: 100%; border-collapse: separate; border-spacing: 4px;}
table thead tr {color: #ffffff; font-weight: bold;}
table thead tr td {border-radius: 4px 4px 0 0; background: #2e82c3;}
table tbody tr td {border: 1px solid #2e82c3; border-radius: 4px; background: #cbdfef;}
table tbody tr td:hover {background: #a2c3dd; transition-duration: 0.2s;}
Table {width: 100%; text-align: center; border-bottom: 2px solid #dfdfdf; border-radius: 6px; border-collapse: separate; border-spacing: 0px;}
table thead tr {color: #ffffff; font-weight: bold; background: #c83240;}
table tr td {border-right: 1px solid #dfdfdf;}
table tr td:last-child {border-right: 0px;}
table tbody tr:nth-child(1n) {background: #f6f6f6;}
table tbody tr:nth-child(2n) {background: #e6e6e6;}
table tbody tr:hover {background: #ffe8e8; transition-duration: 0.6s;}
Что означают используемые свойства CSS в шаблонах: Цель урока:
Знакомство со свойствами таблицы и с принципами табличной верстки CSS Рассмотрим основные CSS свойства таблицы Свойство рассматривается в одном и включает одновременно несколько свойств: Существует также сборное правило:
table.collapse{
border-collapse:collapse;
}
table.separate{
border-collapse:separate;
} Результат:
Значения:
Пример:
Значения:
Значения:
Пример:
Благодаря большому числу свойств таблиц и вариациям их оформления, таблицы долгое время были некоторым станартом верстки веб-страниц. Если сделать границы таблицы невидимыми, то можно использовать ее отдельные ячейки в качестве отдельных блоков сраницы: шапка, меню, подвал и т.п. Но это не совсем правильно, ведь каждому тегу есть свое назначение, и таблицы не должны были служить для верстки страниц. Однако отсутствие альтернативы сподвигало дизайнеров именно на такой метод верстки. Сейчас есть другой способ — использование слоев, которые постепенно заменили таблицы в этом виде работы с веб-страницей. Однако и в наше время некоторые дизайнеры успешно используют табличную верстку. Один из самых распространённых способов верстки — две колонки, т.е. страница делится на две части. Пример:
задать основной каркас страницы из двух колонок: первая — с фиксированным размером, вторая — на оставшуюся область браузера. Выполнить задание используя CSS стили ()
Результат:
Пример:
задать разный фон ячеек (чтобы разделить две колонки друг от друга) и установить расстояние между колонками (разделитель) /* для левой ячейки */
td#left{
width:200px;
background: #ccc; border:1px solid black; /* временно обозначим границы */
}
/* для правой ячейки */
td#right{
background: #fc3; border:1px solid black; /* временно обозначим границы */
}
/* для разделителя */
#razdel{
width: 10px; /* Расстояние между колонками */
} Все вместе:
Для разделителя была добавлена новая ячейка. Пример:
сделать разделитель между колонками таблицы, используя пунктирную линию границы смежных ячеек /* для левой ячейки */
td#left{
width:200px;
background: #ccc; /* Цвет фона левой колонки */
/* новое */
border-right: 1px dashed #000; /* Параметры правой пунктирной границы */
} Все вместе:
Результат:
Существует понятие фиксированного или «резинового» макета верстки. Фиксированный макет CSS
Пример:
создать шаблон страницы из трех колонок. Использовать фиксированный макет табличной верстки:
Результат:
Резиновый макет
Важно:
Сумма ширины всех колонок должна получиться 100%, независимо от ширины таблицы. Пример:
Задать фон для колонок и визуально разделить колонки границей. Выполнение:
Результат:
Рассмотрим второй вариант, когда ширина центральной колонки автоматически подбирается браузером; примером может служить рисунок: Пример:
создать шаблон страницы из трех колонок. Использовать резиновый макет табличной верстки:
Задать фон для колонок и визуально разделить колонки границей.
Результат:
Если ширина двух колонок устанавливается в процентах, а третьей - в пикселях, обойтись одной таблицей не получится
. Так, если ширина всей таблицы равна 100 процентов, первой колонки - 200 пикселей, а оставшихся колонок по 20 процентов, то простое вычисление показывает, что размер первой колонки получается равным 60 процентов. В таком случае заданное значение в пикселях браузером не воспримется, а размер будет установлен в процентах. Пример:
создать шаблон страницы из трех колонок. Использовать резиновый макет с вложенной таблицей:
Задать фон для колонок. Выполнение:
Атрибуты тегов cellpadding и cellspacing здесь необходимы, для того, чтобы не было «зазора» между таблицами. Многие веб мастера уверены, что использовать HTML таблицы в шаблонах - плохая практика. Но в данном уроке мы рассмотрим только таблицы CSS. Какая разница между таблицами HTML и CSS? Надо ли использовать таблицы CSS? Если да, то как? Модель CSS таблиц основана на модели таблиц HTML4 и хорошо поддерживается браузерами. В обеих моделях структура таблицы существует параллельно визуальному представлению. Основными элементами структуры являются строки. Строка определяется явно, а столбцы зависят от того, как заданы строки и ячейки. Наверняка вы работали с таблицами HTML раньше. Если да, то у вас не будет проблем с созданием таблиц CSS. Каждый элемент таблицы HTML имеет эквивалент в CSS. Единственное отличие заключается в отсутствии отличий между td и th в варианте CSS. Ниже приводится список элементов таблиц HTML и соответствующие им значения CSS. Table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption } Подписи могут быть размещены сверху или снизу таблицы с помощью свойства caption-side: #caption {caption-side: top}
#caption {caption-side: bottom} Несложно догадаться, как создать таблицу CSS опираясь на приведенный список. Вот пример таблицы. #table {display: table;}
.row {display: table-row;}
.cell {display: table-cell;} Если посмотреть на код HTML примера, то можно легко различить структуру таблицы (используются элементы div и span с классами и ID вместо table , td и tr). Совсем небольшой код CSS представляет элементы div и span в виде таблицы. В дополнение к выше приведенным свойствам модель таблицы CSS включает значение inline-table
, которая определяет новую таблицу как и display: table
, но в рамках контекста встроенного в HTML код формата. Так как ячейки таблицы являются потомками строк таблицы, то для формирования столбцов имеет смысл использовать некоторые свойства. Модель таблицы CSS позволяет применять следующие свойства для столбцов и их группировки: Различные элементы таблицы имеют разный уровень в стеке для обеспечения возможности использования разных фонов на разных слоях. Данные слои можно посмотреть на представленном рисунке. Фон слоя будет виден только если выше лежащий слой имеет прозрачный фон. Это отличный способ для вывода пустых ячеек действительно пустыми с помощью использования прозрачного фона для них, через который будет видно строку, столбец или таблицу. Ширина таблицы CSS может быть вычислена с помощью одно из двух алгоритмов . Алгоритм выбирается с помощью свойства table-layout
и двух значений: Фиксированная модель шаблона вычисляется один раз и очень быстрая. А автоматический режим (используется по умолчанию) требует нескольких проходов по таблице HTML. Если вы явно определяете ширину таблицы, то следует использовать фиксированную модель расчета ширины. По умолчанию высота ячейки устанавливается минимально необходимой для вывода содержания. Но вы можете явно определить высоту ячейки. Все ячейки в строке будут иметь высоту ячейки с максимальным значением. Свойство vertical-align
определяет выравнивание содержания в строке Последняя группа значений применяется не для ячеек, а для текста в них. Ячейки в данном случае будут выравниваться в соответствии со значением baseline
. Есть три интересных свойства для рамок таблиц: Лучше ли таблицы CSS чем таблицы HTML? Если да, то в чем их преимущества? Если нет, то почему их не надо использовать? Хорошие вопросы, на которые нет однозначного ответа. Если рассмотреть использование таблиц HTML в сравнении с комбинацией элементов div и кода CSS, то выявляются следующие недостатки таблиц: В соответствии с выше сказанным у таблиц CSS нет существенных преимуществ перед таблицами HTML при использовании их в шаблонах. CSS таблицы являются более семантическим решением, так как имеется четкое разделение структуры данных и представления внешнего вида. Таблицы CSS достаточно просто освоить и использовать. Но они не имеют явных преимуществ перед таблицами HTML, за исключением более семантического кода. Может быть практика использования покажет преимущества или недостатки таблиц CSS. Есть ли у вас опыт использования таблиц CSS в реальных проектах? А в этой статье я расскажу об их оформлении с помощью CSS. Для форматирования таблиц каскадные стили используют перечисленные ниже свойства. Задают соответственно ширину и высоту таблицы. Без этих свойств параметры определяются автоматически и зависят от содержимого контейнера Table {width: 450px; height: 80%;} Указывает, где будет размещён заголовок таблицы, описанный тегом Эксклюзивно для обозревателя Firefox доступны значения left
(заголовок слева) и right
(справа от таблицы), но другие браузеры их не понимают. Table {caption-side: top;} Помогает избежать ситуаций, когда границы ячеек образуют двойные рамки. На рисунке ниже показан как раз такой случай. Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate;
даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse;
(результат показан на рисунке ниже). Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе - по вертикали. Свойство несовместимо с правилом table {border-collapse: collapse;}
. Table {
border: 4px double #FCA360;
border-collapse: separate;
border-spacing: 10px 20px;
}
td {
padding: 3px;
border: 1px solid #FCA360;
} Задаёт таблице следующее оформление: Указывает, будет ли отображаться фон и границы ячейки, если она пуста. Значение у свойства может быть одно из двух: Указывает браузеру, как определять ширину ячеек таблицы, основываясь на их содержимом. Не забывайте, что таблице можно задавать и другие универсальные правила, например, как мы это делали с высотой (height
) и шириной (width
). Помня это, оформим несложную таблицу, частично прокомментировав код.
В браузере таблица будет выглядеть, как показано ниже. width: 50%;
Задаём ширину таблицы в половину от родительской. 50% берётся от ширины контейнера
, потому что других родителей у неё нет. То есть таблица будет занимать ровно половину окна браузера. caption-side: bottom;
Размещаем заголовок снизу, под таблицей. border: 4px solid #006400;
Задаём таблице цветную рамку толщиной 4 пикселя. border-collapse: collapse;
Объединяем границы ячеек. table-layout: fixed;
Настраиваем способ определения браузером ширины таблицы. font-size: 13px;
Задаём размер шрифта заглавных ячеек. font-weight: bold;
Делаем текст внутри них жирным. background: #ADFF2F;
Устанавливаем цвет фона ячеек. border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;
Настраиваем верхние и нижние рамки. color: #039;
Определяем цвет текста. padding: 8px;
Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям.Наименование
Описание
Цена
Samsung
Galaxy S8, S8 Plus
2400 ₽
Xiaomi
Redmi 4A, 4X
520 ₽
Meizu
M3S, M5S
720 ₽
Своойства CSS
border
width и height
(высота и ширина таблицы)
text-align
(выравнивание по горизонтали)
vertical-align
(выравнивание по вертикали)
padding
(внутренние отступы в таблице)
background-color (задний фон)
color (цвет текста)
Табличная верстка CSS
Табличная верстка из двух колонок
Выполнение:
</
head
>
<body
>
<table
id
=
"maket"
cellspacing
=
"0"
>
<tr
>
<td
id
=
"left"
>
1</
td
>
<td
id
=
"right"
>
2</
td
>
</
tr
>
</
table
>
...
...
1
2
Выполнение:
Добавим новые свойства стилей:
</
head
>
<body
>
<table
id
=
"maket"
cellspacing
=
"0"
>
<tr
>
<td
id
=
"left"
>
1</
td
>
<td
id
=
"razdel"
>
<td
id
=
"right"
>
2</
td
>
</
tr
>
</
table
>
1
2
Результат:
Выполнение:
Добавим новые свойства границ для ячеек:
</
head
>
<body
>
<table
id
=
"maket"
cellspacing
=
"0"
>
<tr
>
<td
id
=
"left"
>
1</
td
>
<td
id
=
"right"
>
2</
td
>
</
tr
>
</
table
>
1
2
Табличная верстка из трех колонок
Выполнение:
</
head
>
<body
>
<table
id
=
"maket"
cellspacing
=
"0"
>
<tr
>
<td
id
=
"left"
>
1</
td
>
<td
id
=
"central"
>
2</
td
>
<td
id
=
"right"
>
3</
td
>
</
tr
>
</
table
>
1
2
3
</
head
>
<body
>
<table
id
=
"maket"
cellspacing
=
"0"
>
<tr
>
<td
id
=
"left"
>
1</
td
>
<td
id
=
"central"
>
2</
td
>
<td
id
=
"right"
>
3</
td
>
</
tr
>
</
table
>
1
2
3
Выполнение:
</
head
>
<body
>
<table
id
=
"maket"
cellspacing
=
"0"
>
<tr
>
<td
id
=
"left"
>
1</
td
>
<td
id
=
"central"
>
2</
td
>
<td
id
=
"right"
>
3</
td
>
</
tr
>
</
table
>
1
2
3
Результат будет примерно такой же, только «растягивание» будет происходит за счет центральной колонки.Использование вложенной таблицы в резиновом макете
1
2
3
Результат:
Как создать таблицу CSS
Столбцы и их группировка
Стек таблицы CSS
Алгоритм шаблона таблицы
Рамки таблицы CSS
Нужно ли использовать таблицы CSS?
Заключение
width и height
. Значения устанавливаются в любых единицах длины CSS, но зачастую используются пиксели (px
) и проценты (%
). Последние настраивают ширину относительно родительского элемента, первые же задают абсолютную величину.
caption-side
border-collapse
border-spacing
empty-cells
table-layout
Пример оформления таблицы
Цены 2014
2015 2016
Хлеб 16
18 21
Сахар 35
44 50
Соль 8
8,50 9
Рекомендуем
Posts from This Journal by “Ламповый звук” Tag Что такое "качественный звук"
