Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-26

1 <p>Ещё несколько лет назад фронтенд-разработчики активно использовали табличную вёрстку для создания веб-страниц. Сегодня появились более удобные инструменты, а тег <table> теперь применяется по прямому назначению: для создания таблиц с данными. Однако оформлять таблицы по-прежнему не так просто. Некоторые CSS-свойства, например, margin, border-radius, z-index, не работают с элементами таблиц <tbody>, <thead>, <tr>. Статья поможет обойти эти ограничения.</p>

2 <h2>Содержание</h2>

3 <ul><li><a>Структура таблицы</a></li>

4 <li><a>Что не так с margin и как оформить отступы для элементов таблицы</a></li>

5 <li><a>Как применить к элементам таблицы border-radius</a></li>

6 <li><a>Как оформлять ячейки таблицы</a></li>

7 <li><a>Как применять z-index к элементам таблицы</a></li>

8 <li><a>Заключение</a></li>

9 </ul><h2>Структура таблицы</h2>

10 <p><em>Эталонный вариант таблицы</em></p>

11 <p>Иллюстрация выше показывает, как можно оформить таблицу с помощью CSS. Первый ряд выступает в качестве заголовка, а разделы таблицы обозначены подзаголовками.</p>

12 <p>Выше представлена структура таблицы в HTML. В <thead> содержится главное название. В таблице есть несколько секций <tbody>, каждая из которых имеет собственный подзаголовок.</p>

13 <h2>Что не так с margin и как оформить отступы для элементов таблицы</h2>

14 <p>Как видно на иллюстрации в начале статьи, между главным заголовком и секцией <tbody>, а также между остальными секциями <tbody>, есть отступы. Можно подумать, что они определяются свойствами margin-top для <tbody>, но это не так.</p>

15 <p>Если попытаться использовать margin-top для оформления <tbody>, <thead> или <tr>, добиться отступов не удастся. Чтобы margin заработали, можно изменить свойство display, которое менять опасно, так как изменения могут нарушить форматирование таблицы. Поэтому лучше воспользоваться альтернативными решениями, которые описаны ниже.</p>

16 <h3>Свойство border</h3>

17 <p>Самый простой способ получить отступы без использования margin - применить к <tbody> border-top: 1 em.</p>

18 <p>Все секции <tbody>, у которых должны быть отступы, имеют класс .section. Чтобы свойство border-top сработало, необходимо применить к таблице border-collapse: collapse.</p>

19 <h3>Псевдоэлементы ::before и ::after</h3>

20 <p>Псевдоэлементы ::before и ::after - ещё один способ добавить отступы для элементов таблицы.</p>

21 <p>В данном случае создаётся пустой ряд, который обеспечивает визуальный отступ между секциями <tbody>.</p>

22 <p>Вы можете использовать для оформления отступов как псевдоэлементы, так и свойство border.</p>

23 <h2>Как применить к элементам таблицы border-radius</h2>

24 <p>Задача: добавить к секциям <tbody> границы и применить к ним border-radius. Напрямую это сделать невозможно - border и border-radius не работают с <tbody>.</p>

25 <p>Пример выше показывает, как с помощью box-shadow добиться практически такого же результата, как с помощью border при работе с нетабличными элементами.</p>

26 <h2>Как оформлять ячейки таблицы</h2>

27 <p>Внешний вид текущей таблицы (см. иллюстрацию ниже) отличается от эталонного варианта, который представлен в начале статьи.</p>

28 <p><em>Нужны марджины, а не паддинги</em></p>

29 <p>После добавления границ можно заметить, что полученные отступы работают не как "марджины", а как "паддинги". Это можно изменить, если работать с границами ячеек и использовать селекторы :first-child и :last-child.</p>

30 <p>В примере выше стили применяются к соответствующим элементам th и td ячеек таблицы. К ячейкам, которые находятся в углах таблицы, применяется border-radius. Все ячейки, которые находятся по краям таблицы, имеют границы. Селекторы :first-child и :last-child позволяют обращаться к нужным ячейкам.</p>

31 <h2>Как применять z-index к элементам таблицы</h2>

32 <p><em>Проблемы с box-shadow</em></p>

33 - <p>На первой иллюстрации в статье видно, что свойство box-shadow применяется к подзаголовкам, поэтому тени попадают на следующие ниже ряды таблицы. Если попробовать прямо применить box-shadow к соответствующему элементу, тень в рядах не появится.</p>

33 + <p>На первой иллюстрации в статье видно, что свойство box-shadow применяется к подзаголовкам, поэтому тени попадают на след��ющие ниже ряды таблицы. Если попробовать прямо применить box-shadow к соответствующему элементу, тень в рядах не появится.</p>

34 <p>В обычной ситуации можно использовать для решения таких проблем z-index. Но с таблицами всё сложнее: z-index не работает с <tbody>. Проблема решается, если вы знаете, как работать с контекстом наложения. Если применить к элементу position: relative и z-index, появляется новый контекст наложения. Также эту задачу можно решить с помощью transform: translate (0, 0).</p>

35 <h2>Заключение</h2>

36 <p>Чтобы сделать таблицы визуально привлекательными, приходится использовать неочевидные трюки CSS. Но этим и хороши CSS - с их помощью можно решить практически любую задачу по оформлению веб-элементов.</p>

37 <p>При работе с таблицами возникает соблазн переопределить свойство display. Но это приведёт к дополнительным сложностям: придётся вручную определять ширину ячеек, чтобы таблица нормально отображалась. Поэтому удобнее пользоваться предложенными выше трюками, которые позволяют оформлять таблицы элегантно и без лишнего кода.</p>

38 <p><em>Адаптированный перевод статьи<a>Styling HTML Tables: How to Apply Margins, Borders and z-index on Table Elements</a>by Markus Oberlehner. Мнение автора оригинальной публикации может не совпадать с мнением администрации "Хекслета".</em></p>