Оформление таблиц

Выравнивание текста

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

table {
  width: 100%;
}

th, td {
  width: 25%;
  text-align: left;
}

Это немного улучшает внешний вид, как можно видеть на рис 33.2:(рис 33.2) Таблица с выравниванием слева

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

table {
  width: 100%;
}

th, td {
  width: 25%;
  text-align: left;
  vertical-align: top;
}

Таблица теперь выглядит как на рис 33.3:(рис 33.3) Таблица с добавленным вертикальным выравниванием

Обратите внимание, что верхняя строка заголовков столбцов выровнена по верху, даже хотя "Last Major Eruption" располагается на двух строках.

Границы

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

Чтобы показать, где будут задана граница, рисунок ниже показывает различные границы для таблицы (сплошная черная), заголовка таблицы (сплошная серая),

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

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

table {
  width: 100%;
  border: 1px solid #000;
}

th, td {
  width: 25%;
  text-align: left; 
  vertical-align: top; 
  border: 1px solid #000;
}

Получаемый результат показан на рис 33.4:(рис 33.4) Таблица с простыми черными границами

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

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

table {
  width: 100%;
  border: 1px solid #000;
}

th, td {
  width: 25%;
  text-align: left; 
  vertical-align: top;
  border: 1px solid #000;
  border-spacing: 0;
}

Это заставит границы соприкоснуться, вместо раздельного размещения. Граница толщиной 1px заменится границей в 2px, как видно на рис 33.5:(рис 33.5) Таблица с удаленными пробелами между границами, что создает эффект границы толщиной 2px

Можно также увеличить пробел между ячейками, используя border-spacing, хотя помните, что это свойство не работает в браузере Internet Explorer.

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

table {
  width: 100%;
  border: 1px solid #000;
}

th, td {
  width: 25%;
  text-align: left; 
  vertical-align: top; 
  border: 1px solid #000;
  border-collapse: collapse;
  }

Этот код создает таблицу с границей толщиной 1px, как на рис 33.6:(рис 33.6) Таблица со свойством border-collapse, заданным как collapse, уменьшает толщину границы до 1px

Когда задается схлопывание границ, необходимо помнить, что это может создавать проблемы, если к смежным ячейкам были применены различные стили оформления границ. Когда схлопываются различные стили границ, они могут "конфликтовать" друг с другом. Это разрешается согласно правилам разрешения конфликтов границ таблиц спецификации W3C CSS2 (http://www.w3.org/TR/REC-CSS2/tables.html#border-conflict-resolution), которые определяют, какие стили "выигрывают", когда они схлопываются.

Заполнение

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

table {
  width: 100%;
  border: 1px solid #000;
}

th, td {
  width: 25%;
  text-align: left; 
  vertical-align: top; 
  border: 1px solid #000;
  border-collapse: collapse;
  padding: 0.3em;
}

caption {
  padding: 0.3em;
}

Это позволяет тексту "вздохнуть" немного свободнее, как показано на рис 33.7:(рис 33.7) Таблица с заполнением, добавленным во все ячейки

Размещение заголовка таблицы

До сих пор заголовок таблицы размещался вверху таблицы. Однако можно переместить заголовок таблицы в другое место. К сожалению, это невозможно сделать в браузере IE, но для всех других браузеров можно изменить положение заголовка таблицы с помощью свойства caption-side. Вариантами размещения являются top, bottom, left и right (вверху, внизу, слева, справа). Давайте переместим заголовок таблицы вниз:

table {
  width: 100%;
  border: 1px solid #000;
}

th, td {
  width: 25%;
  text-align: left; 
  vertical-align: top; 
  border: 1px solid #000;
  border-collapse: collapse;
  padding: 0.3em;
  caption-side: bottom;
}

caption {
  padding: 0.3em;
}

рис 33.8 показывает результат.(рис 33.8) Таблица с заголовком, перемещенным вниз таблицы

Если вы захотите переместить заголовок таблицы, помните, что любые стили ), чтобы переоформить таблицу для IE. Смотрите также подробнее позже в разделе "Исправление IE с помощью условных стилей".

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

Фон

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

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

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

Предположим, что для таблицы задан красный фон, а для ячеек белый. Разделенные ячейки будут показывать красный фон таблицы, но ячейки будут оставаться белыми, как показано на рис 33.9:(рис 33.9) Красный фон элемента таблицы просвечивает между белыми элементами ячеек

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

table {
  border-collapse: separate;
  border-spacing: 5px;
  background: #000 url("gradient.gif") bottom left repeat-x;
  color: #fff;
}

td, th {
  background: #fff;
  color: #000;
}

Отметим, что для фона задан черный цвет, который будет заполнять пространство вверху, где заканчивается изображение градиента (вы должны всегда предусматривать, чтобы таблица была больше по высоте фонового изображения). Цвет переднего плана задается белым, чтобы эти цвета по умолчанию всегда просвечивали через контент ячейки. Обычно, оформление ячеек будет переопределять настройки цвета текста из таблицы стилей table {}, но нужно всегда объявлять контрастные цвета фона и переднего плана на каждом уровне.

Эти стили оформления создают таблицу, которая будет выглядеть как на рис 33.10 в большинстве браузеров:(рис 33.10) Таблица, демонстрирующая градиентное фоновое изображение, просвечивающее между ячейками

По умолчанию браузер IE не покажет фоновое изображение в такой же степени, так как он не поддерживает свойство .(рис 33.11) Браузер IE выводит между границами пробел меньшей величины

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

Исправление IE с помощью условных стилей

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

table {
  border-collapse: expression("separate", cellSpacing = "5px");
}

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

Для этого создаем новую таблицу стилей с именем ie-only.css и присоединяем ее в условном комментарии:

<!--[if lte IE 7]><link rel="stylesheet" media="screen" href="ie-only.css"/><![endif]-->

Отметим, что [if lte IE 7] означает "если меньше или равно IE версии 7". Это условие открывает код для браузера IE7 и более ранних версий IE, в то время как окружающий комментарий HTML скрывает код от всех остальных браузеров. Можно настроить это выражение в соответствии с требуемой версией IE, например, для версии IE6 и более ранних используйте [if lte IE 6] .

В основной таблице стилей задайте нормальный стиль:

table {
  border: 1px solid #000;
  border-collapse: separate;
  border-spacing: 5px;
  background: #000 url("gradient.gif") bottom left repeat-x;
}

И затем установите стиль для IE в ie-only.css:

table {
  border-collapse: expression("separate", cellSpacing = "5px");
}

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

Простой дизайн

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

table {
  width: 100%;
  border: 1px solid #000;
}

th, td {
  width: 25%;
  text-align: left; 
  vertical-align: top; 
  border: 1px solid #000;
  border-collapse: collapse;
  padding: 0.3em;
  caption-side: bottom; 
}

caption {
  padding: 0.3em;
  color: #fff;
  background: #000;
}

th {
  background: #eee;
}

Полученный результат выглядит как на рис 33.12:(рис 33.12) Таблица с негативным белым на черном заголовком таблицы и светло-серым фоном для ячеек заголовков столбцов таблицы

Распространенные варианты использования

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

Разметка зебра

Широко используемым вариантом дизайна для таблиц является создание строк с альтернативными цветами. Это обычно называют "разметкой зебры". Хотя и существуют какие-то сомнения в отношении того, насколько разметка зебры действительно помогает читателю (http://www.alistapart.com/articles/zebrastripingdoesithelp), она является популярным стилем оформления. рис 33.13 показывает пример:(рис 33.13) Таблица с "разметкой зебры", поочередно задающая строки с белым и светло-серым фоном

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

...

<tr class="odd">

  ...

<tr class="even">

  ...

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

.odd th, .odd td {
  background: #eee; 
}

Это простейший способ добавить разметку зебры в таблицу HTML, который будет работать для всех браузеров, но он имеет недостатки - что если вы добавите в таблицу строку? Тогда потребуется перемещать все имена классов odd и even, чтобы все снова выглядело правильно.

Существует два других варианта:

Дополнительно о разметке зебры с помощью селектора ).

Неполные сетки

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

Код CSS для этого представления имеет вид:

table {
  width: 100%;
  border: 1px solid #999;
  text-align: left;
  border-collapse: collapse;
  margin: 0 0 1em 0;
  caption-side: top;
}

caption, td, th {
  padding: 0.3em;
}

th, td {
  border-bottom: 1px solid #999;
  width: 25%;
}

caption {
  font-weight: bold;
  font-style: italic;
}

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

Код CSS для такой таблицы будет следующим:

table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  margin: 0 0 1em 0;
  caption-side: top;
}

caption, td, th {
  padding: 0.3em;
}

tbody {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

tbody th, tfoot th {
  border: 0;
}

th.name {
  width: 25%;
}

th.location {
  width: 20%;
}

th.lasteruption {
  width: 30%;
}

th.eruptiontype {
  width: 25%;
}

tfoot {
  text-align: center;
  color: #555;
  font-size: 0.8em;
}

Внутренние границы

Иногда желательно удалить внешнюю границу, но сохранить внутреннюю сетку границ, как на рис 33.16:(рис 33.16) Таблица с внутренней сеткой

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

...
<tr>
  <th scope="col">Volcano Name</th>
  <th scope="col">Location</th>
  <th scope="col">Last Major Eruption</th>
  <th scope="col" class="last">Type of Eruption</th>
</tr>
  ...

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

table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  margin: 0 0 1em 0;
  caption-side: top;
}

caption, td, th {
  padding: 0.3em;
}

th, td {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

th.last, td.last {
  border-right: 0;
}

tfoot th, tfoot td {
  border-bottom: 0;
  text-align: center;
}

th {
  width: 25%;
}

Внутренние сетки использующие :lastchild

Когда поддержка в браузерах улучшится, мы сможем использовать псевдо-селектор :lastchild для достижения этого результата без классов. Код CSS будет следующим:

table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  margin: 0 0 1em 0;
  caption-side: top;
}

caption, td, th {
  padding: 0.3em;
}

th, td {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

th:lastchild, td:lastchild {
  border-right: 0;
}

th {
  width: 25%;
}

Это работает в настоящее время в последних версиях браузеров Opera, Firefox и Safari.

Две распространенные ошибки

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

Ошибка border-collapse

Когда для таблицы задается :(рис 33.17) Ошибка border-collapse проявляется в Firefox и Safari

Браузер Safari делает то же самое, только справа. Эта ошибка связана с проблемой округления, которая, в конечном счете, сводится к тому, как показать "0.5 пикселя". Утверждается, что это собственно и не ошибка, но браузеры с этим не согласны, поэтому, по сути, имеем ошибку.

Какое же имеется решение? Если вы хотите использовать границу в 1px и фон заголовка таблицы, то на самом деле исправления не существует, остается только "оставить как есть". Это очень незначительное различие и не является фатальной проблемой - то есть, таблица остается полностью используемой. Поэтому часто просто оставляют различие для разных браузеров. Пусть Web остается Web.

Если вы хотите использовать более толстую границу, скажем 2px, то можно задать границу в 1px для таблицы, ячеек и заголовка; а затем задать для таблицы отдельные границы и использовать между ними нулевой пробел:

table { 
  border-collapse: separate;
  border-spacing: 0; 
  border: 1px solid #000;
}

th, td, caption {
  border: 1px solid #000;
}

По крайней мере, в Firefox границы в 1px создадут требуемое изображение границы в 2px, исключая попутно проблему округления. Браузер Safari по прежнему оставляет зазор.

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

Ошибка поле /заголовок

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

Чтобы победить это в Firefox, можно задать поле с трех сторон таблицы, задать явно caption-side, а затем добавить четвертное поле для заголовка. К сожалению, это решение будет создавать в Safari ошибку. Поэтому фактически это не является исправлением, если только вы не хотите остаться с ошибкой в Firefox или Safari.

Единственный способ избежать проблемы в обоих браузерах, Firefox и Safari, состоит в задании нулевого поля на стороне заголовка. Например, если заголовок находится наверху, можно задать поле только справа, снизу и слева, или только снизу. Это может сработать, если все поля задаются на одной стороне элементов контента, поэтому поле не требуется для отделения таблицы от смежного контента.

Заключение

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

Контрольные вопросы

Дополнительное чтение

Об авторе

Бен Бучанан начал создавать Web-страницы более десяти лет назад, получив степень по всем наукам, кроме ИТ. Он работал как в публичном (университет), так и в частном секторах; и работал над реконструкцией крупных Web-сайтов, включая The Australian (http://www.theaustralian.com.au/) и три поколения корпоративного Web-сайта Университета Гриффита (http://www.griffith.edu.au/). Он работает в настоящее время в качестве Архитектора внешнего интерфейса в News Digital Media (http://www.newsdigitalmedia.com.au/) и пишет в блоге 200ok ((http://weblog.200ok.com.au/).