как работать с полями, границами и свойством z-index
Время чтения статьи ~6 минут
Ещё несколько лет назад фронтенд-разработчики активно использовали табличную вёрстку для создания веб-страниц. Сегодня появились более удобные инструменты, а тег <table> теперь применяется по прямому назначению: для создания таблиц с данными. Однако оформлять таблицы по-прежнему не так просто. Некоторые CSS-свойства, например, margin, border-radius, z-index, не работают с элементами таблиц <tbody>, <thead>, <tr>. Статья поможет обойти эти ограничения.
- Структура таблицы
- Что не так с margin и как оформить отступы для элементов таблицы
- Свойство border
- Псевдоэлементы ::before и ::after
- Как применить к элементам таблицы border-radius
- Как оформлять ячейки таблицы
- Как применять z-index к элементам таблицы
- Заключение
Структура таблицы
Иллюстрация выше показывает, как можно оформить таблицу с помощью CSS.
Первый ряд выступает в качестве заголовка, а разделы таблицы обозначены подзаголовками.
<table>
<thead>
<tr>
<th>MO</th>
<th>TU</th>
<th>WE</th>
<th>TH</th>
<th>FR</th>
<th>SA</th>
<th>SU</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="7">
Working hours
</th>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>5</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="7">
Workout
</th>
</tr>
<tr>
<td>0.5</td>
<td>0.5</td>
<td>0.5</td>
<td>1</td>
<td>0.
5</td>
<td>2</td>
<td>0</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="7">
Total
</th>
</tr>
<tr>
<td>8.5</td>
<td>8.5</td>
<td>9.5</td>
<td>10</td>
<td>5.5</td>
<td>2</td>
<td>0</td>
</tr>
</tbody>
</table>
5</td>
<td>2</td>
<td>0</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="7">
Total
</th>
</tr>
<tr>
<td>8.5</td>
<td>8.5</td>
<td>9.5</td>
<td>10</td>
<td>5.5</td>
<td>2</td>
<td>0</td>
</tr>
</tbody>
</table>
Выше представлена структура таблицы в HTML. В <thead> содержится главное название. В таблице есть несколько секций <tbody>, каждая из которых имеет собственный подзаголовок.
Что не так с
margin и как оформить отступы для элементов таблицыКак видно на иллюстрации в начале статьи, между главным заголовком и секцией <tbody>, а также между остальными секциями <tbody>, есть отступы. Можно подумать, что они определяются свойствами margin-top для <tbody>, но это не так.
Если попытаться использовать margin-top для оформления <tbody>, <thead> или <tr>, добиться отступов не удастся. Чтобы margin заработали, можно изменить свойство display, которое менять опасно, так как изменения могут нарушить форматирование таблицы. Поэтому лучше воспользоваться альтернативными решениями, которые описаны ниже.
Свойство
borderСамый простой способ получить отступы без использования margin — применить к <tbody> border-top: 1 em.
// Это нужно, чтобы работал border-top
.table {
border-collapse: collapse; // 1
border-spacing: 0;
}
.section {
border-top: 1em solid transparent;
}
Все секции <tbody>, у которых должны быть отступы, имеют класс .section. Чтобы свойство border-top сработало, необходимо применить к таблице border-collapse: collapse.
Псевдоэлементы
::before и ::afterПсевдоэлементы ::before и ::after — ещё один способ добавить отступы для элементов таблицы.
.section::before {
height: 1em;
display: table-row;
content: '';
}
В данном случае создаётся пустой ряд, который обеспечивает визуальный отступ между секциями <tbody>.
Вы можете использовать для оформления отступов как псевдоэлементы, так и свойство border.
Как применить к элементам таблицы
border-radiusЗадача: добавить к секциям <tbody> границы и применить к ним border-radius. Напрямую это сделать невозможно — border и border-radius не работают с <tbody>.
// 1. Приходится использовать свойство box-shadow
// border-radius не работает с <tbody>.
.section-step {
border-radius: 0.25em; // 1
box-shadow: 0 0 0 1px #ccc; // 1
}
Пример выше показывает, как с помощью box-shadow добиться практически такого же результата, как с помощью border при работе с нетабличными элементами.
Как оформлять ячейки таблицы
Внешний вид текущей таблицы (см. иллюстрацию ниже) отличается от эталонного варианта, который представлен в начале статьи.
Нужны марджины, а не паддинги
После добавления границ можно заметить, что полученные отступы работают не как «марджины», а как «паддинги». Это можно изменить, если работать с границами ячеек и использовать селекторы :first-child и :last-child.
.section-step th,
.section-step td {
border: 0 solid #ccc;
}
.section-step th:first-child,
.section-step td:first-child {
border-left-width: 1px;
}
.section-step th:last-child,
.section-step td:last-child {
border-right-width: 1px;
}
.section-step tr:first-child th,
.section-step tr:first-child td {
border-top-width: 1px;
}
.section-step tr:first-child th:first-child,
.section-step tr:first-child td:first-child {
border-top-left-radius: 0.25em;
}
.section-step tr:first-child th:last-child,
.section-step tr:first-child td:last-child {
border-top-right-radius: 0. 25em;
}
.section-step tr:last-child th,
.section-step tr:last-child td {
border-bottom-width: 1px;
}
.section-step tr:last-child th:first-child,
.section-step tr:last-child td:first-child {
border-bottom-left-radius: 0.25em;
}
.section-step tr:last-child th:last-child,
.section-step tr:last-child td:last-child {
border-bottom-right-radius: 0.25em;
}
25em;
}
.section-step tr:last-child th,
.section-step tr:last-child td {
border-bottom-width: 1px;
}
.section-step tr:last-child th:first-child,
.section-step tr:last-child td:first-child {
border-bottom-left-radius: 0.25em;
}
.section-step tr:last-child th:last-child,
.section-step tr:last-child td:last-child {
border-bottom-right-radius: 0.25em;
}
В примере выше стили применяются к соответствующим элементам th и td ячеек таблицы. К ячейкам, которые находятся в углах таблицы, применяется border-radius. Все ячейки, которые находятся по краям таблицы, имеют границы. Селекторы :first-child и :last-child позволяют обращаться к нужным ячейкам.
Как применять
z-index к элементам таблицыПроблемы с box-shadow
На первой иллюстрации в статье видно, что свойство box-shadow применяется к подзаголовкам, поэтому тени попадают на следующие ниже ряды таблицы.
Если попробовать прямо применить box-shadow к соответствующему элементу, тень в рядах не появится.
В обычной ситуации можно использовать для решения таких проблем z-index. Но с таблицами всё сложнее: z-index не работает с <tbody>. Проблема решается, если вы знаете, как работать с контекстом наложения. Если применить к элементу position: relative и z-index, появляется новый контекст наложения. Также эту задачу можно решить с помощью transform: translate (0, 0).
Заключение
Чтобы сделать таблицы визуально привлекательными, приходится использовать неочевидные трюки CSS. Но этим и хороши CSS — с их помощью можно решить практически любую задачу по оформлению веб-элементов.
При работе с таблицами возникает соблазн переопределить свойство display. Но это приведёт к дополнительным сложностям: придётся вручную определять ширину ячеек, чтобы таблица нормально отображалась.
Поэтому удобнее пользоваться предложенными выше трюками, которые позволяют оформлять таблицы элегантно и без лишнего кода.
Адаптированный перевод статьи Styling HTML Tables: How to Apply Margins, Borders and z-index on Table Elements by Markus Oberlehner. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».
Оформление списков и таблиц при помощи CSS. | Учебно-методический материал:
Инструкционно-технологическая карта №9
Тема: Оформление списков и таблиц при помощи CSS.
Цель: научиться осуществлять оформление списков и таблиц при помощи css и фреймворка Bootstrap.
Оборудование: персональный компьютер с выходом в Интернет, MS Word, Блокнот, инструкционно-технологическая карта №9.
Время выполнения: 2 часа.
Теоретическая часть к практической работе
Оформление таблиц с помощью CSS классов Bootstrap
Базовое оформление таблиц
Для придания таблицы базового оформления необходимо добавить класс .
table к элементу table:
Например:
| № п/п | Имя | Фамилия | |
|---|---|---|---|
| 1 | Иван | Чмель | [email protected] |
| 2 | Петр | Щербаков | [email protected] |
| 3 | Юрий | Голов | [email protected] |
Bootstrap 3 — оформление таблицы с помощью класса table
Оформление таблиц по типу полос «зебры»
Для выделения нечётных строк основной части таблицы (
…) с помощью тёмного фона добавьте дополнительно класс .table-striped к классу .table.Внимание: Для оформления таблиц по типу полос «зебры» в Twitter Bootstrap 3 используется селектор :nth-child, который не поддерживается в браузере Internet Explorer 8.
Например:
| № п/п | Имя | Фамилия | |
|---|---|---|---|
| 1 | Иван | Чмель | [email protected] |
| 2 | Петр | Щербаков | [email protected] |
| 3 | Юрий | Голов | [email protected] |
Bootstrap 3 — оформление таблицы с помощью класса table-striped
Создание таблицы с границами
Также вы можете добавлять границы для всех ячеек таблицы, просто добавив дополнительный класс Bootstrap .table-bordered к базовому классу .table.
| № п/п | Имя | Фамилия | |
|---|---|---|---|
| 1 | Иван | Чмель | ivan@mail. ru |
| 2 | Петр | Щербаков | [email protected] |
| 3 | Юрий | Голов | [email protected] |
Выше приведенный пример будет выглядеть примерно так:
№ п/п Имя Фамилия E-mail
1 Иван Чмель [email protected]
2 Петр Щербаков [email protected]
3 Юрий Голов [email protected]
Создание таблицы с интересным режимом (подсвечивание строк при наведении на них курсора)
Что бы включить подсвечивание строк таблицы, Вам необходимо добавить класс .table-hover к базовому классу .table элемента
| № п/п | Имя | Фамилия | |
|---|---|---|---|
| 1 | Иван | Чмель | ivan@mail. ru |
| 2 | Петр | Щербаков | [email protected] |
| 3 | Юрий | Голов | [email protected] |
Выше приведенный пример будет выглядеть примерно так:
№ п/п Имя Фамилия E-mail
1 Иван Чмель [email protected]
2 Петр Щербаков [email protected]
3 Юрий Голов [email protected]
Создание сжатой или компактной таблицы
Вы можете также сделать свои таблицы более компактными посредством добавления дополнительного класса .table-condensed к базовому классу .table. Класс .table-condensed делает таблицу компактной за счет уменьшения отступов в ячейках наполовину.
| № п/п | Имя | Фамилия | |
|---|---|---|---|
| 1 | Иван | Чмель | ivan@mail. ru |
| 2 | Петр | Щербаков | [email protected] |
| 3 | Юрий | Голов | [email protected] |
Выше приведенный пример будет выглядеть примерно так:
Bootstrap 3 — Создание сжатой или компактной таблицы
Дополнительные акцентные классы для строк таблицы
Существуют вспомогательные классы, которые позволяют выделить строку или отдельные ячейки различным цветом посредством окраски их фона.
| № чека | Способ платежа | Дата платежа | Сумма |
|---|---|---|---|
| 2803 | Наличные | 04. 08.2014 | 2005.00 |
| 2804 | Карта VISA | 04.08.2014 | 1270.00 |
| 2805 | Наличные | 05.08.2014 | 1356.50 |
| 2806 | Наличные | 05.08.2014 | 5200.05 |
| 2807 | Карта VISA | 06.08.2014 | 315.70 |
Вышеприведенный пример будет выглядеть примерно так:
Bootstrap 3 — Дополнительные акцентные классы для строк таблицы
Создание адаптивной таблицы с помощью Bootstrap
С помощью Twitter Bootstrap 3 Вы можете также создавать адаптивные таблицы, которые можно просматривать на маленьких устройствах (ширина экрана, у которых меньше 768px) с помощью полосы прокрутки.
При просмотре адаптивных таблиц на других устройствах, имеющих экран шириной, больше чем 768px полоса прокрутки будет отсутствовать.
| № п/п | Имя | Фамилия | Увлечения | |
|---|---|---|---|---|
| 1 | Иван | Чмель | [email protected] | Плавание, бодибилдинг, боевые искусства |
| 2 | Петр | Щербаков | [email protected] | Европейские танцы, Стрип-денс, Ролики |
| 3 | Юрий | Голов | yuri@mail. ru | Горный велосипед, скейтборд, катание на квадрацикле |
Табличные теги, поддерживаемые Twitter Bootstrap 3
В следующей таблице перечислены поддерживаемые табличные элементы HTML и их назначение.
Тег Описание
| Специальная табличная ячейка для заголовков столбцов | Табличная ячейка, предназначенная для размещения основных табличных данных Практическая часть Задание 1. Оформить таблицу с помощью CSS классов Bootstrap. (предварительно загрузив архив Bootstrap из приложения к практической работе, так же ознакомиться со ссылками-примерами работы с Bootstrap). Задание 2. Оформить список с помощью CSS классов Bootstrap. Контрольные вопросы
Методическая разработка мастер — класса Тема: Оформление текстового документа со вставкой таблицы.данная методическая разработка может быть использована в качестве работы с таблицами в текстовом редакторе WORD… Конспект урока по Информатике и ИКТ «Вставка и оформление таблиц»Данный материал может быть использован в преподавании Информатики как в школе, так и учреждениях СПО…. Открытый урок по информатике: «Форматирование ячеек, оформление таблиц».Открытый урок по информатике: «Форматирование ячеек, оформление таблиц». Педагогическая тема: «Использование технологий проблемного обучения на уроках информатики». Адаптирован… Методическая разработка урока «Решение задач с помощью электронных таблиц»Методическая разработка урока «Решение задач с помощью электронных таблиц». Инструкция для выполнения заданий по расчету загрузки (судна, вагона, контейнера) при помощи сводных таблиц в MS ExcelИнструкция для выполнения заданий по расчету загрузки (судна, вагона, контейнера) при помощи сводных таблиц в MS Excel… Практическое занятие 4. Составить прогноз товарооборота торгового предприятия на основе данных таблицы с помощью линии тренда, инструмента экспоненциальное сглаживание и т.д.Составить прогноз товарооборота торгового предприятия на основе данных таблицы с помощью линии тренда, инструмента экспоненциальное сглаживание и т.д…. Практическое занятие 5. Составить прогноз товарооборота торгового предприятия по данным таблицы с помощью функции ЛИНЕЙН, ТЕНДЕНЦИЯ и т.д.Составить прогноз товарооборота торгового предприятия по данным таблицы с помощью функции ЛИНЕЙН, ТЕНДЕНЦИЯ и т.д…. Поделиться: |
|---|
..Свойство размера вкладки CSS
❮ Назад Полное руководство по CSS Далее ❯
Пример
Установите ширину символа табуляции в 16 пробелов:
pre {-moz-tab-size: 16;} /* Firefox */
pre {tab-size: 16;}
Определение и использование
Свойство tab-size указывает ширину символа табуляции.
В HTML символ табуляции обычно отображается как один пробел, за исключением некоторых элементов, как