Стильная таблица css. Чередование фона столбцов. Отступы в ячейках

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

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

Основа таблицы

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

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

Заключительный этап построения таблицы является создание ячеек . Для этой цели есть две категории тегов:

• - парный тег создает ячейку, которая служит заголовком столбца, данный тег является не обязательным;
• - обязательный парный тег создает ячейки - основу таблицы;

Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4	Заголовок 5
Ячейка 1,1	Ячейка 1,2	Ячейка 1,3	Ячейка 1,4	Ячейка 1,5
Ячейка 2,1	Ячейка 2,2	Ячейка 2,3	Ячейка 2,4	Ячейка 2,5
Итог 1	Итог 2	Итог 3	Итог 4	Итог 5

Рис 1. Таблица

Как видно из кода расположенного выше, таблица содержит четыре строки () и пять столбцов. Ячейки первой строки - заголовки столбцов (). Со второй строки по четвертую ячейки содержат основные данные таблицы(). Теги , универсальны, и могут содержать в себе не только обычный текст, но и всевозможные теги, вплоть до других таблиц!

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

• Парный тег основа таблицы, все остальные теги вложены в него;
  Парный тег
  второй уровень таблицы или ее строка, должен быть вложен в тег ;
  Парные теги
  и содержат табличные данные;
  Если поместить любой другой тег или текст вне парного тега
  - Секция заголовков столбцов;
  - Секция основы таблицы;
  - Секция итоговых данных, резюмирующая всю таблицу;
  , , , помещаются внутрь таблицы

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

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

  Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4	Заголовок 5
Ячейка 1,1	Ячейка 1,2	Ячейка 1,3	Ячейка 1,4	Ячейка 1,5
Ячейка 2,1	Ячейка 2,2	Ячейка 2,3	Ячейка 2,4	Ячейка 2,5
Итог 1	Итог 2	Итог 3	Итог 4	Итог 5

  Рис. 2. Таблица с заголовком.

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

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

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

  , и должны содержать теги :

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

  Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4	Заголовок 5
  Ячейка 1,1	Ячейка 1,2	Ячейка 1,3	Ячейка 1,4	Ячейка 1,5
  Ячейка 2,1	Ячейка 2,2	Ячейка 2,3	Ячейка 2,4	Ячейка 2,5
  Итог 1	Итог 2	Итог 3	Итог 4	Итог 5

  Объединение ячеек

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

  1. Для объединения по горизонтали первых четырех ячеек последней строки таблицы, необходимо атрибуту COLSPAN тега (в котором содержится текст “Итог 1”) присвоить значение 4:

  Итог (1+2+3+4)

  2. Для объединения ячеек по вертикали основной части документа (часть ), воспользуйтесь атрибутом ROWSPAN со значением 2:

  Ячейка (1,1+2,1) Ячейка (1,2+2,2) Ячейка (1,3+2,3) Ячейка (1,4+2,4)

  Обратите внимание, если объединять ячейки атрибутами COLSPAN или ROWSPAN, необходимо убрать из кода объединенные ячейки, кроме той с которой начинается объединение, их количество будет зависеть от значения атрибута COLSPAN, ROWSPAN.

  То есть, в примере 1, объединяются четыре ячейки, начиная с первой, которой назначается атрибут COLSPAN=4 (т.к. с нее начинается объединения), остальные три необходимо удалить (т.к. они считаются объединенными). В коде останется только пятая ячейка (т.к. она не входит в объединение).

  По такому же принципу будет объединение по вертикали. Во втором примере, первым четырем ячейкам строки присваивается атрибут ROWSPAN=2, в результате первые четыре нижние ячейки убираются из кода, т.к. они считаются объединенными. Кроме последней, которая не входит в объединение.

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

  Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4	Заголовок 5
  Ячейка (1,1+2,1)	Ячейка (1,2+2,2)	Ячейка (1,3+2,3)	Ячейка (1,4+2,4)	Ячейка 1,5
  				Ячейка 2,5
  Итог 1+ Итог 2+ Итог 3+ Итог 4	Итог 5

  

  Рис. 4. Объединение ячеек таблицы с помощью атрибутов COLSPAN, ROWSPAN.

  Оформление таблиц CSS свойствами

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

  ,

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

  К счастью, есть 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

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

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

  width и height

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

  .

  Рамки для ячеек

  Рамку вокруг ячеек можно рисовать с помощью CSS свойства border , со следующим синтаксисом:

  Border: “толщина линии” “тип начертания” “цвет”;

  • толщина линии - может задаваться в пикселях (px), а также с помощью специальных зарезервированных слов: thin (2 px), medium (4 px) и thick (6 px);
  • тип начертания - значения атрибута специальные слова: dotted (точечный пунктир), dashed(пунктирная линия), solid (линия), double (двойная линия) и т.д.

  Рис 5. Применение к ячейкам таблицы свойства border, для обрамления каждой ячейки рамкой.

  Если необходимо, чтобы рамка была только между ячейками, а не обрамляла каждую в отдельности, необходимо воспользоваться стилевым свойством border-collapse , принимающее значение:

  • collapse - рамка между ячейками только одна;
  • separate - каждая ячейка обрамляется собственной рамкой;

  Рис 6. Применение к таблице свойства border-collapse. Соседние ячейки отделяются одной рамкой.

  Размеры ячеек

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

  Рис 7. Применение свойства width и height, для задания ширины и высоты ячеек.

  Отступы в ячейках

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

  • padding - внутренний отступ, значение устанавливается в пикселях (px);
  • border-spacing - внешний отступ, значение устанавливается также в пикселях (px). Данный параметр не следует употреблять, если {border-collapse:collapse}, т.к. отступ устанавливается между границами соседних ячеек, а при наличие указанного свойства соседние ячейки отделены лишь одной рамкой;

  Рис. 8. Применение к таблице свойства padding, для задания отступов.

  Расположение заголовка

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

  • top - заголовок располагается над таблицей;
  • bottom - заголовок располагается под таблицей;

  Цвет ячеек

  Для закрашивания ячейки определенным цветом необходимо воспользоваться свойством background-color :

  Рис. 10. Выравнивание содержимого ячеек свойствами text-align и vertical-align.

  Оформление содержимого ячейки

  Под оформление содержимого понимается форматирование текста находящегося в ячейках. Основное CSS свойство, применяемое для этой цели является font :

  Рис. 11. Оформление содержимого ячейки свойством font.

  Все CSS стили применяемые к таблице

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

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

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

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

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

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

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

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

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

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

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

  Язык	Переводы
русский	один	два	три	четыре
английский	one	two	three	four
немецкий	eins	zwei	drei	vier

  Пожалуй, остановлюсь на тегах 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, но зачастую используются пиксели (px ) и проценты (% ). Последние настраивают ширину относительно родительского элемента, первые же задают абсолютную величину.

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

  caption-side

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

  и (пример 4).

  Пример 4. Создание зебры

  . Свойству можно задавать значения:

  • top - расположить над таблицей.
  • bottom - разместить под таблицей.

  Эксклюзивно для обозревателя Firefox доступны значения left (заголовок слева) и right (справа от таблицы), но другие браузеры их не понимают.

  Table {caption-side: top;}

  border-collapse

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

  Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate; даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse; (результат показан на рисунке ниже).

  border-spacing

  Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе - по вертикали. Свойство несовместимо с правилом table {border-collapse: collapse;} .

  Table { border: 4px double #FCA360; border-collapse: separate; border-spacing: 10px 20px; } td { padding: 3px; border: 1px solid #FCA360; }

  Задаёт таблице следующее оформление:

  empty-cells

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

  • show - показывать границы и фон (по умолчанию).
  • hide - скрыть их. Если все ячейки строки пусты, то будет скрыта, соответственно, вся строка. Если таблице задано правило border-collapse: collapse; , то свойство игнорируется.

  table-layout

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

  • auto . Ширина определяется автоматически. При этом либо суммируется ширина всех столбцов, либо берётся значение свойства width , если таблице оно задано. Браузер сначала загружает таблицу, потом анализирует её, определяя ширину, и только после этого отображает.
  • fixed . Фиксированная ширина, которая определяется по первой строке.

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

  Не забывайте, что таблице можно задавать и другие универсальные правила, например, как мы это делали с высотой (height ) и шириной (width ).

  Помня это, оформим несложную таблицу, частично прокомментировав код.

  Пример таблицы

  Цены	2014	2015	2016
Хлеб	16	18	21
Сахар	35	44	50
Соль	8	8,50	9

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

  width: 50%;

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

  caption-side: bottom;

  Размещаем заголовок снизу, под таблицей.

  border: 4px solid #006400;

  Задаём таблице цветную рамку толщиной 4 пикселя.

  border-collapse: collapse;

  Объединяем границы ячеек.

  table-layout: fixed;

  Настраиваем способ определения браузером ширины таблицы.

  font-size: 13px;

  Задаём размер шрифта заглавных ячеек.

  font-weight: bold;

  Делаем текст внутри них жирным.

  background: #ADFF2F;

  Устанавливаем цвет фона ячеек.

  border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;

  Настраиваем верхние и нижние рамки.

  color: #039;

  Определяем цвет текста.

  padding: 8px;

  Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям.

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

  В таблицах можно преобразить практически всё. Красивое оформление таблиц CSS подразумевает использование оформления границ, фона таблицы, фона ячеек, промежутка между ними и многого другого. Рассмотрим самое основное.

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

  Стиль оформления таблицы CSS всегда подразумевает игру с границей (рамкой). Все таблицы по умолчанию не обводятся рамкой. То есть она равна 0 пикселям. Но это можно исправить при помощи свойства border.

  Можно указать внешнюю рамку для всей таблицы:

  table { border: 3px solid black; }

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

  th, td {border: 3px solid black;}

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

  Слово solid обозначает сплошное оформление. Указывать можно и другие значения.

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

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

  table {border-top: 1px solid red; }

  Так можно задать рамку только для верхней части таблицы. Аналогично и для любых других сторон, просто вместо top пишем: right, left или bottom.

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

  Заголовок таблицы можно указать при помощи тега

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

  Этот заголовок отображается так же, как стандартно в книгах (например "Таблица 1").

  Указать можно и расположение этого заголовка свойством caption-side (top или bottom). Выравнивание слева или справа задается свойством text-align.

  Фон таблицы

  Фоном таблицы может быть какой-нибудь цвет или рисунок. Цвет задается свойством background-color. Названия свойств полностью соответствуют употребляющимся в речи. Это облегчает запоминание во много раз.

  Цвет можно указывать как названием, так и различными кодировками. Кроме этого, можно указать следующее:

  • Transparent - прозрачность элемента.
  • Inherit - цвет такой же, как и у родительского элемента.
  • Initial - значение по умолчанию.

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

  Кроме этого, фоном может быть изображение. Для этого в стиле прописывается свойство background-image. Путь указывается вот так:

  Путь до файла может быть как относительным, так и абсолютным.

  Более сложную заливку можно делать градиентом:

  • linear-gradient();
  • radial-gradient();
  • repeating-linear-gradient() и repeating-radial-gradient() - повтор градиента.

  Фон ячеек

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

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

  • tr:nth-child (even) { ... } - указание чередования строк;
  • tr:nth-child (1) { ... } - указание свойства конкретной строки;
  • td:nth-child (even) { ... } - указание чередования столбцов;
  • td:nth-child (1) { ... } - указание свойства конкретного столбца.

  Кроме чередования и номеров, можно указывать - первый (td:first-child) или последний (td:last-child).

  Промежуток между ячейками

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

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

  border-collapse: collapse

  Но бывает и так, что расстояние, наоборот, нужно увеличить. Причем размер промежутков можно указать как между столбцами, так и между строками. Для этого указываем следующее значение (вместо collapse):

  border-collapse:separate

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

  border-spacing: 20px.

  Если нужно указать разное расстояние между строками и колонами, то указывается два значения:

  border-spacing:10px20px.

  Разница в браузерах

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

  Выше приведен пример толщины рамки для цифровых значений.

  Стили рамок также сильно отличаются.

  Поэтому при разработке всегда смотрите результат в разных браузерах.

  Совсем продвинутые разработчики могут в зависимости от браузера подключать совершенно разные CSS файлы. А кто-то делает проверки в каждом или каком-нибудь конкретном стиле (классе).

  Больше всего проблем возникает с тенями.

  CSS: оформление таблиц, примеры

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

  Приведем примеры различных таблиц. На рисунке выше показано использование наклона и игра с и границ.

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

  Края можно делать скругленными. Смотрится довольно красиво.

  Заключение

  Как видите, для оформления внешнего вида таблиц в CSS существует огромное количество инструментов. У каждого параметра также огромное количество вариантов значений. Если пользоваться всем этим сразу, можно создавать шедевры. Особенно если делать под все браузеры.

  Главное при оформлении - не переборщить с эффектами. Всё нужно делать в меру. На первых порах верстальщики любят экспериментировать и используют сразу все свои знания. В итоге таблицы оказываются перенасыщенными свойствами. Старайтесь избегать этих ошибок.

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

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

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

  По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

  Пример 1. Ширина таблицы в процентах

  Table { width: 100%; } .tbl-medium { width: 60%; } .tbl-small { width: 200px; }

  В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу

  класс tbl-small .

  Выравнивание таблиц

  Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto , как показано в примере 2.

  Пример 2. Выравнивание таблицы с помощью margin

  ...

  В данном примере для всех таблиц на странице задано выравнивание по центру.

  Цвет фона

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

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

  Вид соединения
	Вал	Втулка
Свободное	H9	D10
Нормальное	N9	Is9
Плотное	P9

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

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

  Если нам требуется сделать зебру - так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child , добавляя его к селектору tr . Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов

  Интервалы размеров, мм	Допуск IT, мкм, для квалитетов
  	5	6	7	8
  До 3	4	6	10	14
  Св. 3 до 6	5	8	12	18
  Св. 6 до 10	6	9	15	22
  Св. 10 до 18	8	11	18	27
  Св. 18 до 30	9	13	21	33
  Св. 30 до 50	11	16	25	39
  Св. 50 до 80	13	19	30	46

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

  

  Рис. 2. Зебра

  Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd , тогда серым цветом будут выделяться нечётные строки.

  Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even) .

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

  Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding , которое работает с селектором td или th , как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

  Расстояние между ячеек

  Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing , добавляя его к селектору table (пример 5).

  Пример 5. Использование border-spacing

  Table { border-spacing: 3px; /* Расстояние между ячеек */ } thead th { background: #e08156; /* Цвет фона заголовка */ color: #333; /* Цвет текста */ } td, th { padding: 5px; /* Поля в ячейках */ background: #4c715b; /* Цвет фона ячеек */ color: #f5e8d0; /* Цвет текста */ }

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

  

  Рис. 3. Вид таблицы с расстоянием между ячеек

  Если к table добавляется свойство border-collapse со значением collapse , то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

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

  Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border , которое применяется к элементам ( или ). Однако здесь нас подстерегают подводные камни. Поскольку рамка создаётся для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для устранения указанной особенности существует несколько путей. Самый простой - воспользоваться свойством border-collapse со значением collapse . В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Это свойство достаточно добавить к селектору table , а дальше оно всё сделает самостоятельно (пример 6).

  Пример 6. Применение свойства border-collapse при создании рамок таблицы

  O	X	X
  O	O	X
  X	X	O

  Разница между границами таблицы при добавлении свойства border-collapse , а также без него, представлена на рис. 4.

  

  

  Рис. 4. Вид таблицы при использовании border-collapse

  На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

  Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom , border-left и другие подобные. Применять границы к элементам , , и нельзя, поэтому добавляем их к селектору table и td (пример 7).

  Пример 7. Линии между строк

  Вид соединения	Поля допусков ширины шпоночного паза
  	Вал	Втулка
  Свободное	H9	D10
  Нормальное	N9	Is9
  Плотное	P9

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

  

  Рис. 5. Таблица с горизонтальными линиями

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

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

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

  В данном примере содержимое выравнивается по левому краю, а содержимое - по центру. Результат примера показан ниже (рис. 6).

  

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

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

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

  Вид соединения	Поля допусков ширины шпоночного паза
  	Вал	Втулка
  Свободное	H9	D10
  Нормальное	N9	Is9
  Плотное	P9

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