02. CSS и таблицы

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

Давайте посмотрим, какие специальные средства предлагает CSS (наряду с общими свойствами) для управления внешним видом таблицы.

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

• Положение заголовка таблицы
• Рамки
• Размеры
• Выравнивание

Положение заголовка таблицы

caption-side Значения: top | bottom По умолчанию: top Область применения: элемент CAPTION (или элементы, для которых свойство display установлено в table-caption) Наследование: нет Примечание: свойство table-caption “не понимает” браузер IE (по крайней мере, IE6 и IE7).

Свойство caption-side задаёт положение заголовка таблицы перед или после блока таблицы. Ниже приводится пример использования этого свойства.

  
.tab1 CAPTION
{
  caption-side:bottom; 
  color:white;
  background:red;
  padding:2px;
  margin:10px 0;
}    

<TABLE class="tab1" 
       bgcolor="#fff2a6"
       border=1 cellpadding=10 
       cellspacing=0>
  <CAPTION>Заголовок</CAPTION>
  <TR>
    <TD>(1,1)</TD>
    <TD>(1,2)</TD>
    <TD>(1,3)</TD>
  </TR>
  <TR>
    <TD>(2,1)</TD>
    <TD>(2,2)</TD>
    <TD>(2,3)</TD>
  </TR>
  <TR>
    <TD>(3,1)</TD>
    <TD>(3,2)</TD>
    <TD>(3,3)</TD>
  </TR>
</TABLE>

Рамки

В CSS определены две модели рамок для ячеек таблицы:

• модель сливающихся рамок;
• модель отдельных рамок.

Разработчик указывает модель рамок при помощи свойства border-collapse (для элемента TABLE).

border-collapse Значения: collapse | separate По умолчанию: separate Область применения: элемент TABLE (или элементы, для которых свойство display установлено в table или inline-table) Наследование: да

Управлять промежутками между рамками можно при помощи свойства border-spacing.

Таким образом, свойство border-spacing заменяет атрибут cellspacing элемента TABLE (всюду, кроме IE) и мощнее его: позволяет управлять отдельно размерами промежутков по горизонтали и вертикали.

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

Пример 1

Модель отдельных рамок.

  
.tab2 
{
  border-collapse:separate; 
  border-spacing:10px; 
  background: #fff2a6;
}    
.tab2 TD
{
  border:1px solid black;
  padding:10px;
}

<TABLE class="tab2"> 
  <TR>
    <TD>(1,1)</TD>
    <TD>(1,2)</TD>
    <TD>(1,3)</TD>
  </TR>
  <TR>
    <TD>(2,1)</TD>
    <TD>(2,2)</TD>
    <TD>(2,3)</TD>
  </TR>
  <TR>
    <TD>(3,1)</TD>
    <TD>(3,2)</TD>
    <TD>(3,3)</TD>
  </TR>
</TABLE>

Пример 2

Модель сливающихся рамок.

  
.tab3 
{
  border-collapse:collapse; 
  background: #fff2a6;
}    
.tab3 TD
{
  border: 1px solid black;
  padding:10px;
}

<TABLE class="tab3"> 
  <TR>
    <TD>(1,1)</TD>
    <TD>(1,2)</TD>
    <TD>(1,3)</TD>
  </TR>
  <TR>
    <TD>(2,1)</TD>
    <TD>(2,2)</TD>
    <TD>(2,3)</TD>
  </TR>
  <TR>
    <TD>(3,1)</TD>
    <TD>(3,2)</TD>
    <TD>(3,3)</TD>
  </TR>
</TABLE>

Размеры

В CSS определены два подхода для определения ширины таблицы:

• компоновка с фиксированной шириной;
• компоновка с автоматической шириной.

Высота вычисляется автоматически независимо от алгоритма вычисления ширины таблицы.

Разработчик указывает модель компоновки таблицы при помощи свойства table-layout (для элемента TABLE).

Компоновка с фиксированной шириной

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

• свойство width таблицы;
• сумма ширин столбцов.

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

Значение ширины каждого столбца таблицы определяется шириной ячейки в первой строке.

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

Компоновка с автоматической шириной

Эта компоновка работает по умолчанию, она реализует обычный алгоритм построения таблицы, который выполняется без CSS-указаний.

Если для таблицы не задано свойство width, большинство браузеров будет выполнять этот алгоритм, даже если свойство table-layout имеет значение fixed.

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

Вычисление высоты ячеек и таблицы

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

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

Пример 1. Компоновка с фиксированной шириной

  
.tab4 
{
  table-layout:fixed; 
  width:300px;
  border-collapse:collapse; 
  background: #fff2a6;
  border: 1px solid black;
}    
.tab4 TD
{
  border: 1px solid black;
  padding:10px;
}
    
.tab4 TD.nobr
{
  white-space:nowrap;
}

<TABLE class="tab4"> 
  <TR>
    <TD>(1,1)</TD>
    <TD>(1,2)</TD>
    <TD>(1,3)</TD>
  </TR>
  <TR>
    <TD>(2,1)</TD>
    <TD>(2,2)</TD>
    <TD>(2,3)</TD>
  </TR>
  <TR>
    <TD>(3,1)</TD>
    <TD>(3,2)</TD>
    <TD class="nobr">
В этой ячейке находится 
длинный текст.
    </TD>
  </TR>
</TABLE>

Вид

Содержимое последней ячейки вылезает за пределы таблицы, так как по умолчанию свойство overflow имеет значение visible, а ширина столбца определяется шириной ячейки в первой строке (IE содержимое отсекает).

Фиксированная компоновка таблицы гарантирует постоянство ширин столбцов. В силу этого правило table-layout:fixed используется, когда таблица лежит в основе многоколонной вёрстки страницы.

Пример 2. Компоновка с автоматической шириной

  
.tab5 
{
  table-layout:auto; 
  width:300px;
  border-collapse:collapse; 
  background: #fff2a6;
  border: 1px solid black;
}    
.tab5 TD
{
  border: 1px solid black;
  padding:10px;
}
    
.tab5 TD.nobr
{
  white-space:nowrap;
}

<TABLE class="tab5"> 
  <TR>
    <TD>(1,1)</TD>
    <TD>(1,2)</TD>
    <TD>(1,3)</TD>
  </TR>
  <TR>
    <TD>(2,1)</TD>
    <TD>(2,2)</TD>
    <TD>(2,3)</TD>
  </TR>
  <TR>
    <TD>(3,1)</TD>
    <TD>(3,2)</TD>
    <TD class="nobr">
В этой ячейке находится 
длинный текст.
    </TD>
  </TR>
</TABLE>

Вид

Ширина последнего столбца определяется шириной последней ячейки. Общая ширина таблицы получается больше заданного значения width:300px.

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

Горизонтальное выравнивание

Горизонтальное выравнивание содержимого ячейки (то есть горизонтальное выравнивание в блочных элементах TD и TH) выполняется при помощи свойства text-align в точности согласно описанию этого свойства.

  
.tab6 
{
  width:100%;
  border-collapse:collapse; 
  background: #fff2a6;
  border: 1px solid black;
}    
.tab6 TD, .tab6 TH
{
  border: 1px solid black;
  padding:10px;
  text-align:
               left
               right
               center
               justify
             ;
}

Вертикальное выравнивание

Вертикальное выравнивание содержимого ячейки (то есть горизонтальное выравнивание в блочных элементах TD и TH) выполняется при помощи свойства vertical-align (см. описание, правда, в таблицах свойство vertical-align работает немного по-другому).

  
.tab7 
{
  width:100%;
  border-collapse:collapse; 
  background: #fff2a6;
  border: 1px solid black;
}    
.tab7 TD, .tab7 TH
{
  border: 1px solid black;
  padding:10px;
  vertical-align:
               top
               bottom
               middle
               baseline
             ;
}