Мы с Вами рассмотрели множество методов стилизации таких элементов на странице как текстовая информация, ссылки, изображения, заголовки, но всего этого пока недостаточно. В своих статьях я часто применяю такие элементы HTML как таблицы, потому что они в большинстве случаев помогают систематизировать важную информацию и сделать её подачу более простой.
В этой статье я познакомлю Вас с тонкостями стилизации HTML таблиц, и вы узнаете новые свойства CSS, предназначенные для достижения этих целей.
Язык гипертекстовой разметки HTML предоставил нам большое количество возможностей, чтобы осуществить привязку CSS стилей к десяти уникальным тегам, предназначенных для работы с таблицами, предлагаю их повторить перед дальнейшим изучением:
| Тег | Описание |
|---|---|
| <table> | Определяет содержимое таблицы. |
| <caption> | Определяет наименование таблицы. |
| <th> | Определяет заголовочную ячейку таблицы. |
| <tr> | Определяет строку таблицы. |
| <td> | Определяет ячейку данных таблицы. |
| <thead> | Используется для содержания заголовка группы в таблице (шапка таблицы). |
| <tbody> | Используется для содержания “тела” таблицы. |
| <tfoot> | Используется для содержания “подвала” таблицы (футер). |
| <col> | Определяет заданные свойства столбцов для каждого столбца в пределах тега <colgroup>. |
| <colgroup> | Определяет группу столбцов в таблице. |
Работа с отступами в таблице
В статье «Блочная и строчная модель в CSS» мы научились применять внутренние и внешние отступы к текстовой информации, добавляя промежуток вокруг содержимого элементов. При работе с таблицами надо понимать, что добавить внутренний отступ (padding) вы сможете либо к её заголовку, либо к ее ячейкам, напрямую к тегу <table> добавить вы сможете только внешний отступ (margin):
<!DOCTYPE html> <html> <head> <title>Использование внутренних отступов в таблице</title> <style> table { margin: 0 auto; /* центруем по горизонитали внешними отступами */ } td, th { border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */ padding: 19px; /* устанавливаем внутренние отступы для всех сторон */ } caption { padding-bottom: 19px; /* устанавливаем внутренние отступы снизу для всех сторон */ } </style> </head> <body> <table> <caption>Отступы в таблице</caption> <tr> <th>1</th><th>2</th><th>3</th><th>4</th> </tr> <tr> <td>2</td><td></td><td></td><td></td> </tr> <tr> <td>3</td><td></td><td></td><td></td> </tr> <tr> <td>4</td><td></td><td></td><td></td> </tr> </table> </body> </html>
В данном примере мы:
- Разместили таблицу по центру, используя прием центровки по горизонитали внешними отступами (margin: 0 auto).
- Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1 пиксель шестнадцатеричным цветом #F50 и установили внутренние отступы размером 19 пикселей для всех сторон.
- Для наименования таблицы (тег <caption>) мы установили внутренний отступ снизу равный 19 пикселей. Надеюсь, Вас не смущают неровные числа 🙂
Результат нашего примера:
Промежуток между ячейками
После рассмотренного выше примера, вы могли заметить, что у нас остался промежуток между всеми ячейками таблицы. Давайте рассмотрим, как убрать промежуток между ячейками таблицы, либо его увеличить.
Чтобы задать расстояние между границами соседних ячеек необходимо использовать свойство CSS – border-spacing.
<!DOCTYPE html> <html> <head> <title>Изменение промежутка между таблицами</title> <style> table { vertical-align: top; /* верх элемента выравнивается по верху самого высокого элемента */ float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */ margin-right: 30px; /* устанавливаем внешние отступы справа */ } td, th { border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */ padding: 19px; /* устанавливаем внутренние отступы для всех сторон */ } caption { font-weight: bold; /* жирное начертание */ } .first { border-spacing: 30px 10px; /* промежуток между ячейками таблицы (первое значение - горизонтальный, второе вертикальный)*/ } .second { border-spacing: 0; /* промежуток между ячейками таблицы отсутствует */ } .third { border-spacing: 0.2em; /* промежуток между ячейками таблицы (горизонтальный и вертикальный) */ } </style> </head> <body> <table class = "first"> <caption>border-spacing: 30px 10px;</caption> <tr> <th>1</th><th>2</th><th>3</th> </tr> <tr> <td>2</td><td></td><td></td> </tr> <tr> <td>3</td><td></td><td></td> </tr> </table> <table class = "second"> <caption>border-spacing: 0;</caption> <tr> <th>1</th><th>2</th><th>3</th> </tr> <tr> <td>2</td><td></td><td></td> </tr> <tr> <td>3</td><td></td><td></td> </tr> </table> <table class = "third"> <caption>border-spacing:0.2em;</caption> <tr> <th>1</th><th>2</th><th>3</th> </tr> <tr> <td>2</td><td></td><td></td> </tr> <tr> <td>3</td><td></td><td></td> </tr> </table> </body> </html>
В данном примере мы:
- Сделали наши таблицы плавающими и сместили по левому краю (float: left). Если вы пропустили тему плавающих элементов, то вы всегда можете к ней вернуться в этом учебнике – «Плавающие элементы в CSS».
- Кроме того установили для таблиц внешний отступ справа равный 30px и установили вертикальное выравнивание таблиц (верх элемента выравнивается по верху самого высокого элемента). Мы еще вернемся к подробному рассмотрению этого свойства в этой статье.
- Установили для наименования таблицы (тег <caption>) – жирное начертание.
- Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 1 пиксель шестнадцатеричным цветом #F50 и установили внутренние отступы размером 19 пикселей для всех сторон.
- Для первой таблицы с классом .first мы установили промежуток между ячейками таблицы (свойство border-spacing) равный 30px 10px, для второй таблицы с классом .second равный нулю, для третей таблицы с классом .third равный 0.2em.
Обращаю Ваше внимание, что если в свойстве border-spacing указано только одно значение длины, то оно указывает интервалы, как по горизонтали, так и вертикали, а если указаны два значения длины, то первое определяет горизонтальное расстояние, а второе вертикальное.
Расстояние между границами соседних ячеек допускается указывать в единицах измерения CSS (px, cm, em и др). Отрицательные значения не допускаются.
Результат нашего примера:
Отображение границ вокруг ячеек таблицы
Вы можете сказать: – так, мы убрали промежуток между ячейками, используя свойство border-spacing со значением 0, но почему у нас теперь границы у ячеек то пересекаются?
Двойные границы образуются из-за того, что нижняя граница одной ячейки добавляется к верхней границе ячейки, которая находится под ней, аналогичная ситуация происходит по бокам ячеек и это логично с точки зрения отображения таблицы, но к счастью есть способ, сообщить браузеру, что мы не хотим видеть такое развязное поведение границ ячеек.
Для этого необходимо использовать CSS свойство border-collapse. Как не странно, но использование свойства border-collapse со значением collapse является лучшим способом как можно убрать промежуток между ячейками и при этом не получить двойных границ между ними.
Рассмотрим сравнение поведения границ при использовании свойства border-spacing со значением 0 и свойства border-collapse со значением collapse:
<!DOCTYPE html> <html> <head> <title>Пример отображения границ вокруг ячеек таблицы</title> <style> table { float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */ margin-right: 30px; /* устанавливаем внешние отступы справа */ } td, th { border: 5px solid #F50; /* задаем сплошную границу размером 5 пикселей цвета #F50 */ width: 50px; /* ширина ячеек */ height: 75px; /* высота ячеек */ } caption { font-weight: bold; /* жирное начертание */ } .first { border-spacing: 0; /* промежуток между ячейками таблицы отсутствует */ } .second { border-collapse: collapse; /* объединяем границы ячеек в одну */ } </style> </head> <body> <table class = "first"> <caption>border-spacing: 0;</caption> <tr> <th>1</th><th>2</th><th>3</th> </tr> <tr> <td>2</td><td></td><td></td> </tr> <tr> <td>3</td><td></td><td></td> </tr> </table> <table class = "second"> <caption>border-collapse: collapse;</caption> <tr> <th>1</th><th>2</th><th>3</th> </tr> <tr> <td>2</td><td></td><td></td> </tr> <tr> <td>3</td><td></td><td></td> </tr> </table> </body> </html>
В данном примере мы:
- Сделали наши таблицы плавающими и сместили по левому краю (float: left), установили для них внешний отступ справа равный 30px.
- Установили для наименования таблицы (тег <caption>) – жирное начертание.
- Для ячеек таблицы (заголовочные и ячейки данных) мы установили сплошную границу размером 5 пикселей шестнадцатеричным цветом #F50 и установили фиксированную ширину 50px и высоту 75 пикселей.
- Для первой таблицы с классом .first мы установили промежуток между ячейками таблицы равный нулю (border-spacing: 0;), а для второй таблицы с классом .second установили свойство border-collapse со значением collapse, которое объединяет границы ячеек в одну, когда это возможно.
Результат нашего примера:
Свойство border-collapse имеет всего два значения для отображения границ вокруг ячеек таблицы:
| Значение | Описание |
|---|---|
| separate | Отдельно стоящие границы (свойства border-spacing и empty-cells не будут игнорироваться). Это значение по умолчанию. |
| collapse | Границы объединяются в одну, когда это возможно (свойства border-spacing и empty-cells игнорируются). |
Обратите внимание, что когда мы используем свойство border-collapse со значением collapse такие свойства как border-spacing и empty-cells игнорируются (не употребляйте их одновременно)! Стоп, а что за empty-cells?
Поведение пустых ячеек
Силами CSS можно установить, следует ли отображать границы и фон пустых ячеек в таблице или нет. За это поведение отвечает свойство empty-cells, которое по умолчанию, как вы могли заметить из предыдущих примеров, отображает пустые ячейки.
Давайте перейдем к примеру:
<!DOCTYPE html> <html> <head> <title>Пример отображения пустых ячеек таблицы</title> <style> table { float: left; /* таблицы становятся плавающими элементами, смещенными по левому краю */ margin-right: 30px; /* устанавливаем внешние отступы справа */ } td, th { border: 1px solid #F50; /* задаем сплошную границу размером 1 пиксель цвета #F50 */ width: 75px; /* ширина ячеек */ height: 50px; /* высота ячеек */ background: wheat; /* задаем цвет заднего фона ячеек */ } caption { font-weight: bold; /* жирное начертание */ } .first { empty-cells: show; /* показывать пустые ячейки (по умолчанию) */ } .second { empty-cells: hide; /* скрывать пустые ячейки */ } </style> </head> <body> <table class = "first"> <caption>empty-cells: show;</caption> <tr> <th>1</th><th>2</th><th>3</th> </tr> <tr> <td>2</td><td></td><td>☺</td> </tr> <tr> <td>3</td><td>☺</td><td></td> </tr> </table> <table class = "second"> <caption>empty-cells: hide;</caption> <tr> <th>1</th><th>2</th><th>3</th> </tr> <tr> <td>2</td><td></td><td>☺</td> </tr> <tr> <td>3</td><td>☺</td><td></td> </tr> </table> </body> </html>
Понять, как действует свойство empty-cells из этого примера очень просто, если для него установлено значение hide, то пустые ячейки и фон в них будут скрыты, если установлено значение show (по умолчанию), то они будут отображаться.
Расположение заголовка таблицы
Давайте рассмотрим еще одно простое свойство для стилизации таблиц – caption-side, которое устанавливает расположение заголовка таблицы (над или под таблицей). По умолчанию свойство caption-side имеет значение top, которое помещает заголовок над таблицей. Для того, чтобы поместить заголовок под таблицу необходим использовать свойство со значение bottom.
Давайте рассмотрим пример использования этого свойства:
<!DOCTYPE html> <html> <head> <title>Пример использования свойства caption-side</title> <style> td, th { border: 1px solid blue; /* задаем сплошную границу размером 1 пиксель синего цвета */ } .topCaption { caption-side: top; /* заголовок таблицы находится над ней */ } .bottomCaption { caption-side: bottom; /* заголовок таблицы находится под ней */ } </style> </head> <body> <table class = "topCaption"> <caption>Заголовок над таблицей</caption> <tr> <th>Наименование</th><th>Цена</th> </tr> <tr> <td>Рыба</td><td>350 рублей</td> </tr> <tr> <td>Мясо</td><td>250 рублей</td> </tr> </table> <br> <table class = "bottomCaption"> <caption>Заголовок под таблицей</caption> <tr> <th>Наименование</th><th>Цена</th> </tr> <tr> <td>Рыба</td><td>350 рублей</td> </tr> <tr> <td>Мясо</td><td>250 рублей</td> </tr> </table> </body> </html>
В данном примере мы создали два класса, которые управляют расположением заголовка таблицы. Первый класс (.topCaption) помещает заголовок таблицы над ней, мы применили его к первой таблице, а второй класс (.bottomCaption) помещает заголовок таблицы под ней, мы применили его ко второй таблице. Класс .topCaption имеет значение свойства caption-side по умолчанию и создан для демонстрации.
Результат нашего примера:
Горизонтальное и вертикальное выравнивание
В большинстве случаев при работе с таблицами вам придется настраивать выравнивание содержимого внутри заголовочных ячеек и ячеек данных. Свойство text-align применяется для горизонтального выравнивания по аналогии с любой текстовой информацией. Применение этого свойства для текста мы рассматривали ранее в статье «Форматирование текста в CSS».
Чтобы установить выравнивание для содержимого в ячейках, необходимо использовать специальные ключевые слова со свойством text-align. Рассмотрим применение ключевых слов этого свойства на следующем примере.
<!DOCTYPE html> <html> <head> <title>Пример горизонтального выравнивания в таблице</title> <style> table { border-collapse: collapse; /* объединяем границы ячеек в одну */ } td, th { border: 1px solid; /* задаем сплошную границу размером 1 пиксель */ } .left { text-align: left; /* выравнивает текст ячейки влево */ } .right { text-align: right; /* выравнивает текст ячейки вправо */ } .center { text-align: center; /* выравнивает текст ячейки по центру */ } .justify { text-align: justify; /* выравнивает текст ячейки по ширине */ } </style> </head> <body> <table> <tr> <th>Значение</th><th>Описание</th> </tr> <tr class = "left"> <td>left</td><td>Выравнивает текст ячейки влево. Это значение по умолчанию (если направление текста слева направо).</td> </tr> <tr class = "right"> <td>right</td><td>Выравнивает текст ячейки вправо. Это значение по умолчанию (если направление текста справа налево).</td> </tr> <tr class = "center"> <td>center</td><td>Выравнивает текст ячейки по центру.</td> </tr> <tr class = "justify"> <td>justify</td><td>Растягивает линии так, что каждая линия имеет одинаковую ширину (растягивает текст ячейки по ширине).</td> </tr> </table> </body> </html>
В этом примере мы создали четыре класса, которые задают различное горизонтальное выравнивание в ячейках и применили их по порядку к строкам таблицы. Значение в ячейке соответствует значению свойства text-align, которое было применено к этой строке.
Результат нашего примера:
Кроме горизонтального выравнивания вы также можете определить и вертикальное выравнивание в ячейках таблицы с помощью свойства vertical-align.
Обращаю Ваше внимание, что при работе с ячейками таблицы применяются только следующие значения* этого свойства:
| Значение | Описание |
|---|---|
| baseline | Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию. |
| top | Выравнивает содержимое ячейки вертикально по верхнему краю. |
| middle | Выравнивает содержимое ячейки вертикально по середине. |
| bottom | Выравнивает содержимое ячейки вертикально по нижнему краю. |
* – Значения sub, super, text-top, text-bottom, length и %, примененные к ячейке таблицы будут вести себя как при использовании значения baseline.
Рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <title>Пример вертикального выравнивания в таблице</title> <style> table { border-collapse: collapse; /* объединяем границы ячеек в одну */ } td, th { border: 1px solid; /* задаем сплошную границу размером 1 пиксель */ height: 55px; /* задаем высоту ячеек */ } .baseline { vertical-align: baseline; /* выравнивает базовую линию ячейки по базовой линии родителя */ } .top { vertical-align: top; /* выравнивает содержимое ячейки вертикально по верхнему краю */ } .middle { vertical-align: middle; /* выравнивает содержимое ячейки вертикально по середине */ } .bottom { vertical-align: bottom; /* выравнивает содержимое ячейки вертикально по нижнему краю */ } </style> </head> <body> <table> <tr> <th>Значение</th><th>Описание</th> </tr> <tr class = "baseline"> <td>baseline</td><td>Выравнивает базовую линию ячейки по базовой линии родителя. Это значение по умолчанию.</td> </tr> <tr class = "top"> <td>top</td><td>Выравнивает содержимое ячейки вертикально по верхнему краю.</td> </tr> <tr class = "middle"> <td>middle</td><td>Выравнивает содержимое ячейки вертикально по середине.</td> </tr> <tr class = "bottom"> <td>bottom</td><td>Выравнивает содержимое ячейки вертикально по нижнему краю.</td> </tr> </table> </body> </html>
В этом примере мы создали четыре класса, которые задают различное вертикальное выравнивание в ячейках и применили их по порядку к строкам таблицы. Значение в ячейке соответствует значению свойства vertical-align, которое было применено к этой строке.
Алгоритм размещения макета таблицы браузером
В CSS по умолчанию используется алгоритм автоматического размещения макета таблицы браузером. В этом случае ширина столбца задается самым широким неразрывным содержимым ячейки. Данный алгоритм может быть в некоторых случаях медленным, так как браузер должен прочитать все содержимое в таблице, прежде чем определить её окончательный макет.
Чтобы изменить тип размещения макета таблицы браузером с автоматического на фиксированный, необходимо использовать CSS свойство table-layout со значением fixed.
В этом случае горизонтальное размещение зависит только от ширины таблицы и ширины столбцов, а не от содержимого ячеек. Браузер начинает отображать таблицу сразу после того, как получена первая строка. Как следствие, фиксированный алгоритм, позволяет создавать макет такой таблицы быстрее, чем используя автоматический вариант. При работе с большими таблицами в целях увеличения производительности вы можете использовать фиксированный алгоритм.
Давайте рассмотрим применение этого свойства на следующем примере:
<!DOCTYPE html> <html> <head> <title>Пример использования свойства table-layout</title> <style> table { width: 50%; /* задаем ширину таблицы */ word-wrap: break-word; /* слово может быть прервано в произвольном месте */ } td, th { border: 1px solid Chocolate; /* задаем сплошную границу размером 1 пиксель цвета шоколад */ } .test { table-layout: auto; /* автоматический алгоритм размещения макета таблицы браузером (по умолчанию) */ } .test2 { table-layout: fixed; /* фиксированный алгоритм размещения макета таблицы браузером */ } </style> </head> <body> <table class = "test"> <caption>table-layout: auto;</caption> <tr> <th>Наименование</th><th>2009</th><th>2010</th><th>2011</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th> </tr> <tr> <td>Пшеница</td><td>125</td><td>215</td><td>2540</td><td>33287</td><td>695878</td><td>1222222</td><td>125840000</td><td>125</td> </tr> </table> <table class = "test2"> <caption>table-layout: fixed;</caption> <tr> <th>Наименование</th><th>2009</th><th>2010</th><th>2011</th><th>2012</th><th>2013</th><th>2014</th><th>2015</th><th>2016</th> </tr> <tr> <td>Пшеница</td><td>125</td><td>215</td><td>2540</td><td>33287</td><td>695878</td><td>1222222</td><td>125840000</td><td>125</td> </tr> </table> </body> </html>
В данном примере мы:
- К одной и той же таблице применили различные алгоритмы размещения макета таблицы браузером. Для первой таблицы мы использовали автоматический алгоритм (auto). Обратите внимание, что при этом размер таблицы стал больше заданного значения в 50% от родительского элемента (произошло переполнение).
- Кроме того мы использовали для таблиц новое для вас свойство word-wrap
, которое указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов). Значение break-word указывает, что слово может быть прервано в произвольном месте, если нет допустимой точки для разрыва. - Для второй таблицы был использован фиксированный алгоритм (fixed) размещения макета таблицы браузером. Как вы можете заметить размер таблицы соответствует заданным нами значениям ширины в процентах, а числа прерваны в произвольных местах, чтобы не произошло переполнение. Если бы мы не использовали свойство word-wrap, то ширина второй таблицы бы не изменилась, но числа переполнили бы ячейки (вышли из ячеек).
Стилизация строк и столбцов таблицы
Мы с Вами частично уже затрагивали методы стилизации строк и столбцов таблицы в статье «Селекторы. Часть 3.». В этой статье мы рассматривали применение группового псевдокласса :nth-child
, который позволяет чередовать стили строк в таблицах с использованием значений even (четный) и odd (нечетный), либо по элементарной математической формуле.
Давайте повторим ранее рассмотренные методы и познакомимся с новыми способами стилизации строк и столбцов в таблицах. Перейдем к примерам.
<!DOCTYPE html> <html> <head> <title>Пример использования псевдокласса :nth-child с таблицами</title> <style> table { width: 100%; /* задаем ширину таблицы */ border-collapse: collapse; /* объединяем границы ячеек в одну */ } td, th { border: 1px solid; /* задаем сплошную границу размером 1 пиксель */ } tr:nth-child(even) { /* выбираем все четные строки */ border: 3px solid red; /* задаем сплошную границу размером 3 пикселя красного цвета */ } td:nth-child(4n+2) { /* выбираем каждый четвертый элемент, начиная со второго */ background: #E8E8FF; /* задаем цвет заднего фона */ } </style> </head> <body> <table> <tr> <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th> <th>8</th><th>9</th><th>10</th><th>11</th><th>12</th><th>13</th><th>14</th> </tr> <tr> <td>2</td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td>3</td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> <tr> <td>4</td><td></td><td></td><td></td><td></td><td></td><td></td> <td></td><td></td><td></td><td></td><td></td><td></td><td></td> </tr> </table> </body> </html>
В данном примере мы:
Результат нашего примера:
Перейдем к следующему примеру, в котором рассмотрим варианты стилизации строк таблицы.
<!DOCTYPE html> <html> <head> <title>Пример стилизации строк в таблицах</title> <style> table { width: 100%; /* задаем ширину таблицы */ border-collapse: collapse; /* объединяем границы ячеек в одну */ } td, th { border: 1px solid; /* задаем сплошную границу размером 1 пиксель */ } tfoot { background-color: coral; /* задаем цвет заднего фона */ } thead { background-color: silver; /* задаем цвет заднего фона */ } tbody tr:hover { /* стилизуем элемент, на который в данный момент указывает курсор мыши */ background-color: khaki; /* задаем цвет заднего фона */ } </style> </head> <body> <table> <thead> <tr> <th>Услуга</th><th>Стоимость</th> </tr> </thead> <tfoot> <!-- Тег <tfoot> применяется для создания "подвала" таблицы. Его принято писать после закрывающего тега </thead>, но отображается он в самом низу таблицы. --> <tr> <td>Сумма</td><td>15 000</td> </tr> </tfoot> <tbody> <tr> <td>1</td><td>1 000</td> </tr> <tr> <td>2</td><td>2 000</td> </tr> <tr> <td>3</td><td>3 000</td> </tr> <tr> <td>4</td><td>4 000</td> </tr> <tr> <td>5</td><td>5 000</td> </tr> </tbody> </table> </body> </html>
В этом примере мы:
- Установили ширину таблицы в 100% от ширины родительского элемента, для заголовочных и ячеек данных установили сплошную границу шириной 1px .
- Установили для элемента <tfoot> («подвал» таблицы) цвет заднего фона – coral, для элемента <thead> («шапка» таблицы) установили цвет заднего фона silver.
- Для элементов <tr>, которые находятся внутри элемента <tbody> (тело таблицы) установили изменение цвета заднего фона при наведении (псевдокласс :hover) c белого на цвет khaki (подсвечивается вся строка).
Результат нашего примера:
Следующий пример рассматривает применение скругления углов к ячейкам таблицы (свойство border-radius).
<!DOCTYPE html> <html> <head> <title>Пример скругления углов ячейки</title> <style> table { margin: 0 auto; /* центруем по горизонитали внешними отступами */ } th { width: 50px; /* задаем ширину ячейки */ height: 50px; /* задаем высоту ячейки */ border: 5px solid transparent; /* устанавливаем сплошную прозрачную границу размером 5 пикселей */ } th:hover { /* стилизуем элемент, на который в данный момент указывает курсор мыши */ background: blue; /* задаем цвет заднего фона */ color: orange; /* устанавливаем цвет текста */ border-radius: 100%; /* задаем радиус скругления */ border: 5px solid orange; /* устанавливаем сплошную границу размером 5 пикселей оранжевого цвета */ } </style> </head> <body> <table> <tr> <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th> </tr> </table> </body> </html>
В этом примере мы:
- Отцентровали таблицу внешними отступами, задали для заголовочных ячеек ширину и высоту 50px, указали прозрачную границу 5 пикселей.
- Установили, что при наведении (псевдокласс :hover) на заголовочную ячейку она получает задний фон синего цвета, оранжевый цвет текста, границу оранжевого цвета 5 пикселей и радиус скругления 100%.
- Прозрачная граница необходима для того, чтобы зарезервировать место под границу, которая будет отображена при наведении, если этого не сделать таблица будет «прыгать».
Результат нашего примера:
Следующий пример затрагивает использование HTML элементов <colgroup> и <col> и их стилизации.
<!DOCTYPE html> <html> <head> <title>Пример подсветки колонок таблицы</title> <style> table { width: 100%; /* задаем ширину таблицы */ border-collapse: collapse; /* объединяем границы ячеек в одну */ } td, th { border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */ width: 25%; /* задаем ширину ячеек */ } col:first-child { background: rgba(0,0,0,.3); /* задаем цвет заднего фона */ } col:nth-of-type(2) { background: rgba(0,0,0,.2); /* задаем цвет заднего фона */ } col:last-child { background: rgba(0,0,0,.1); /* задаем цвет заднего фона */ } </style> </head> <body> <table> <colgroup> <col> <col> <col span = "2"> <!-- объединяем два столбца в одну колонну (атрибут span="2") --> </colgroup> <tr> <th>№ заявки</th><th>Услуга</th><th>Цена, руб.</th><th>Итого</th> </tr> <tr> <td>1</td><td>Пение</td><td>6 000</td><td>6 000</td> </tr> <tr> <td>2</td><td>Мытье</td><td>2 000</td><td>2 000</td> </tr> <tr> <td>3</td><td>Уборка</td><td>1 000</td><td>1 000</td> </tr> <tr> <td>4</td><td>Нытьё</td><td>1 500</td><td>1 500</td> </tr> <tr> <td>5</td><td>Чтение</td><td>3 000</td><td>3 000</td> </tr> </table> </body> </html>
В этом примере мы:
- Устанавливаем, что наша таблица занимает 100% от родительского элемента, ячейки таблицы занимают 25% от родительского элемента и имеют сплошную границу 1 пиксель зеленого цвета. Промежуток между ячейками мы убрали, используя свойство border-collapse со значением collapse.
- К сожалению, единственное, что пока можно сделать с элементом <col>, используя css, это задать цвет заднего фона и определить через HTML, сколько он занимает колонок таблицы. В этом примере мы создали группу из трех колонок, третья из них при этом занимает 2 столбца (атрибут span элемента <col> со значением “2”).
- Используем псевдокласс :first-child, который выбирает первый дочерний элемент <col> своего родителя (<colgroup>) и задаем ему задний фон.
- Используем псевдокласс :nth-of-type(2) в котором указан элемент, который является заданным дочерним элементом своего родительского элемента (второй элемент <col>) и задаем ему задний фон.
- По аналогии с псевдоклассом :first-child, который выбирает первый дочерний элемент, используем псевдокласс :last-child и выбираем последний дочерний элемент <col> своего родителя (<colgroup>), благодаря которому мы стилизуем третью и четвертую колонку.
Результат нашего примера:
Ну и заключительный пример, который довольно сложен для понимания и требует продвинутых знаний в CSS, так как затрагивает будущие темы, планируемые к подробному изучению в рамках этого курса.
В предыдущем примере мы поняли, что к HTML элементу <col> можно применить только одно CSS свойство – цвет заднего фона (background-color), но при этом задать цвет заднего фона при наведении (псевдокласс :hover) на этот элемент напрямую нельзя. В этом примере мы рассмотрим, как подсветить столбец таблицы, используя только CSS.
<!DOCTYPE html> <html> <head> <title>Пример подсветки колонок и строк таблицы при наведении</title> <style> table { width: 100%; /* задаем ширину таблицы */ border-collapse: collapse; /* объединяем границы ячеек в одну */ position: relative; /* элемент с относительным позиционированием */ } td, th { border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */ width: 25%; /* задаем ширину ячеек */ height: 45px; /* задаем высоту ячеек */ } tr:hover:not(:first-child) { /* стилизуем элемент, на который в данный момент указывает курсор мыши (но не строка с заголовочными ячейками) */ background: lime; /* задаем цвет заднего фона */ } td:hover:after { /* стилизуем элемент, на который в данный момент указывает курсор мыши и добавляем содержимое после каждого такого элемента */ content: ''; /* добавляем наше содержимое */ display: block; /* отображает элемент как блочный элемент */ position: absolute; /* элемент с абсолютным позиционированием */ width: 25%; /* задаем ширину блока, который будет появляться */ top: 0; /* определяем смещение позиционированного элемента относительно верхнего края */ bottom: 0; /* определяем смещение позиционированного элемента относительно нижнего края */ background: forestgreen; /* задаем цвет заднего фона */ z-index: -1; /* определяем порядок наложения элемента по оси z */ } </style> </head> <body> <table> <tr> <th>№ заявки</th><th>Услуга</th><th>Цена, руб.</th><th>Итого</th> </tr> <tr> <td>1</td><td>Пение</td><td>6 000</td><td>6 000</td> </tr> <tr> <td>2</td><td>Мытье</td><td>2 000</td><td>2 000</td> </tr> <tr> <td>3</td><td>Уборка</td><td>1 000</td><td>1 000</td> </tr> <tr> <td>4</td><td>Нытьё</td><td>1 500</td><td>1 500</td> </tr> <tr> <td>5</td><td>Чтение</td><td>3 000</td><td>3 000</td> </tr> </table> </body> </html>
В этом примере мы:
- Устанавливаем, что наша таблица занимает 100% от родительского элемента, ячейки таблицы занимают 25% от родительского элемента и имеют сплошную границу 1 пиксель зеленого цвета, высота заголовочных и ячеек данных составляет 45px. Промежуток между ячейками мы убрали, используя свойство border-collapse со значением collapse.
- Для элемента <tr> установили при наведении (псевдокласс :hover) изменение цвета заднего фона c белого на lime (подсвечивается вся строка). Но мы, добавили псевдокласс отрицания :not(:first-child), который сообщает браузеру: – ты строки то подсвечивай, но только не первую дочернюю своего родителя (первая строка таблицы, состоящая из заголовочных элементов <th>).
- Кроме того мы установили свойство position для таблицы, которое определяет, что она у нас является элементом с относительным позиционированием (relative). Это означает, что при смещении элемент сдвигается относительно его текущей позиции. Это нам необходимо, чтобы мы могли позиционировать блок, который будет появляться при наведении на любой элемент <td>.
- И так, используя псевдоэлемент ::after добавляем содержимое после каждого элемента <td> при наведении. Псевдоэлемент ::after обязательно используется вместе со свойством content, благодаря которому мы вставляем блочный элемент, который имеет задний фон цвета forestgreen и имеет абсолютное позиционирование.
- Абсолютное позиционирование здесь необходимо для смещения элемента относительно заданного края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию – static, иначе отсчёт будет вестись относительно, указанного края окна браузера, по этой причине мы установили для таблицы относительное позиционирование (relative).
- Установили для нашего сгенерированного блока свойство top, которое указывает направление смещения позиционированного элемента от верхнего края и свойство bottom, которое указывает направление смещения позиционированного элемента от нижнего края. Для обоих свойств указали значение 0, таким образом, блок будет полностью занимать элемент от низа и верха таблицы, ширину этого блока задали 25% это значение соответствует значению ширины самой ячейки.
- И заключительное свойство, которое мы установили для этого блока: z-index со значением “-1” оно определяет порядок расположения позиционированных элементов по оси Z. Это свойство необходимо, чтобы текст находился впереди этого блока, а не за ним, если не задать значение меньше нуля, то блок будет закрывать текст.
Результат нашего примера:
Если Вам на этом этапе изучения не понятен процесс позиционирование элементов, то не расстраивайтесь это сложная для понимания тема, которую мы к тому же не рассматривали, но обязательно рассмотрим в следующей статье учебника “Позиционирование элементов в CSS”.
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
- Используя полученные знания составьте следующую таблицу:
Практическое задание № 31.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
Внешний вид HTML-таблиц можно существенно усовершенствовать с помощью CSS:
- Границы таблицы CSS
- Объединение границ в таблице CSS
- Ширина и высота таблицы CSS
- Выравнивание по горизонтали
- Выравнивание по вертикали
- Поля таблицы CSS
- Горизонтальные разделители
- Таблица с hover-эффектом
- Полосатая таблица
- Цвет таблицы
- Адаптивная таблица
- Больше примеров
- Создаем причудливую таблицу
- Выставляем расположение подписи таблицы
- CSS-свойства таблицы
Чтобы задать границы таблицы CSS , воспользуйтесь свойством border.
В примере ниже элементам <table>, <th> и <td> задается черная граница:
Пример
table, th, td {
border: 1px solid black;
}
Обратите внимание, что у таблицы в приведенном выше примере двойная граница. Это из-за того, что и у <table>, и у <th> и <td> выставлены отдельные свойства границы.
Свойство border-collapse определяет, нужно ли объединять двойную границу в одну:
Пример
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
Если вам нужна простая контурная рамка вокруг всей красивой таблицы CSS, то свойство border нужно применять к элементу <table>:
Пример
table {
border: 1px solid black;
}
Ширина и высота таблицы определяется свойствами width и height.
В приведенном ниже примере ширина таблицы выставлена на 100%, а высота элементов <th> на 50px:
Пример
table {
width: 100%;
}
th {
height: 50px;
}
Свойство text-align предназначено для горизонтального выравнивания (по левому и правому краю, по центру) содержимого элементов <th> и <td>.
По умолчанию, содержимое элементов <th> выравнивается по центру, а элементов <td> – по левому краю.
В приведенном ниже примере оформления таблицы CSS к содержимому элементов <th> применяется выравнивание по левому краю:
Пример
Свойство vertical-align предназначено для вертикального выравнивания (по верхней и нижней границе, а также посередине) содержимого внутри элементов <th> и <td>.
По умолчанию, содержимое <th> и <td> выравнивается посередине.
В приведенном ниже примере к содержимому элементов <td> применяется вертикальное выравнивание по нижней границе:
Пример
td {
height: 50px;
vertical-align: bottom;
}
Для регулирования расстояния между границей элемента и его содержимым воспользуйтесь свойством padding (для элементов <td> и <th>):
Пример
th, td {
padding: 15px;
text-align: left;
}
Можно использовать свойство border-bottom в элементах <th> и <td>, чтобы отделить строки CSS таблицы друг от друга горизонтальным разделителем:
Пример
th, td {
border-bottom: 1px solid #ddd;
}
Воспользуйтесь селектором :hover в элементе <tr>, чтобы подсветить ячейки при наведении на них курсора мыши.
Пример
tr:hover {background-color: #f5f5f5}
Чтобы получить CSS таблицы со строками разного цвета, используйте селектор nth-child(), и задайте всем четным и нечетным строкам разный цвет.
Пример
tr:nth-child(even) {background-color: #f2f2f2}
В приведенном ниже примере показано, как задавать цвет фона и текста для элементов <th>:
Пример
th {
background-color: #4CAF50;
color: white;
}
Адаптивная таблица CSS будет показывать горизонтальный скроллинг, если окажется слишком большой для страницы или экрана.
Добавьте <div> с заданным свойством overflow-x: auto для элемента <table>, чтобы сделать таблицу адаптивной.
Пример
<div style="overflow-x:auto;"> <table> ... содержимое таблицы ... </table> </div>
В этом примере показано, как можно создать забавную таблицу с помощью каскадных таблиц стилей CSS.
В данном примере показано, как можно расположить подпись к таблице при помощи CSS.
| Свойства | Описание |
| border | Позволяет одним выражением установить сразу все границы |
| border-collapse | Позволяет объединять двойные границы в одну |
| border-spacing | Позволяет указать расстояние между смежными ячейками |
| caption-side | Отвечает за положение подписи к таблице |
| empty-cells | Позволяет показать или скрыть границы для пустых ячеек в таблице |
| table-layout | Позволяет использовать в таблице шаблонный алгоритм |
Знакомство с таблицами
Добавляем строки
Простейшая таблица описывается с помощью трёх тегов:
-
‘table’ обозначает таблицу.
-
‘tr’ расшифровывается как «table row», обозначает строку таблицы.
-
‘td’ расшифровывается как «table data», обозначает ячейку внутри строки таблицы.
Теги ‘td’ располагаются внутри тегов ‘tr’, а те, в свою очередь, внутри ‘table’. Почти всё текстовое содержимое таблицы размещается внутри тегов ‘td’.
В простейшей таблице в каждой строке должно быть одинаковое количество ячеек, то есть внутри всех ‘tr’ должно быть одинаковое количество ‘td’.
Задаём рамки с помощью CSS
Вы научились создавать простые таблицы, добавлять в них любое количество строк и столбцов. Теперь пришло время оформить эти таблицы.
Таблицы в предыдущих заданиях отображались с рамками по умолчанию. Такие рамки отображаются, если у тега ‘table’ задан атрибут border с ненулевым значением.
Но с помощью атрибута border гибко управлять рамками не получается. С его помощью можно только изменять их толщину.
Поэтому мы будем учиться использовать CSS. С помощью CSS-свойства border можно задавать как внешние рамки таблицы, так и рамки каждой ячейки.
Улучшаем отображение рамок
Мы задали рамки таблицы с помощью CSS, но они не так хороши, как хотелось бы. По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно, это отлично видно на примере.
Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. Вот так:
table { border-collapse: collapse; }
Значение collapse убирает двойные рамки: cхлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы. При этом внешняя рамка таблицы может исчезнуть, и чтобы её вернуть, можно увеличить её ширину.
Горизонтальные и вертикальные рамки
Иногда требуется, чтобы рамки ячеек в таблице отображались не полностью. Например, чтобы отображалась только нижняя рамка ячеек, тогда таблица получается расчерченной по горизонтали. Аналогично, если отображать только боковые рамки ячеек, то таблица получается разбитой на столбцы.
Такие эффекты легко достигаются с помощью CSS. Для этого необходимо использовать не свойство border, которое задаёт рамки для всех сторон ячейки, а одно из свойств:
-
border-top,
-
border-right,
-
border-bottom,
-
border-left.
Эти свойства задают отображение только одной рамки ячейки: верхней, правой, нижней или левой соответственно.
Отступы внутри ячеек
Вы освоили простейшие приёмы для работы с рамками таблиц. Наша таблица уже смотрится аккуратно, но содержимое ячеек прилипает к рамкам. Если добавить отступы внутри ячеек, то информация будет восприниматься намного лучше.
Отступы внутри ячеек можно добавлять с помощью атрибута cellpadding тега ‘table’. Но лучше его не использовать, а задавать отступы с помощью CSS.
CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:
-
padding-top,
-
padding-right,
-
padding-bottom,
-
padding-left.
Например, чтобы задать у ячеек все отступы в 10 пикселей, а отступ слева в 20 пикселей, нужно написать такой CSS-код:
td {
padding: 10px;
padding-left: 20px;
}
Отступы между ячейками
Большинство задач по оформлению таблиц решаются с помощью работы с рамками, отступами внутри ячеек, изменения цвета фона ячеек.
Помимо внутренних отступов можно задавать отступы между ячейками таблицы.
Отступы между ячейками не работают с border-collapse: collapse, что достаточно логично, ведь рамки ячеек в этом режиме «склеены» и их не разорвать.
Поэтому в этом задании мы используем border-collapse: separate, которое «расклеивает» ячейки. На самом деле это значение по умолчанию, а мы используем его только для наглядности. Если удалить свойство border-collapse, то результат не изменится, ячейки будут отображаться раздельно.
Отступы между ячейками можно задать:
-
с помощью атрибута cellspacing тега ‘table’
-
или c помощью CSS-свойства border-spacing.
Отметим, что свойство border-spacing задаётся для таблицы, в отличие от padding, которое задаётся для ячеек.
Испытание: простая, но аккуратная таблица
HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Простая, но аккуратная таблица</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Посещения по городам</h1> <table> <tr> <td>Город <td>Посещения <td>Страниц <td>Время </tr> <tr> <td> СПб <td>199 <td>18,02 <td>00:13:45 </tr> <tr> <td>Москва <td>69 <td>1,48 <td>00:00:44 </tr> <tr> <td>Киев <td>5 <td>13,43 <td>00:18:07 </tr> </table> </body> </html>
CSS:
body { width: 350px; margin: 0; padding: 0 10px; font-size: 14px; font-family: "Arial", sans-serif; } table { border-collapse: collapse; } td { border-collapse: collapse; border-bottom: 2px solid lightgray; padding: 10px; }
Ячейки-заголовки
Обычно в таблицах выделяют названия столбцов или строк. В HTML для этого предусмотрен специальный тег ‘th’, который расшифровывается как «table header» и обозначает ячейку-заголовок. Тег ‘th’ аналогичен ‘td’, он так же должен располагаться внутри ‘tr’, для него стилями можно задавать все те же свойства.
По умолчанию текст внутри ‘th’ выделяется жирным и выравнивается по центру ячейки.
Заголовок таблицы
Тег ‘caption’ должен размещаться внутри тега ‘table’, причём непосредственно внутри него и первым, до остальных вложенных тегов. Вот так:
<table> <caption>Текст</caption> ... </table>
Тег заголовка идёт первым внутри таблицы, но с помощью CSS можно переместить заголовок таблицы в любое место: сверху или снизу таблицы, по центру, справа или слева.
По вертикали заголовок таблицы перемещается CSS-свойством caption-side со значениями top и bottom, которые обозначают до и после таблицы соответственно.
По горизонтали заголовок таблицы выравнивается CSS-свойством text-align со значениями left, right и center.
Объединяем ячейки
Начнём с объединения ячеек по горизонтали. Чтобы объединить ячейки по горизонтали, необходимо использовать атрибут colspan у тегов ‘th’ или ‘td’.
Когда вы задаёте ячейке атрибут colspan со значением 2, то ячейка как бы «растягивается» на ячейку справа, но та ячейка не исчезает, а отодвигается и в таблице появляется новый столбец. Чтобы удалить его, нужно удалить ячейку, которая находится справа от «растянутой».
Объединение ячеек по вертикали немного сложнее. Оно осуществляется с помощью атрибута rowspan у тега ‘td’ или ‘th’.
Когда вы задаёте ячейке атрибут rowspan со значением 2, то ячейка как бы «растягивается» на следующую строку. При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. Удалив ячейку, которая была под «растянутой» мы избавимся от этого столбца.
Испытание: таблица посложнее
HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Таблица посложнее</title> <link rel="stylesheet" href="style.css"> </head> <body> <table> <caption> Посещения по городам <tr> <th>Город <th>Посещения <th>Страниц <th>Время <tr> <td>СПб <td>199 <td>18,02 <td>00:13:45 <tr> <td>Москва <td>69 <td rowspan = "2">нет данных <td>00:00:44 <tr> <td>Киев <td>5 <td>00:18:07 <tr> <td colspan="3">Всего посещений <td>273 </table> </body> </html>
CSS:
table { border-collapse: collapse; } th { border-bottom: 2px solid black; padding: 10px; } td { border: 1px solid lightgrey; padding: 10px; }
Выравнивание содержимого в ячейках
Содержимое ячеек можно выравнивать по горизонтали и по вертикали с помощью CSS.
За выравнивание по горизонтали отвечает CSS-свойство text-align. Чаще всего используются значения left, center и right.
За выравнивание по вертикали отвечает CSS-свойство vertical-align. Чаще всего используются значения top, middle и bottom.
На самом деле, значений у обоих свойств больше, но в случае с ячейками нас интересуют только перечисленные.
Чтобы задать выравнивание содержимого ячеек, надо в стилях указать:
{
vertical-align: значение;
text-align: значение;
}
Эти стили повлияют на все ячейки. Чтобы задать выравнивание только в определённых ячейках, нужно назначить им классы и определить стили для классов.
Добавим цвета
Таблицы можно раскрашивать, задавая цвет фона ячеек, цвет текста в ячейках, а также цвет рамок. Можно задавать и фоновые изображения, но это мы разберём в последующих курсах.
Цветами можно управлять с помощью этих свойств:
-
background-color — задаёт цвет фона,
-
color — цвет текста,
-
border-color — цвет рамок.
Чтобы задать цвета для ячейки в CSS, нужен такой код:
td {
color: цвет;
background-color: цвет;
border: 1px solid цвет;
}
Задаём размеры таблицы
По умолчанию ширина и высота таблицы зависит от содержимого и отступов внутри ячеек. Чем меньше содержимого, тем меньше размеры таблицы.
С помощью CSS можно управлять размерами таблицы, задавать желаемую ширину и высоту. Также размерами можно управлять с помощью атрибутов таблицы, но мы рассмотрим только CSS.
Стоит отметить, что у таблицы есть минимальные размеры, которые зависят от содержания, меньше которых она не сожмётся, какое бы значение ширины или высоты ни задавалось.
Ширина таблицы задаётся с помощью CSS-свойства width, а высота с помощью свойства height, например:
table {
width: 100px;
height: 100px;
}
Размеры таблицы можно задавать как в абсолютных единицах, например, в пикселях — 20px, так и в относительных, в процентах — 20%.
При использовании процентов размеры таблицы будут вычисляться с учётом размеров родительского элемента, в нашем случае окна мини-браузера.
Особое значение auto включает расчёт размеров по умолчанию. Например, width: auto; или height: auto;.
Важное замечание. Проценты при задании высоты обычно не работают.
Задаём размеры отдельных ячеек и столбцов
Размеры ячеек и столбцов тоже можно задавать вручную, особенно если вам не нравится, как браузер распределил ширину колонок. Размеры ячеек задаются точно так же, как и размеры таблицы: с помощью CSS-свойств width и height.
Есть два варианта добавления стилей ячейкам:
-
Назначать ячейкам уникальные имена классов, например, class=”cell-11″, и применять стили для этих классов.
-
Использовать атрибут style, внутри которого можно писать CSS-код.
Пример второго варианта:
<td style="width: 100px;"> ... </td>
К счастью, редко нужно задавать размеры каждой ячейки. Обычно размеры ячеек прописывают, когда надо вручную установить ширину столбцов таблицы: для этого достаточно задать ширину для каждой ячейки из первой строки.
Испытание: итоговая таблица
HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Испытание: итоговая таблица</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Итоговая таблица</h1> <table> <tr> <th style = "text-align:left">Город <th style = "background-color: lightblue" class = "center">Посещений <th class = "right">% <tr> <td>СПб <td class = "center">199 <td class = "right">65.12 <tr style = "background-color: lightyellow"> <td>Москва <td class = "center">69 <td class = "right">21.3 <tr> <td>Киев <td class = "center">5 <td class = "right">8 <tr style = "background-color: lightyellow"> <td colspan = "2">Посещений за весь период <td class = "right">273 </table> </body> </html>
CSS:
body { width: 350px; margin: 0; padding: 0 10px; font-size: 14px; font-family: "Arial", sans-serif; } .center { text-align: center; } .right { text-align: right; } table { border-collapse: collapse; } th { border-top: 1px solid black; border-bottom: 1px solid black; padding: 10px; width: 33%; background-color: darkcyan; color: white; } td { border-bottom: 1px solid lightgrey; padding: 10px; }
This tutorial will teach you how to set different properties of an HTML table using CSS. You can set following properties of a table −
-
The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style.
-
The border-spacing specifies the width that should appear between table cells.
-
The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption.
-
The empty-cells specifies whether the border should be shown if a cell is empty.
-
The table-layout allows browsers to speed up layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it.
Now, we will see how to use these properties with examples.
The border-collapse Property
This property can have two values collapse and separate. The following example uses both the values −
<html>
<head>
<style type = "text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#000000;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>
<body>
<table class = "one">
<caption>Collapse Border Example</caption>
<tr><td class = "a"> Cell A Collapse Example</td></tr>
<tr><td class = "b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two">
<caption>Separate Border Example</caption>
<tr><td class = "a"> Cell A Separate Example</td></tr>
<tr><td class = "b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>
It will produce the following result −
The border-spacing Property
The border-spacing property specifies the distance that separates adjacent cells’. borders. It can take either one or two values; these should be units of length.
If you provide one value, it will applies to both vertical and horizontal borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing −
NOTE − Unfortunately, this property does not work in Netscape 7 or IE 6.
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>
Now let’s modify the previous example and see the effect −
<html>
<head>
<style type = "text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two {
border-collapse:separate;
width:400px;
border-spacing:10px 50px;
}
</style>
</head>
<body>
<table class = "one" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class = "two" border = "1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>
It will produce the following result −
The caption-side Property
The caption-side property allows you to specify where the content of a <caption> element should be placed in relationship to the table. The table that follows lists the possible values.
This property can have one of the four values top, bottom, left or right. The following example uses each value.
NOTE − These properties may not work with your IE Browser.
<html>
<head>
<style type = "text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style = "width:400px; border:1px solid black;">
<caption class = "top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style = "width:400px; border:1px solid black;">
<caption class = "right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>
It will produce the following result −
The empty-cells Property
The empty-cells property indicates whether a cell without any content should have a border displayed.
This property can have one of the three values – show, hide or inherit.
Here is the empty-cells property used to hide borders of empty cells in the <table> element.
<html>
<head>
<style type = "text/css">
table.empty {
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty {
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>
<body>
<table class = "empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class = "empty">value</td>
<td class = "empty"></td>
</tr>
</table>
</body>
</html>
It will produce the following result −
The table-layout Property
The table-layout property is supposed to help you control how a browser should render or lay out a table.
This property can have one of the three values: fixed, auto or inherit.
The following example shows the difference between these properties.
NOTE − This property is not supported by many browsers so do not rely on this property.
<html>
<head>
<style type = "text/css">
table.auto {
table-layout: auto
}
table.fixed {
table-layout: fixed
}
</style>
</head>
<body>
<table class = "auto" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
<br />
<table class = "fixed" border = "1" width = "100%">
<tr>
<td width = "20%">1000000000000000000000000000</td>
<td width = "40%">10000000</td>
<td width = "40%">100</td>
</tr>
</table>
</body>
</html>
It will produce the following result −
Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных.
После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид.
CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц.
Добавление границ (border) в таблицы
CSS-свойство border — лучший способ определить границы для таблиц и ячеек. В следующем примере будет установлена черная граница для элементов <table>, <th>, и <td>.
table, th, td {
border: 1px solid black;
}По умолчанию браузер рисует границу вокруг таблицы, а также вокруг всех ячеек с некоторым промежутком между ними, что приводит к двойной границе. Чтобы избавиться от этой проблемы, вы можете просто свернуть границы соседних ячеек (collapse) таблицы и создать чистые однострочные границы.
Давайте посмотрим на следующую иллюстрацию, чтобы понять, как граница применяется к таблице.
Свертывание границ таблиц
Существуют две разные модели для установки границ ячеек таблицы в CSS: раздельная (separate) и свернутая (collapse).
В раздельной модели границ, которая используется по умолчанию, каждая ячейка таблицы имеет свои собственные отдельные границы, тогда как в модели со свернутыми границами смежных ячеек таблицы имеют общую границу. Вы можете установить модель границы для HTML-таблицы, используя CSS-свойство border-collapse.
Следующие правила сворачивают границы ячеек таблицы и применяют черную границу в один пиксель.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}Вы также можете удалить пространство между границами ячеек таблицы, установив для CSS-свойства border-spacing значение 0. Однако это только удаляет пространство, но не объединяет границы, как при установке для свойства border-collapse значения collapse.
Регулировка пространства внутри таблиц
По умолчанию браузер создает ячейки таблицы, в которых довольно мало пространства.
Чтобы добавить больше пространства между содержимым ячейки таблицы и границами ячейки, вы можете просто использовать CSS-свойство padding. Давайте посмотрим следующий пример:
th, td {
padding: 15px;
}Вы также можете отрегулировать расстояние между границами ячеек, используя CSS-свойство border-spacing, если границы вашей таблицы разделены (по умолчанию).
Следующие правила применяют интервал 10 пикселей между всеми границами в таблице:
table {
border-spacing: 10px;
}Настройка ширины и высоты таблиц
По умолчанию таблица будет отображаться достаточно широкой и достаточно высокой, чтобы вместить все ее содержимое.
Однако вы также можете задать ширину и высоту таблицы, а также ее ячеек, явно используя CSS-свойства width и height. Правила в следующем примере устанавливают ширину таблицы равной 100% и высоту ячеек заголовка таблицы равной 40 пикселям.
table {
width: 100%;
}
th {
height: 40px;
}Управление макетом таблицы
Таблица расширяется и сжимается для размещения данных, содержащихся в ней. Это поведение работает по умолчанию. По мере заполнения данных внутри таблицы они продолжают расширяться, пока есть место. Однако иногда необходимо установить фиксированную ширину таблицы или столбца, чтобы управлять макетом.
Вы можете сделать это с помощью CSS-свойства table-layout. Это свойство определяет алгоритм, который будет использоваться для размещения ячеек таблицы, строк и столбцов. Это свойство принимает одно из двух значений:
- auto — использует алгоритм автоматической раскладки таблицы. С помощью этого алгоритма ширина таблицы и ее ячеек настраиваются в соответствии с содержимым. Это значение установлено по умолчанию.
- fixed — Использует алгоритм фиксированной таблицы. При использовании этого алгоритма горизонтальное расположение таблицы не зависит от содержимого ячеек; это зависит только от ширины столбцов, границ и расстояния между ячейками. В плане производительности это работает быстрее
Правила в следующем примере указывают, что таблица HTML создана с использованием алгоритма фиксированной разметки и имеет фиксированную ширину 300 пикселей.
table {
width: 300px;
table-layout: fixed;
}Вы можете оптимизировать производительность рендеринга таблицы, указав значение fixed для свойства table-layout. Фиксированное значение этого свойства заставляет таблицу отображаться по одной строке за раз, предоставляя пользователям информацию быстрее, в то время как при установленном значении auto пользователь будет дожидаться загрузки всей таблицы, прежде чем браузер сможет посчитать размеры ячеек.
Выравнивание текста внутри ячеек таблицы
Вы можете выровнять текстовое содержимое внутри ячеек таблицы по горизонтали или по вертикали.
Горизонтальное выравнивание содержимого ячеек
Для горизонтального выравнивания текста внутри ячеек таблицы вы можете использовать свойство text-align так же, как и с другими элементами. Вы можете выравнять текст по левому краю (left), правому краю (right), центру (center) или растянуть на всю ширину (justify).
Следующие правила будут выравнивать текст внутри элементов по левому краю.
th {
text-align: left;
}Текст внутри элементов <td> по умолчанию выравнивается по левому краю, тогда как текст внутри элементов <th> выравнивается по центру и по умолчанию отображается жирным шрифтом.
Вертикальное выравнивание содержимого ячеек
Аналогично, вы можете выровнять содержимое внутри элементов <th> и <td> по вертикали, используя CSS-свойство vertical-align. Вертикальное выравнивание по умолчанию — middle (по середине).
Следующие правила будут выравнивать текст по вертикали снизу внутри элементов.
th {
height: 40px;
vertical-align: bottom;
}Управление положением заголовка таблицы
Вы можете установить вертикальное положение заголовка таблицы с помощью CSS-свойства caption-side.
Надпись может быть размещена либо вверху, либо внизу таблицы. По умолчанию она устанавливается сверху.
caption {
caption-side: bottom;
}Чтобы изменить горизонтальное выравнивание заголовка таблицы (например, влево или вправо), вы можете просто использовать CSS-свойство text-align, также как вы делаете это с обычным текстом.
Обработка пустых ячеек
В таблицах, в которых используется раздельная модель границ (по умолчанию), вы также можете управлять отображением ячеек, которые не имеют видимого содержимого, с помощью CSS-свойства empty-cells.
Это свойство принимает значение show или hide. Значением по умолчанию является show, при котором пустые ячейки отображаются как обычные ячейки, но если указано значение hide, вокруг пустых ячеек не создаются границы или фон. Посмотрим пример, чтобы понять, как это работает:
table {
border-collapse: separate;
empty-cells: hide;
}Размещение неразрывного пробела ( ) внутри ячейки таблицы делает его непустым. Следовательно, даже если эта ячейка выглядит пустой, значение hide не будет скрывать границы и фон.
Создание чередующихся строк в таблице
Установка разных цветов для фона чередующихся строк является популярной техникой для улучшения читаемости таблиц с большим объемом данных.
Вы можете использовать псевдокласс :nth-child() для этого эффекта.
Следующие правила будут выделять все нечетные строки в теле таблицы.
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}Чередующиеся строки в таблицах обычно выглядят примерно так:
Псевдокласс :nth-child() выбирает элементы на основе их положения в группе. В качестве аргумента он может принимать число, ключевое слово even (четное) или odd (нечетное) или выражение в форме xn+y, где x и y — целые числа (например, 1n, 2n, 2n + 1, …).
Создание адаптивной таблицы
Таблицы не являются адаптивными по умолчанию. Однако для поддержки мобильных устройств вы можете добавить отзывчивость вашим таблицам, включив горизонтальную прокрутку на маленьких экранах. Для этого просто оберните вашу таблицу элементом <div> и примените стиль overflow-x: auto; как показано ниже:
<div style="overflow-x: auto;">
<table>
... table content ...
</table>
</div>