Стилевые таблицы css. Выравнивание содержимого ячеек

Рамка таблицы

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border . Но стоит обратить внимание на то, что если добавить рамку только к элементу

Table {width: 100%; border-collapse: collapse;} table thead tr {color: #ffffff; font-weight: bold; background: #00bf80;} table thead tr td {border: 1px solid #01ab73;} table tbody tr td {border: 1px solid #e8e9eb;} table tbody tr:nth-child(2n) {background: #f4f4f4;} table tbody tr:hover {background: #ebffe8;}

Table {width: 100%; border-collapse: separate; border-spacing: 4px;} table thead tr {color: #ffffff; font-weight: bold;} table thead tr td {border-radius: 4px 4px 0 0; background: #2e82c3;} table tbody tr td {border: 1px solid #2e82c3; border-radius: 4px; background: #cbdfef;} table tbody tr td:hover {background: #a2c3dd; transition-duration: 0.2s;}

Table {width: 100%; text-align: center; border-bottom: 2px solid #dfdfdf; border-radius: 6px; border-collapse: separate; border-spacing: 0px;} table thead tr {color: #ffffff; font-weight: bold; background: #c83240;} table tr td {border-right: 1px solid #dfdfdf;} table tr td:last-child {border-right: 0px;} table tbody tr:nth-child(1n) {background: #f6f6f6;} table tbody tr:nth-child(2n) {background: #e6e6e6;} table tbody tr:hover {background: #ffe8e8; transition-duration: 0.6s;}

Своойства CSS

Что означают используемые свойства CSS в шаблонах:

• width - ширина таблицы;
• border-collapse - способ отображения границ ячеек вокруг таблицы;
• border-spacing - расстояние между границами ячеек в таблице;
• border-radius - скругление углов рамки;
• padding - внутреннее расстояние элемента от края границы;
• color - цвет элемента;
• text-align - выравнивание текста по горизонтали;
• font-weight - насыщенность шрифта;
• background - параметры фона;
• transition-duration - длительность анимации;
• border - толщина, стиль и цвет границы вокруг элемента.

Многие веб мастера уверены, что использовать HTML таблицы в шаблонах - плохая практика. Но в данном уроке мы рассмотрим только таблицы CSS. Какая разница между таблицами HTML и CSS? Надо ли использовать таблицы CSS? Если да, то как?

Как создать таблицу CSS

Модель CSS таблиц основана на модели таблиц HTML4 и хорошо поддерживается браузерами. В обеих моделях структура таблицы существует параллельно визуальному представлению.

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

Наверняка вы работали с таблицами HTML раньше. Если да, то у вас не будет проблем с созданием таблиц CSS.

Каждый элемент таблицы HTML имеет эквивалент в CSS. Единственное отличие заключается в отсутствии отличий между td и th в варианте CSS.

Ниже приводится список элементов таблиц HTML и соответствующие им значения CSS.

Table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption }

Подписи могут быть размещены сверху или снизу таблицы с помощью свойства caption-side:

#caption {caption-side: top} #caption {caption-side: bottom}

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

#table {display: table;} .row {display: table-row;} .cell {display: table-cell;}

Если посмотреть на код HTML примера, то можно легко различить структуру таблицы (используются элементы div и span с классами и ID вместо table , td и tr).

Совсем небольшой код CSS представляет элементы div и span в виде таблицы.

В дополнение к выше приведенным свойствам модель таблицы CSS включает значение inline-table , которая определяет новую таблицу как и display: table , но в рамках контекста встроенного в HTML код формата.

Столбцы и их группировка

Так как ячейки таблицы являются потомками строк таблицы, то для формирования столбцов имеет смысл использовать некоторые свойства. Модель таблицы CSS позволяет применять следующие свойства для столбцов и их группировки:

• border — обычное свойство, пока свойство border-collapse не используется для элемента таблицы;
• background — обычное свойство, пока строка и ячейка имеют прозрачный фон;
• width — установка ширины столбца;
• visibility — если имеет значение collapse (единственное доступное значение), то ячейка столбца не будет выводиться (она объединяется с другими столбцами и ширина таблицы выравнивается).

Стек таблицы CSS

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

Данные слои можно посмотреть на представленном рисунке.

1. таблица - самый нижний слой
2. группа столбцов
3. столбцы
4. группа строк
5. строки
6. ячейки - самый верхний слой

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

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

Алгоритм шаблона таблицы

Ширина таблицы CSS может быть вычислена с помощью одно из двух алгоритмов . Алгоритм выбирается с помощью свойства table-layout и двух значений:

• fixed (фиксированная) — ширина шаблона определяется не содержанием, а установкой ширины таблицы, ячеек, рамок и расстоянием между ячейками;
• auto (автоматическая)— ширина таблицы устанавливается исходя из ширины столбцов и рамок.

Фиксированная модель шаблона вычисляется один раз и очень быстрая. А автоматический режим (используется по умолчанию) требует нескольких проходов по таблице HTML.

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

По умолчанию высота ячейки устанавливается минимально необходимой для вывода содержания. Но вы можете явно определить высоту ячейки. Все ячейки в строке будут иметь высоту ячейки с максимальным значением.

Свойство vertical-align определяет выравнивание содержания в строке

• baseline
• bottom
• middle
• sub, super, text-top, text-bottom, <длина>, <процент>

Последняя группа значений применяется не для ячеек, а для текста в них. Ячейки в данном случае будут выравниваться в соответствии со значением baseline .

Рамки таблицы CSS

Есть три интересных свойства для рамок таблиц:

• border-collapse — может иметь значения collapse , separate , или inherit
• border-spacing — может иметь значения <расстояние_по_горизонтали>, <расстояние_по_вертикали>, или inherit . Определяет дистанцию между рамками ячеек.
• empty-cells — может иметь значения show , hide , или inherit . Если ячейка пустая или имеет свойство visibility: hidden , то содержание не будет выводиться по умолчанию. Установка свойства empty-cells: show приведет к выводу фона и рамки для пустой ячейки.

Нужно ли использовать таблицы CSS?

Лучше ли таблицы CSS чем таблицы HTML? Если да, то в чем их преимущества? Если нет, то почему их не надо использовать? Хорошие вопросы, на которые нет однозначного ответа.

Если рассмотреть использование таблиц HTML в сравнении с комбинацией элементов div и кода CSS, то выявляются следующие недостатки таблиц:

• Дополнительное кодирование — таблицы HTML требуют дополнительного кодирования структуры в сравнении с элементами div . Но и таблицы CSS требуют использования дополнительных классов и идентификаторов.
• Жесткая структура — таблицы HTML очень жестко привязаны к содержанию . Порядок ячеек должен быть таким, каким он будет выводиться. Но такое же ограничение накладывается и на таблицы CSS/
• Вывод в браузерах — браузеры выполняют несколько проходов по структуре HTML таблиц. Но и для CSS таблиц ситуация будет аналогичной.

В соответствии с выше сказанным у таблиц CSS нет существенных преимуществ перед таблицами HTML при использовании их в шаблонах.

CSS таблицы являются более семантическим решением, так как имеется четкое разделение структуры данных и представления внешнего вида.

Заключение

Таблицы CSS достаточно просто освоить и использовать. Но они не имеют явных преимуществ перед таблицами HTML, за исключением более семантического кода.

Может быть практика использования покажет преимущества или недостатки таблиц CSS. Есть ли у вас опыт использования таблиц CSS в реальных проектах?

Многие веб мастера уверены, что использовать HTML таблицы в шаблонах - плохая практика. Но в данном уроке мы рассмотрим только таблицы CSS. Какая разница между таблицами HTML и CSS? Надо ли использовать таблицы CSS? Если да, то как?

Как создать таблицу CSS

Модель CSS таблиц основана на модели таблиц HTML4 и хорошо поддерживается браузерами. В обеих моделях структура таблицы существует параллельно визуальному представлению.

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

Наверняка вы работали с таблицами HTML раньше. Если да, то у вас не будет проблем с созданием таблиц CSS.

Каждый элемент таблицы HTML имеет эквивалент в CSS. Единственное отличие заключается в отсутствии отличий между td и th в варианте CSS.

Ниже приводится список элементов таблиц HTML и соответствующие им значения CSS.

Table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption }

Подписи могут быть размещены сверху или снизу таблицы с помощью свойства caption-side:

#caption {caption-side: top} #caption {caption-side: bottom}

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

#table {display: table;} .row {display: table-row;} .cell {display: table-cell;}

Если посмотреть на код HTML примера, то можно легко различить структуру таблицы (используются элементы div и span с классами и ID вместо table , td и tr).

Совсем небольшой код CSS представляет элементы div и span в виде таблицы.

В дополнение к выше приведенным свойствам модель таблицы CSS включает значение inline-table , которая определяет новую таблицу как и display: table , но в рамках контекста встроенного в HTML код формата.

Столбцы и их группировка

Так как ячейки таблицы являются потомками строк таблицы, то для формирования столбцов имеет смысл использовать некоторые свойства. Модель таблицы CSS позволяет применять следующие свойства для столбцов и их группировки:

• border — обычное свойство, пока свойство border-collapse не используется для элемента таблицы;
• background — обычное свойство, пока строка и ячейка имеют прозрачный фон;
• width — установка ширины столбца;
• visibility — если имеет значение collapse (единственное доступное значение), то ячейка столбца не будет выводиться (она объединяется с другими столбцами и ширина таблицы выравнивается).

Стек таблицы CSS

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

Данные слои можно посмотреть на представленном рисунке.

1. таблица - самый нижний слой
2. группа столбцов
3. столбцы
4. группа строк
5. строки
6. ячейки - самый верхний слой

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

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

Алгоритм шаблона таблицы

Ширина таблицы CSS может быть вычислена с помощью одно из двух алгоритмов . Алгоритм выбирается с помощью свойства table-layout и двух значений:

• fixed (фиксированная) — ширина шаблона определяется не содержанием, а установкой ширины таблицы, ячеек, рамок и расстоянием между ячейками;
• auto (автоматическая)— ширина таблицы устанавливается исходя из ширины столбцов и рамок.

Фиксированная модель шаблона вычисляется один раз и очень быстрая. А автоматический режим (используется по умолчанию) требует нескольких проходов по таблице HTML.

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

По умолчанию высота ячейки устанавливается минимально необходимой для вывода содержания. Но вы можете явно определить высоту ячейки. Все ячейки в строке будут иметь высоту ячейки с максимальным значением.

Свойство vertical-align определяет выравнивание содержания в строке

• baseline
• bottom
• middle
• sub, super, text-top, text-bottom, <длина>, <процент>

Последняя группа значений применяется не для ячеек, а для текста в них. Ячейки в данном случае будут выравниваться в соответствии со значением baseline .

Рамки таблицы CSS

Есть три интересных свойства для рамок таблиц:

• border-collapse — может иметь значения collapse , separate , или inherit
• border-spacing — может иметь значения <расстояние_по_горизонтали>, <расстояние_по_вертикали>, или inherit . Определяет дистанцию между рамками ячеек.
• empty-cells — может иметь значения show , hide , или inherit . Если ячейка пустая или имеет свойство visibility: hidden , то содержание не будет выводиться по умолчанию. Установка свойства empty-cells: show приведет к выводу фона и рамки для пустой ячейки.

Нужно ли использовать таблицы CSS?

Лучше ли таблицы CSS чем таблицы HTML? Если да, то в чем их преимущества? Если нет, то почему их не надо использовать? Хорошие вопросы, на которые нет однозначного ответа.

Если рассмотреть использование таблиц HTML в сравнении с комбинацией элементов div и кода CSS, то выявляются следующие недостатки таблиц:

• Дополнительное кодирование — таблицы HTML требуют дополнительного кодирования структуры в сравнении с элементами div . Но и таблицы CSS требуют использования дополнительных классов и идентификаторов.
• Жесткая структура — таблицы HTML очень жестко привязаны к содержанию . Порядок ячеек должен быть таким, каким он будет выводиться. Но такое же ограничение накладывается и на таблицы CSS/
• Вывод в браузерах — браузеры выполняют несколько проходов по структуре HTML таблиц. Но и для CSS таблиц ситуация будет аналогичной.

В соответствии с выше сказанным у таблиц CSS нет существенных преимуществ перед таблицами HTML при использовании их в шаблонах.

CSS таблицы являются более семантическим решением, так как имеется четкое разделение структуры данных и представления внешнего вида.

Заключение

Таблицы CSS достаточно просто освоить и использовать. Но они не имеют явных преимуществ перед таблицами HTML, за исключением более семантического кода.

Может быть практика использования покажет преимущества или недостатки таблиц CSS. Есть ли у вас опыт использования таблиц CSS в реальных проектах?

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

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

Язык гипертекстовой разметки HTML предоставил нам большое количество возможностей, чтобы осуществить привязку CSS стилей к десяти уникальным тегам, предназначенных для работы с таблицами, предлагаю их повторить перед дальнейшим изучением:

Результат нашего примера:

Рис. 153 Пример стилизации строк в таблицах

Следующий пример рассматривает применение скругления углов к ячейкам таблицы (свойство ).

В этом примере мы:

• Отцентровали таблицу внешними отступами, задали для заголовочных ячеек ширину и высоту 50px , указали прозрачную границу 5 пикселей.
• Установили, что при наведении (псевдокласс :hover) на заголовочную ячейку она получает задний фон синего цвета, оранжевый цвет текста, границу оранжевого цвета 5 пикселей и радиус скругления 100% .
• Прозрачная граница необходима для того, чтобы зарезервировать место под границу, которая будет отображена при наведении, если этого не сделать таблица будет «прыгать».

Результат нашего примера:

Следующий пример затрагивает использование HTML элементов