Красивое оформление таблиц 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 в реальных проектах?

Привет, друзья!

Каждый, кому приходилось вести блог, наверняка сталкивался с таблицами. Как их создавать рассказывать не буду. А вот про красивую «разлиновку» поговорим.

Оформлять будем, конечно же, с помощью CSS. Научимся делать «зебру» - не только горизонтальную, но и вертикальную. Поехали!

Пример красивой таблицы

Как видим, оформление коснулось всех основных аспектов:

1. Заголовки отличаются от остальных строк.
2. Строки чередуются цветом для более удобного восприятия.
3. В столбцах так же чередуется цвет. Это помогает не потерять нужный столбец при движении вверх/вниз.
4. Если навести мышку на строку, та подсветится. Это удобно для громоздких таблиц.

Что же, основые моменты определили, давайте пытаться реализовать.

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

Итак, у нас есть таблица table, заголовок thead и тело tbody. В свою очередь thead и tbody содержат строки - tr. Строки разбиваются на ячейки - th и td. Формально, для ячейки подходят оба тега, но семантически верно для заголовков использовать th, для остального - td.

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

Исходный код таблицы:

Пожалуй, остановлюсь на тегах colgroup и col . Теги нужны для описания стилей колонок таблицы. Формально, колонок нет - есть строки и ячейки. Из-за этого теги и не используются. Но в нашем случае они необходимы для того, чтобы не прописывать вручную классы каждой ячейке.

Оформление заголовка

Настало время небольшой CSS-магии. Определим стили для ячеек-заголовков. Пусть они будут фиолетовые, с жирным шрифтом и текстом, выровненным по левому краю:

Table.zebra thead th { background-color: rgba(204, 204, 255, 0.4); font-weight: bold; text-align: left; }

Возможно, кто-то спросит, почему я задал цвет не в виде rgb() или более привычного #CCCCFF? Всё просто: без полупрозрачности цвета будут перекрываться и получится совсем не то, что нам нужно. Просто посмотрте на рисунок:

Чередование фона строк

Раньше (да и сейчас порой) можно было встретить в HTML-коде такое:

нечет чёт

Программно подставляется соответствующий класс для чётной и нечётной строк. Представьте, что каждую строку нужно «помечать» соответствующим образом. Дичь? А то! И ладно это формирует скрипт, но представьте, что таблица большая, строки добавляются/удаляются вручную. Смекаете, куда клоню? При добавлении новой строки в середину таблицы всем остальным за ней придётся вручную менять название класса, чтобы не сбить чересполосицу.

К счастью, есть CSS, благодаря которому это делается не просто, а очень просто. Делаем!

/* нечётные строки таблицы - красные */ table.zebra tbody tr:nth-child(odd) { background-color:rgba(255, 0, 0, 0.2); } /* чётные строки - зелёные */ table.zebra tbody tr:nth-child(even) { background-color:rgba(0, 255, 0, 0.2); }

И всё. Изи)

Главное, учтите, что нумерация начинается с нуля, поэтому к первой строке таблицы будет применён стиль для чётной строки even .

Чередование фона столбцов

Здесь всё аналогично, только «чередовашки» описываем для элементов col:

Table.zebra col:nth-child(odd) { background-color:rgba(255, 255, 255, 0.2); } table.zebra col:nth-child(even) { background-color:rgba(0, 0, 0, 0.1); }

Чётные строки будут чёрные, нечётные - белые. Не забываем про полупрозрачность!

Выделение строки при наведении мышкой

Осталось самое лёгкое. Когда курсор находится над любой строкой, просто заливаем её жёлтым. Главное помнить про полупрозрачность, чтобы вертикальная разлиновка была видна.

Table.zebra tbody tr:hover { background-color:rgba(255, 255, 0, 0.2); }

Вот и всё. Окончательный вариант . Для сохранения файла себе просто нажмите Ctrl-S на открывшейся странице. Там ничего не подсасывается, не нужны сторонние библиотеки и прочее, только голый HTML со стилями.

PS: «Нафига это нужно?» - спросит пытливый читатель. В самом деле, для трех строк и пяти столбцов не много ли чести? Но представьте, что строк тридцать, плюс десяток столбцов, и подобные труды уже не кажутся излишеством. В конце концов, посмотрите таблицы в phpMyAdmin. Очевидно, что без такой раскраски работать было бы крайне неудобно.

Дополнение

Вариант для тех, кого полностью устраивает функциональность редактора CMS. Качаем .

Отличия: стили применяются к таблицам (тег table ), «вертикальная» линовка вынесена на th /td . Но! Редактор CMS должен генерировать thead и tbody . Это означает, что colgroup /col более не нужны, но не отменяет необходимость «правильного кода» со стороны движка.

Можно усложнить ещё немного, предположить, что первая строка всегда является заголовком, когда нужно убрать из css упоминания о tbody/thead, а для первой строки определить:

Table tr:first-child

Table thead tr

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

Без стилей наша таблица выглядит совсем просто и невзрачно:

Рисунок 1. Вид таблицы без стилей.

Давайте добавим стили, чтобы она была покрасивее:

Теперь наша таблица выглядит так:

В этом стиле нужно обратить внимание на правило:

/* Устанавливаем подсветку строки при наведении курсора */ tr+tr:hover{ background-color: #e6e3da; }

Тут используется селектор соседнего элемента (знак плюс) и псевдокласс :hover ,который определяет стиль элемента при наведении на него курсора мыши.

Нам же не нужно менять при наведении фоновый цвет (background-color ) шапки таблицы, так? Нам нужно менять фоновый цвет для всех строк, кроме первой.

Соседний селектор tr+tr будет применён ко всем строкам, кроме первой. Подробно про соседние селекторы читайте тут. А псевдокласс :hover указывает что применять стиль из правила CSS нужно только при наведении курсора.

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

В примере ниже комментарий только к добавленому коду.

В работе этого примера ничего не изменилось, но и не должно было. Просто если сейчас вы сохраните этот пример себе на компьютер, а в примере добавите вторую таблицу, например скопируете имеющийся код таблицы, но удалите class ="river ", но стиль будет применён только к таблице с установленным классом. Это простые основы CSS.

Второй пример

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

Для решения этой задачи будем использовать псевдокласс :first-child . При помощи этого псевдокласса можно обратиться к первым ячейкам каждой строки.

Это очень простой пример. А давайте используя дочерние селекторы обратимся к этим элементам.

В нашем коде у тега предок , а у него предок

И теперь мы видим, что наш стиль не работает. Почему? Ведь селектор на первый взгляд указан правильно. Всё дело в том, что после тега

Этот момент в работе с таблицами нужно обязательно знать.

Теперь ещё один момент, хотя он не имеет прямого отношения к таблицам, но при работе с ними могут часто возникать подобные вопросы. Рассмотрим его на примере этого кода. Например, мы хотим установить красный фоновый цвет для ячеек последней строки. Будем использовать для этого класс (class ="my-td ").

В результате класс сработал во второй ячейке ("Лондон"), но не сработал в первой ячейке, для которой сработал селектор table > tbody> tr > td:first-child .

Почему так случилось?

Потому что селектор table > tbody> tr > td:first-child имеет больший "вес" (значимость) для CSS, т.к. он более конкретизирован.

Как это исправить?

Можно использовать более конкретизированный селектор для определения класса: table > tbody> tr > td.my-td .

Можно использовать правило !important . Это правило повышае приоритет стиля, это использование этого правила считается крайним случаем.

Вместо классов в данном случае можно использовать идентификаторы id , их приоритет выше и стиль будет выполняться.

У каждого браузера свои приоритеты, про строгий стандарт я не читал нигде. Но общие правила есть:

1. чем конкретнее селектор, тем больше его вес;
2. id главнее class .

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

Но, что касается CSS, то следует помнить, что CSS плохо работает по выбору ячеек таблицы (тег ). Класс лучше присваивать строке (тег ), а потом с помощью селектора с псевдоклассом td:nth-child(n) указывать нужную ячейку.

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

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

Форматирование таблиц

1. Границы таблицы border

Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border:

Table { border-collapse: collapse; /*убираем пустые промежутки между ячейками*/ border: 1px solid grey; /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/ }

Границы ячеек заголовка каждого столбца задаются для элемента th:

Th {border: 1px solid grey;}

Границы ячеек тела таблицы задаются для элемента td:

Td {border: 1px solid grey;}

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

Th, td {border: 1px solid grey;}

Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:

Table {border: 3px solid grey;}

Границы можно задавать частично:

/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */ table {border-top: 3px solid grey; } /* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */ td {border-bottom: 1px solid grey;}

Подробнее о свойстве border вы можете прочитать .

2. Как задать ширину и высоту таблицы

По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).

Ширина таблицы и столбцов задаётся с помощью свойства width . Если для таблицы задано table {width: 100%;} , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.

Ширину таблицы и столбцов обычно задают в px или % , например:

Table {width: 600px;} th {width: 20%;} td:first-child {width: 30%;}

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

Th, td {padding: 10px 15px;}

3. Как задать фон таблицы

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

4. Столбцы таблицы

Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега

с помощью тега

Можно задать фон для любого количества столбцов;

с помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);

с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.

Подробнее про CSS-селекторы вы сможете прочитать .

5. Как добавить таблице заголовок

Добавить заголовок в таблицу можно с помощью тега , а с помощью свойства caption-side его можно поместить перед таблицей или под ней. Для горизонтального выравнивания текста заголовка применяется свойство text-align . Наследуется.

6. Как убрать промежуток между рамками ячеек

Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся. Свойство наследуется.

Синтаксис

Table {border-collapse: collapse;}
Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек

7. Как увеличить промежуток между рамками ячеек

С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется.

Синтаксис

Table {border-collapse: separate; border-spacing: 10px 20px;} table {border-collapse: separate; border-spacing: 10px;} Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек

8. Как скрыть пустые ячейки таблицы

Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;} , то ячейка не будет скрыта. Наследуется.

9. Компоновка макета таблицы с помощью свойства table-layout

Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется.

Синтаксис

Table {table-layout: fixed;}

10. Лучшие макеты таблиц

1. Горизонтальный минимализм

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

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

Td { border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; }/*остальной код - как в примере выше*/

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

Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:hover td {background: #e8edff;}

2. Вертикальный минимализм

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

Th { font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; } td { border-right: 30px solid #fff; border-left: 30px solid #fff; color: #669; padding: 12px 2px; }

3. «Коробочный» стиль

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

Th { font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px; } td { background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; padding: 8px; } tr:hover td {background: #ccddff;}

Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.

Table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; } th { font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border-left: 1px solid #9baff1; color: #039; padding: 8px; } td { background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; padding: 8px; }

4. Горизонтальная зебра

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

Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:nth-child(2n) {background: #e8edff;}

5. Газетный стиль

Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект:hover при наведении на строку.

Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; border-bottom: 1px dashed #69c; padding: 12px 17px; } td { color: #669; padding: 7px 17px; } tr:hover td {background: #ccddff;}

Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; padding: 10px; } td { color: #669; border-top: 1px dashed #fff; padding: 10px; background:#ccddff; } tr:hover td {background: #99bcff;}

Table {border: 1px solid #6cf;} th { font-weight: normal; font-size: 13px; color: #039; text-transform: uppercase; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; border-left: 1px solid #0865c2; border-bottom: 1px solid #fff; padding: 20px; } td { color: #669; border-right: 1px dashed #6cf; padding: 10px 20px; }

6. Фон таблицы

Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.

Jpg") no-repeat; background-position: 100% 55px; } th { font-weight: normal; color: #339; padding: 10px 12px; } td { background: url("https://сайт/images/back..png"); background: transparent; }

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

width и height

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

Table {width: 450px; height: 80%;}

caption-side

Указывает, где будет размещён заголовок таблицы, описанный тегом