Меню

Параметры стилей таблиц html

Параметры стилей таблиц html

Стилизация HTML таблиц это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья руководство как сделать, чтобы ваши HTML таблицы выглядели хорошо, с некоторыми свойствами подробно рассмотренными в предыдущих статьях.

Необходимые знания: Базовый HTML (Введение в HTML), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (Введение в CSS).
Цель: Научиться эффективно стилизовать HTML таблицы.

Типичная HTML таблица

Давайте начнём с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идёт о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:

Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как scope (en-US) , ,

(en-US),

(en-US) и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь punk-bands-unstyled.html):

Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.

Активное обучение: Стилизация таблицы

В этой части обучения мы будем работать над тем чтобы стилизовать наш пример таблицы.

  1. В начале необходимо сделать копию sample markup, загрузить оба изображения (noise и leopardskin), и вставить эти файлы в отдельную папку на вашем компьютере.
  2. Следующее, это создать новый файл style.css и сохранить его в той же папке вместе с другими файлами.
  3. Подключить CSS в HTML для этого разместить следующую строку в HTML внутри :

Отступы и разметка

Первое что нам нужно это разобраться с отступами/разметкой, так как по умолчанию стилизация таблцы выглядит неразборчиво! Сделаем это, добавив CSS в ваш style.css файл:

Наиболее важные части следующие:

    Свойство table-layout (en-US) со значением fixed как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда table-layout: fixed , размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора thead th:nth-child(n) ( :nth-child ) («Выберите n-ый дочерний элемент

    (en-US) в последовательности, внутри элемента

    (en-US)») и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье Fixed Table Layouts.

Мы также использовали width 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).

  • Свойство border-collapse (en-US) со значением collapse это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить border-collapse: collapse; рамки схлопываются в одну и так выглядит намного лучше:
  • Мы установили border вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.
  • Мы установили padding на элементах (en-US) и — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.
  • На этом этапе наша таблица выглядит уже гораздо лучше:

    Немного простой типографики

    Теперь мы ещё кое-что изменим.

    Во-первых, мы пойдём и найдём на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный элемент и изменить объявление font-family на выбранный вами Google Fonts шрифт.

    Затем добавьте следующий CSS в ваш style.css файл, ниже предыдущего кода:

    Здесь нет ничего специально для таблиц, мы просто настраиваем стилизацию шрифтов, чтобы упростить чтение:

    • Мы установили доступный глобально шрифт sans-serif; это вполне стандартный стилистический выбор. Мы установили выбранный нами шрифт для заголовков внутри элементов (en-US) и , который подходит нам по тематике панков.
    • Мы добавили немного letter-spacing в заголовках и ячейках которым необходимо добавить читаемости. Опять же это основной стилистический приём.
    • Мы выравниваем по центру текст ячейках внутри
      (en-US) чтобы они совпадали с заголовками. По умолчанию у ячеек свойство text-align имеет значение left , а заголовки значение center , но обычно выглядит лучше если они выравниваются в одном стиле. По умолчанию, чтобы внешний вид заголовков отличался у них задан жирный шрифт.
    • Мы выровняли заголовок справа внутри так чтобы он визуально ассоциировался с соответствующими ему данными.

    В результате таблица выглядит немного аккуратнее:

    Графика и цвета

    И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утончённое и со вкусом.

    Следующий шаг это добавить следующий CSS в ваш style.css файл в самом низу:

    Опять же здесь нет ничего конкретно для таблиц, но стоит отметить несколько вещей.

    Мы добавили background-image в

    (en-US), и изменили color (en-US) для всего текста внутри header и footer на белый (и ещё text-shadow ) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.

    Полосатая зебра

    Мы хотели бы посвятить целый раздел, чтобы показать вам как реализовать полосы зебры — чередующиеся цветные строки которые упрощают чтение разных строк в вашей таблице. Добавим следующий 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 для заголовков таблицы ( (en-US)).
    • Используйте border-collapse (en-US) : collapse , которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.
    • Используйте (en-US),

      (en-US) и чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это даёт возможность накладывать стили друг на друга, если это необходимо.
    • Используйте полоски зебры, чтобы облегчить чтение между строк.
    • Используйте text-align чтобы выровнять текст в (en-US) и для более аккуратного и удобного оформления.

    Заключение

    Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть ещё кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.

    Источник

    

    HTML Таблицы

    Таблица — это сетка из ячеек, формирующих строки и столбцы. Примерами таблиц могут служить различные финансовые отчеты, результаты спортивных соревнований, календари, расписания и т.д. Отдельный блок сетки называется ячейкой таблицы. Ячейки таблицы могут содержать самую разнообразную информацию, включая числа, текст, и даже видео и аудио объекты. С помощью языка HTML таблицы пишутся построчно.

    Элемент служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента парный блочный тег (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов вы добавите, столько строк в таблице и будет. Открывающий тег обозначает начало новой строки таблицы. После него помещаются элементы (сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом .

    Элемент (сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент , однако его назначение — создание заголовка строки или столбца. Как правило, элемент размещают в первой строке таблицы. Браузеры отображают текст в элементе жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.

    Рассмотрим простую таблицу, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов. По умолчанию таблицы обычно отображаются без рамки:

    Пример: Простая HTML-таблица

    Заголовок 1 Заголовок 2 Заголовок 3
    Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
    Ячейка 3×1 Ячейка 3×2 Ячейка 3×3

    Граница таблицы

    Мы уже знаем, что по умолчанию таблицы отображаются без рамки. Для добавления рамки вокруг таблицы нужно указать в документе несколько простых правил таблиц стилей. Свойство border управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border для всех элементов таблицы, например, вот так:

    Пример: Применение свойства border

    Заголовок 1 Заголовок 2 Заголовок 3
    Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
    Ячейка 3×1 Ячейка 3×2 Ячейка 3×3

    Одинарная рамка для таблицы

    По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:

    Пример: Применение свойства border-collapse

    Заголовок 1 Заголовок 2 Заголовок 3
    Ячейка 2×1 Ячейка 2×2 Ячейка 2×3
    Ячейка 3×1 Ячейка 3×2 Ячейка 3×3

    Поля и интервалы таблицы

    По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу или . Интервал ячеек (border-spacing) — это расстояние между ними ( или ). Сначала присвойте значение separate свойству border-collapse элемента , а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента , но в спецификации HTML5 они были признаны устаревшими.

    Пример использования padding и border-spacing:

    Пример: Применение свойств padding и border-spacing

    padding — это расстояние между содержимым ячейки и ее границей (желтый цвет)

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4
    border-spacing — это расстояние между ячейками (зеленый цвет)

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    Ширина таблицы

    Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
    Вот пример использования свойства width:

    Пример: Применение свойства width

    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    Объединение ячеек (colspan и rowspan)

    Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки или ячейки объединяются посредством добавления атрибутов colspan или rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали.

    Объединение столбцов

    Объединение столбцов достигается с помощью атрибута colspan в элементах или — ячейка растягивается вправо, охватывая последующие столбцы. В следующем примере значение атрибута colspan равно 2, а это значит, что ячейка должна занимать два столбца.

    Пример: Применение атрибута colspan

    Ячейка на два столбца
    Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    Объединение строк

    Строки, объединенные при помощи атрибута rowspan, ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк.
    В этом примере первая ячейка таблицы растягивается на две строки вниз:

    Пример: Применение атрибута rowspan

    Ячейка на две строки Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    Заголовок таблицы

    Для создания заголовка или подписи таблицы используется парный тег (от англ. caption – подпись). Элемент предназначен для организации заголовка таблицы. Располагается сразу после тега , но вне описания строки или ячейки.

    Пример: Применение тега

    Это заголовок таблицы

    Ячейка на две строки Ячейка 1 Ячейка 2
    Ячейка 3 Ячейка 4

    Теги группирования элементов таблиц

    Для группирования элементов таблиц служат теги , и . Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз дания верхней шапки таблицы) используется тег . Заголовки таблицы должны быть помещены в элемент , например:

    Основное содержимое (тело) таблицы должно находиться внутри элемента (таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег (в одной таблице допускается не более одного тега ). В исходном коде тег ставится до тега . Кроме логического группирования одной из причин использования элементов и является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок ( ) и последнюю строку ( ), когда пользователь станет прокручивать вашу таблицу.

    Пример: Теги , и

    Это шапка таблицы
    Это подвал таблицы
    Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4

    Несмотря на то, что мы перед добавили , он, тем не менее, появляется в конце таблицы. Это исходит из того, что может содержать много строк. Но браузеру нужно отобразить нижнюю часть таблицы до получения всех (потенциально многочисленных) строк данных. Вот почему в коде прописывается перед элементом .

    • Задача1
    • Задача2
    • Задача3
    • Задача4
    • Задача5
    • Задача6
    • Задача7

    Объединение столбцов

    Напиште разметку для таблицы, изображенной на рис.1.

    Реши сам »

    Ячейка на два столбца
    Ячейка 1 Ячейка 2

    Объединение строк

    Напиште разметку для таблицы, изображенной на рис.1.

    Реши сам »

    Ячейка на три строки Ячейка 1
    Ячейка 2
    Ячейка 3

    Убрать двойную рамку таблицы

    По умолчанию граница таблицы имеет эффект двойной рамки, измените код так, чтобы все линии этой рамки стали одинарными.

    Широкая таблица

    Сделайте чтобы эта таблица отображалось полностью на всю ширину окна браузера вне зависимости от ее ширины.

    Заголовок таблицы

    Измените приведенный код так, чтобы над таблицей появился основной заголовок (подпись), как показано на рис.1.

    Поле внутри ячеек

    Измените приведенный код так, чтобы между текстом внутри ячеек и их границей появился зазор (поле) шириной 25px, как показано на рис.1.

    Объединение строк

    Попробуйте написать разметку для таблицы, изображенной на рис.1. Совет: Строки всегда объединяются сверху вниз, поэтому ячейка с «ананасами» является частью первой строки.

    Источник

    Таблицы и стили

    Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Однако в большинстве случаев на веб-страницах используют весьма убогие средства по представлению табличных данных. Вместе с тем воспользовавшись мощью стилей, можно весьма расширить средства по оформлению таблиц, удачно вписать их в дизайн сайта и нагляднее представить табличные данные.

    Далее речь пойдет об оформлении таблиц с помощью стилей. Но в начале обговорим некоторые моменты, которые помогут лучше понять, что же мы делаем.

    Цвет фона ячеек

    Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору TABLE . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH , то он и будет установлен в качестве фона (пример 1).

    Пример 1. Цвет фона

    То же самое происходит и с цветом текста. Для всех элементов таблицы в примере он установлен белым.

    Результат данного примера показан на рис. 1.

    Изменение цвета фона

    Рис. 1. Изменение цвета фона

    Поля внутри ячеек

    Пример 2. Поля в таблицах

    В данном примере с помощью группирования селектором поля установлены одновременно для селектора TD и TH .

    Результат данного примера показан на рис. 2.

    Поля в ячейках

    Рис. 2. Поля в ячейках

    Границы и рамки

    Линии между ячейками можно установить несколькими методами, при этом рассмотрим два из них, которые непосредственно связаны со стилями.

    Использование атрибута cellspacing

    Заметим, что это не совсем удобный способ создания границ, поскольку он имеет ограниченную область применения. Так можно получить только одноцветную сетку, а не вертикальные или горизонтальные линии в нужных местах.

    Применение свойства border

    Стилевое свойство border одновременно задает цвет границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать его производные — border-left , border-right , border-top и border-bottom , они соответственно определяют границу слева, справа, сверху и снизу.

    Применяя свойство border к селектору TABLE , мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 3).

    Пример 3. Добавление двойной рамки

    В данном примере используется двойная рамка черного цвета вокруг самой таблицы и сплошная рамка белого цвета вокруг каждой ячейки.

    Результат примера показан на рис. 3.

    Граница вокруг таблицы и ячеек

    Рис. 3. Граница вокруг таблицы и ячеек

    Пример 4. Создание одинарной рамки

    В данном примере создается сплошная линия зеленого цвета между ячейками и черная вокруг таблицы. Все границы внутри таблицы имеют одинаковую толщину.

    Результат примера показан на рис. 4.

    Граница вокруг таблицы

    Рис. 4. Граница вокруг таблицы

    Выравнивание содержимого ячеек

    По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег

    , он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 5).

    Пример 5. Выравнивание содержимого ячеек по горизонтали

    Выравнивание текста в ячейках

    Рис. 5. Выравнивание текста в ячейках

    Выравнивание по вертикали в ячейке всегда происходит по ее центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align , как показано в примере 6.

    Пример 6. Выравнивание содержимого ячеек по вертикали

    В данном примере устанавливается высота заголовка

    как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 6.

    Источник

    Стилизация таблиц

    Стилизация HTML таблиц это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья руководство как сделать, чтобы ваши HTML таблицы выглядели хорошо, с некоторыми свойствами подробно рассмотренными в предыдущих статьях.

    Необходимые знания: Базовый HTML (Введение в HTML), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (Введение в CSS).
    Цель: Научиться эффективно стилизовать HTML таблицы.

    Типичная HTML таблица

    Давайте начнём с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идёт о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:

    Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как scope (en-US) , ,

    (en-US),

    (en-US) и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь punk-bands-unstyled.html):

    Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.

    Активное обучение: Стилизация таблицы

    В этой части обучения мы будем работать над тем чтобы стилизовать наш пример таблицы.

    1. В начале необходимо сделать копию sample markup, загрузить оба изображения (noise и leopardskin), и вставить эти файлы в отдельную папку на вашем компьютере.
    2. Следующее, это создать новый файл style.css и сохранить его в той же папке вместе с другими файлами.
    3. Подключить CSS в HTML для этого разместить следующую строку в HTML внутри :

    Отступы и разметка

    Первое что нам нужно это разобраться с отступами/разметкой, так как по умолчанию стилизация таблцы выглядит неразборчиво! Сделаем это, добавив CSS в ваш style.css файл:

    Наиболее важные части следующие:

      Свойство table-layout (en-US) со значением fixed как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда table-layout: fixed , размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора thead th:nth-child(n) ( :nth-child ) («Выберите n-ый дочерний элемент

      (en-US) в последовательности, внутри элемента

      (en-US)») и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье Fixed Table Layouts.

    Мы также использовали width 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).

  • Свойство border-collapse (en-US) со значением collapse это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить border-collapse: collapse; рамки схлопываются в одну и так выглядит намного лучше:
  • Мы установили border вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.
  • Мы установили padding на элементах (en-US) и — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.
  • На этом этапе наша таблица выглядит уже гораздо лучше:

    Немного простой типографики

    Теперь мы ещё кое-что изменим.

    Во-первых, мы пойдём и найдём на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный элемент и изменить объявление font-family на выбранный вами Google Fonts шрифт.

    Затем добавьте следующий CSS в ваш style.css файл, ниже предыдущего кода:

    Здесь нет ничего специально для таблиц, мы просто настраиваем стилизацию шрифтов, чтобы упростить чтение:

    • Мы установили доступный глобально шрифт sans-serif; это вполне стандартный стилистический выбор. Мы установили выбранный нами шрифт для заголовков внутри элементов (en-US) и , который подходит нам по тематике панков.
    • Мы добавили немного letter-spacing в заголовках и ячейках которым необходимо добавить читаемости. Опять же это основной стилистический приём.
    • Мы выравниваем по центру текст ячейках внутри
      (en-US) чтобы они совпадали с заголовками. По умолчанию у ячеек свойство text-align имеет значение left , а заголовки значение center , но обычно выглядит лучше если они выравниваются в одном стиле. По умолчанию, чтобы внешний вид заголовков отличался у них задан жирный шрифт.
    • Мы выровняли заголовок справа внутри так чтобы он визуально ассоциировался с соответствующими ему данными.

    В результате таблица выглядит немного аккуратнее:

    Графика и цвета

    И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утончённое и со вкусом.

    Следующий шаг это добавить следующий CSS в ваш style.css файл в самом низу:

    Опять же здесь нет ничего конкретно для таблиц, но стоит отметить несколько вещей.

    Мы добавили background-image в

    (en-US), и изменили color (en-US) для всего текста внутри header и footer на белый (и ещё text-shadow ) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.

    Полосатая зебра

    Мы хотели бы посвятить целый раздел, чтобы показать вам как реализовать полосы зебры — чередующиеся цветные строки которые упрощают чтение разных строк в вашей таблице. Добавим следующий 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 для заголовков таблицы ( (en-US)).
    • Используйте border-collapse (en-US) : collapse , которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.
    • Используйте (en-US),

      (en-US) и чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это даёт возможность накладывать стили друг на друга, если это необходимо.
    • Используйте полоски зебры, чтобы облегчить чтение между строк.
    • Используйте text-align чтобы выровнять текст в (en-US) и для более аккуратного и удобного оформления.

    Заключение

    Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть ещё кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.

    Источник

    Читайте также:  Таблица степеней с одинаковыми основаниями
    Adblock
    detector