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

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

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

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

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

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

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

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

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

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

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

	Январь	Февраль	Март	Всего
Столы	7	7	5	19
Стулья	6	4	7	17
Диваны	8	7	9	24
Итого	21	18	21	60

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

CSS

 
.tab1
{
  border: 1px solid black;    
  font: 80% Arial,sans-serif; 
}
.tab1 TD, .tab1 TH
{
  text-align:left;
  vertical-align:top;
  padding:10px;
} 
.tab1 TR.last
{
  color:red; 
}

HTML

  
<TABLE class=tab1 cellspacing=0>
  <TR>
    <TH>&nbsp;</TH>
    <TH>Январь</TH>
    <TH>Февраль</TH>
    <TH>Март</TH>
    <TH>Всего</TH>
  </TR>
  <TR>
    <TH>Столы</TH>
    <TD>7</TD>
    <TD>7</TD>
    <TD>5</TD>
    <TD>19</TD>
  </TR>
  <TR>
    <TH>Стулья</TH>
    <TD>6</TD>
    <TD>4</TD>
    <TD>7</TD>
    <TD>17</TD>
  </TR>
  <TR>
    <TH>Диваны</TH>
    <TD>8</TD>
    <TD>7</TD>
    <TD>9</TD>
    <TD>24</TD>
  </TR>
  <TR class=last>
    <TH>Итого</TH>
    <TD>21</TD>
    <TD>18</TD>
    <TD>21</TD>
    <TD>60</TD>
  </TR>
</TABLE>

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

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

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

	Январь	Февраль	Март	Всего
Столы	7	7	5	19
Стулья	6	4	7	17
Диваны	8	7	9	24
Итого	21	18	21	60

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

CSS

 
.tab2
{
  border: 1px solid black;    
  font: 80% Arial,sans-serif; 
}
.tab2 TD, .tab2 TH
{
  text-align:left;
  vertical-align:top;
  padding:10px;
} 
.tab2 TR.last
{
  color:red; 
} 
.tab2 .mark
{
  background:#e0e0e0;
}

HTML

  
<TABLE class=tab2 cellspacing=0>
  <TR>
    <TH>&nbsp;</TH>
    <TH>Январь</TH>
    <TH>Февраль</TH>
    <TH>Март</TH>
    <TH>Всего</TH>
  </TR>
  <TR class=mark>
    <TH>Столы</TH>
    <TD>7</TD>
    <TD>7</TD>
    <TD>5</TD>
    <TD>19</TD>
  </TR>
  <TR>
    <TH>Стулья</TH>
    <TD>6</TD>
    <TD>4</TD>
    <TD>7</TD>
    <TD>17</TD>
  </TR>
  <TR class=mark>
    <TH>Диваны</TH>
    <TD>8</TD>
    <TD>7</TD>
    <TD>9</TD>
    <TD>24</TD>
  </TR>
  <TR class=last>
    <TH>Итого</TH>
    <TD>21</TD>
    <TD>18</TD>
    <TD>21</TD>
    <TD>60</TD>
  </TR>
</TABLE>

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

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

	Январь	Февраль	Март	Всего
Столы	7	7	5	19
Стулья	6	4	7	17
Диваны	8	7	9	24
Итого	21	18	21	60

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

CSS

 
.tab3
{
  border: 1px solid black;    
  font: 80% Arial,sans-serif; 
}
.tab3 TD, .tab3 TH
{
  text-align:left;
  vertical-align:top;
  padding:10px;
} 
.tab3 TR.last
{
  color:red; 
} 
.tab3 .mark
{
  background:#e0e0e0;
}

HTML

  
<TABLE class=tab3 cellspacing=0>
  <TR>
    <TH class=mark> </TH>
    <TH>Январь</TH>
    <TH class=mark>Февраль</TH>
    <TH>Март</TH>
    <TH class=mark>Всего</TH>
  </TR>
  <TR>
    <TH class=mark>Столы</TH>
    <TD>7</TD>
    <TD class=mark>7</TD>
    <TD>5</TD>
    <TD class=mark>19</TD>
  </TR>
  <TR>
    <TH class=mark>Стулья</TH>
    <TD>6</TD>
    <TD class=mark>4</TD>
    <TD>7</TD>
    <TD class=mark>17</TD>
  </TR>
  <TR>
    <TH class=mark>Диваны</TH>
    <TD>8</TD>
    <TD class=mark>7</TD>
    <TD>9</TD>
    <TD class=mark>24</TD>
  </TR>
  <TR class=last>
    <TH class=mark>Итого</TH>
    <TD>21</TD>
    <TD class=mark>18</TD>
    <TD>21</TD>
    <TD class=mark>60</TD>
  </TR>
</TABLE>

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

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

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

	Январь	Февраль	Март	Всего
Столы	7	7	5	19
Стулья	6	4	7	17
Диваны	8	7	9	24
Итого	21	18	21	60

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

CSS

 
.tab4
{
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  font: 80% Arial,sans-serif; 
}
.tab4 TD, .tab4 TH
{
  text-align:left;
  vertical-align:top;
  padding:10px;
} 
.tab4 TR.last
{
  color:red; 
} 
.tab4 TH
{
  border-bottom: 1px solid black;
}

HTML

  
<TABLE class=tab4 cellspacing=0>
  <TR>
    <TH> </TH>
    <TH>Январь</TH>
    <TH>Февраль</TH>
    <TH>Март</TH>
    <TH>Всего</TH>
  </TR>
  <TR>
    <TD>Столы</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>5</TD>
    <TD>19</TD>
  </TR>
  <TR>
    <TD>Стулья</TD>
    <TD>6</TD>
    <TD>4</TD>
    <TD>7</TD>
    <TD>17</TD>
  </TR>
  <TR>
    <TD>Диваны</TD>
    <TD>8</TD>
    <TD>7</TD>
    <TD>9</TD>
    <TD>24</TD>
  </TR>
  <TR class=last>
    <TD>Итого</TD>
    <TD>21</TD>
    <TD>18</TD>
    <TD>21</TD>
    <TD>60</TD>
  </TR>
</TABLE>

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

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

	Январь	Февраль	Март	Всего
Столы	7	7	5	19
Стулья	6	4	7	17
Диваны	8	7	9	24
Итого	21	18	21	60

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

CSS

 
.tab5
{
  border: 1px solid black;
  font: 80% Arial,sans-serif; 
}
.tab5 TD, .tab5 TH
{
  text-align:left;
  vertical-align:top;
  padding:10px;
} 
.tab5 TH
{
  background:#4d4d4d;
  color:white;
}

HTML

  
<TABLE class=tab5 cellspacing=0>
  <TR>
    <TH> </TH>
    <TH>Январь</TH>
    <TH>Февраль</TH>
    <TH>Март</TH>
    <TH>Всего</TH>
  </TR>
  <TR>
    <TD>Столы</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>5</TD>
    <TD>19</TD>
  </TR>
  <TR>
    <TD>Стулья</TD>
    <TD>6</TD>
    <TD>4</TD>
    <TD>7</TD>
    <TD>17</TD>
  </TR>
  <TR>
    <TD>Диваны</TD>
    <TD>8</TD>
    <TD>7</TD>
    <TD>9</TD>
    <TD>24</TD>
  </TR>
  <TR>
    <TD>Итого</TD>
    <TD>21</TD>
    <TD>18</TD>
    <TD>21</TD>
    <TD>60</TD>
  </TR>
</TABLE>

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

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

	Январь	Февраль	Март	Всего
Столы	7	7	5	19
Стулья	6	4	7	17
Диваны	8	7	9	24
Итого	21	18	21	60

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

  
<TABLE border=1 bordercolor=white bgcolor="#e0e0e0"
       cellpadding=10 cellspacing=0>

Заметим, что приведённая выше таблица будет отображаться так, как задумано только в браузере IE (ведь атрибут bordercolor работает только в этом браузере, см. ссылка).

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

	Январь	Февраль	Март	Всего
Столы	7	7	5	19
Стулья	6	4	7	17
Диваны	8	7	9	24
Итого	21	18	21	60

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

CSS

 
.tab7
{
  border-collapse:collapse;
  background:#e0e0e0;
}
.tab7 TD, .tab7 TH
{
  padding:10px;
  border: 2px solid white;
}

HTML

  
<TABLE class=tab7 cellspacing=0>
  <TR>
    <TH>&nbsp;</TH>
    <TH>Январь</TH>
    <TH>Февраль</TH>
    <TH>Март</TH>
    <TH>Всего</TH>
  </TR>
  <TR>
    <TD>Столы</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>5</TD>
    <TD>19</TD>
  </TR>
  <TR>
    <TD>Стулья</TD>
    <TD>6</TD>
    <TD>4</TD>
    <TD>7</TD>
    <TD>17</TD>
  </TR>
  <TR>
    <TD>Диваны</TD>
    <TD>8</TD>
    <TD>7</TD>
    <TD>9</TD>
    <TD>24</TD>
  </TR>
  <TR>
    <TD>Итого</TD>
    <TD>21</TD>
    <TD>18</TD>
    <TD>21</TD>
    <TD>60</TD>
  </TR>
</TABLE>

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

(1,1)	(1,2)
(2,1)	(2,2)
(3,1)	(3,2)

(1,1)	(1,2)
(2,1)	(2,2)
(3,1)	(3,2)

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

	Январь	Февраль	Март	Всего
Столы	7	7	5	19
Стулья	6	4	7	17
Диваны	8	7	9	24
Итого	21	18	21	60

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

CSS

 
.tab6
{
  border-collapse:collapse;
  border: 1px solid black;
  background:#ffffcc;
  font: 80% Arial,sans-serif; 
}
.tab6 TD, .tab6 TH
{
  text-align:left;
  vertical-align:top;
  padding:10px;
} 
.tab6 TH
{
  background:#e0e0e0;
  border: 1px solid black;
}

HTML

  
<TABLE class=tab5 cellspacing=0>
  <TR>
    <TH> </TH>
    <TH>Январь</TH>
    <TH>Февраль</TH>
    <TH>Март</TH>
    <TH>Всего</TH>
  </TR>
  <TR>
    <TD>Столы</TD>
    <TD>7</TD>
    <TD>7</TD>
    <TD>5</TD>
    <TD>19</TD>
  </TR>
  <TR>
    <TD>Стулья</TD>
    <TD>6</TD>
    <TD>4</TD>
    <TD>7</TD>
    <TD>17</TD>
  </TR>
  <TR>
    <TD>Диваны</TD>
    <TD>8</TD>
    <TD>7</TD>
    <TD>9</TD>
    <TD>24</TD>
  </TR>
  <TR>
    <TD>Итого</TD>
    <TD>21</TD>
    <TD>18</TD>
    <TD>21</TD>
    <TD>60</TD>
  </TR>
</TABLE>

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

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

Нет единого выравнивания содержимого ячеек

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

Содержимое ячеек выровнено по центру

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

Выравнивание слева

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

Выравнивание по центру

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

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

Содержимое слишком прижато к границам ячеек