02. Дизайн таблицы

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

Новичок, “ошарашенный” табличной палитрой, непременно начнёт экспериментировать и зальёт экран цветастой клетчатой какофонией.

На самом деле, таблицы, в которых явно прочерчены все клетки, смотрятся “жёстко”, поэтому в таком виде используются редко.

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

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

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

На этой странице:

• Таблица с невидимыми границами
• Чередование цветов по строкам
• Чередование цветов по столбцам
• Линии в таблице
• Оформление отдельной строки
• Рамки для ячеек
• Выравнивание в ячейках

Таблица с невидимыми границами

Часто границы ячеек внутри таблицы делают невидимыми:

Код для этой таблицы:

 
/* Стиль для таблицы */
.table
{
  border: 1px solid black; /* Рамка вокруг таблицы */
  font-family:sans-serif;  /* Рубленый шрифт       */
  font-size:80%;           /* Уменьшенный кегль    */
}
/* Стиль для ячеек таблицы со стилем table */
.table TD, .table TH
{
  text-align:left;    /* Выравнивание слева  */
  vertical-align:top; /* Выравнивание сверху */
} 

Обратите внимание: в пустой (первой) ячейке записан код неразрывного пробела. Запись <TH></TH> (и <TD></TD>) приводит к проблемам в некоторых браузерах.

Чередование цветов по строкам

Избежать клетчатой фактуры можно, чередуя цвета строк:

Код для этой таблицы:

 
/* Стиль для таблицы */
.table
{
  border: 1px solid black;
  font-family:sans-serif;
  font-size:80%;
}
/* Стиль для ячеек таблицы со стилем table */
.table TD, .table TH
{
  text-align:left;
  vertical-align:top;
} 
/* Стиль выделенных строк таблицы со стилем table */
.table .mark
{
  background:#e0e0e0;
} 

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

Можно чередовать цвета столбцов:

Код для этой таблицы:

 
/* Стиль для таблицы */
.table
{
  border: 1px solid black;
  font-family:sans-serif;
  font-size:80%;
}
/* Стиль для ячеек таблицы со стилем table */
.table TD, .table TH
{
  text-align:left;
  vertical-align:top;
} 
/* Стиль выделенных столбцов таблицы со стилем table */
.table .mark
{
  background:#e0e0e0;
} 

Линии в таблице

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

Код для этой таблицы приводится ниже.

 
/* Стиль для таблицы */
.table
{
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  font-family:sans-serif;
  font-size:80%;
}
/* Стиль ячеек TH */
.table TH
{
  border-bottom: 1px solid black;
  text-align:left;
  vertical-align:top;
} 

Оформление отдельной строки

Таблица, у которой первая строка с заголовками столбцов записана методом выворотки:

Код для этой таблицы:

 
/* Стиль для таблицы */
.table
{
  border: 1px solid black;
  font-family:sans-serif;
  font-size:80%;
}
/* Стиль для ячеек TH */
.table TH
{
  background:#4d4d4d;
  color:white;
  text-align:left;
  vertical-align:top;
} 

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

Таблица будет неплохо смотреться, если для рамки использовать цвет фона документа:

Здесь в элементе TABLE записаны следующие атрибуты:

Для построения рамок ячеек можно воспользоваться стилевыми свойствами border и border-collapse. Если для последнего свойства записать значение collapse, то это позволит избежать двойных рамок в местах соприкосновения ячеек (в таблице справа):

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

Код для этой таблицы:

 
/* Стиль для таблицы */
.table
{
  border-collapse:collapse;
  border: 1px solid black;
  background:#ffffcc;
  font-family:sans-serif;
  font-size:80%;

}
.table TH
{
  background:#e0e0e0;
  border: 1px solid black;
  text-align:left;
  vertical-align:top;
} 

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

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

Но стоит выровнять высоту строк, ширину столбцов, задать одинаковое выравнивание элементов внутри ячеек — и на таблицу становится приятно смотреть:

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

Если теперь содержимое ячеек выровнять по центру, возникнет ощущение “рваных” краёв (будто никакого выравнивания и нет):

Объясняется это очень просто. В первом случае есть один ровный край (левый), а во втором — ни одного.

Еще одно важное дизайнерское правило: не прижимайте элементы содержимого к границам ячеек — им становится тесно: