Стилизация HTML таблиц это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья руководство как сделать, чтобы ваши HTML таблицы выглядели хорошо, с некоторыми свойствами подробно рассмотренными в предыдущих статьях.
Давайте начнём с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идёт о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:
Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как scope (en-US), <caption>, <thead> (en-US), <tbody> (en-US) и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь punk-bands-unstyled.html):
Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.
В этой части обучения мы будем работать над тем чтобы стилизовать наш пример таблицы.
style.css и сохранить его в той же папке вместе с другими файлами.<head>:
Первое что нам нужно это разобраться с отступами/разметкой, так как по умолчанию стилизация таблцы выглядит неразборчиво! Сделаем это, добавив CSS в ваш style.css файл:
Наиболее важные части следующие:
table-layout (en-US) со значением fixed как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда table-layout: fixed, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора thead th:nth-child(n) (:nth-child) ("Выберите n-ый дочерний элемент <th> (en-US) в последовательности, внутри элемента <thead> (en-US)") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье Fixed Table Layouts.
Мы также использовали width 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).
border-collapse (en-US) со значением collapse это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже:
Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить border-collapse: collapse; рамки схлопываются в одну и так выглядит намного лучше:
border вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.padding на элементах <th> (en-US) и <td> — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.На этом этапе наша таблица выглядит уже гораздо лучше:
Теперь мы ещё кое-что изменим.
Во-первых, мы пойдём и найдём на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный <link> элемент и изменить объявление font-family на выбранный вами Google Fonts шрифт.
Добавьте элемент <link> в блок head вашего HTML, на строчку выше существующего элемента <link>:
Затем добавьте следующий CSS в ваш style.css файл, ниже предыдущего кода:
Здесь нет ничего специально для таблиц, мы просто настраиваем стилизацию шрифтов, чтобы упростить чтение:
<thead> (en-US) и <tfoot>, который подходит нам по тематике панков.letter-spacing в заголовках и ячейках которым необходимо добавить читаемости. Опять же это основной стилистический приём.<tbody> (en-US) чтобы они совпадали с заголовками. По умолчанию у ячеек свойство text-align имеет значение left, а заголовки значение center, но обычно выглядит лучше если они выравниваются в одном стиле. По умолчанию, чтобы внешний вид заголовков отличался у них задан жирный шрифт.<tfoot> так чтобы он визуально ассоциировался с соответствующими ему данными.В результате таблица выглядит немного аккуратнее:
И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утончённое и со вкусом.
Начнём с добавления в конец файла style.css следующего CSS:
Опять же здесь нет ничего конкретно для таблиц, но стоит отметить несколько вещей.
Мы добавили background-image в <thead> (en-US), <tfoot> и изменили color (en-US) для всего текста внутри header и footer на белый (и ещё text-shadow) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.
Также мы добавили линейный градиент для <th> (en-US) и <td> элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на <thead> (en-US) и <tfoot> элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают несколько фоновых изображений и линейные градиенты (en-US).
Мы хотели бы посвятить целый раздел, чтобы показать вам как реализовать полосы зебры — чередующиеся цветные строки которые упрощают чтение разных строк в вашей таблице. Добавим следующий CSS в ваш style.css файл:
:nth-child селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула 2n-1 выберет все нечётные дочерние элементы (1, 3, 5 и т.д.), а формула 2n выберет все чётные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова odd и even, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем чётным и нечётным строкам разные (яркие) цвета..png с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.:nth-child.Этот взрыв цвета выглядит следующим образом:
То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и академической.
Последнее что мы сделаем с нашей таблицей это стилизация заголовка. Для этого добавим следующие строки в наш файл style.css:
Здесь нет ничего особенного, кроме свойства caption-side (en-US), которое имеет значение bottom. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке punk-bands-complete.html):
Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то значительно более стильное и менее безвкусное чем наша таблица.
Короткий список наиболее полезных вещей рассмотренных выше:
table-layout (en-US): fixed для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину width для заголовков таблицы (<th> (en-US)).border-collapse (en-US): collapse, которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.<thead> (en-US), <tbody> (en-US) и <tfoot> чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это даёт возможность накладывать стили друг на друга, если это необходимо.text-align чтобы выровнять текст в <th> (en-US) и <td> для более аккуратного и удобного оформления.Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть ещё кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.