Колонки таблицы - Форум
( Новые сообщения ·Правила форума ·Поиск ·RSS )
Страница 1 из 11
Модератор форума: Ezhik 
Форум » Статьи о CSS » Оформление таблиц » Колонки таблицы
Колонки таблицы
EvgenyДата: Пятница, 26.02.2010, 08:03 | Сообщение # 1
Контр-Адмирал
Группа: Администраторы
Сообщений: 287
Статус:
Чтобы взгляд читателя скользил по данным, представленным в колонках таблицы, не перескакивая на соседний раздел, колонки удобно выделить цветом фона или вертикальными линиями. При этом цвет четных и нечетных колонок может различаться.

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


[small]
Рис. 1. Таблица с выделенными колонками
[/small]

Цвет нечетных колонок можно задать путем добавления стилевых параметров к селектору TABLE, а для четных колонок введем новый класс, назовем его even. Первая колонка обычно используется для заголовков строк, поэтому для нее имеет смысл задать стиль, отличный от стиля остальных ячеек. В данном случае вводим еще один класс, назовем его lc и для него определим выравнивание по левому краю и цвет текста (пример 1). Остается для ячеек первой колонки добавить к тегу < TD> параметр class="lc", а для ячеек четных колонок class="even"

[small]Пример 1. Колонки разного цвета[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
<style type="text/css">
TABLE {
  width: 300px; /* Ширина таблицы */
  border: 2px solid black; /* Рамка вокруг таблицы */
  background: #778899; /* Цвет фона */
  color: white; /* Цвет текста */
}

TD, TH {
  text-align: center; /* Выравнивание по центру */
  padding: 3px; /* Поля вокруг текста */
}

TH {
  color: white; /* Цвет текста */
  border-bottom: 4px double black; /* Двойная линия снизу */
}

.even { /* Стиль для четных колонок */
  background: #ffe4b5; /* Цвет фона */
  color: black; /* Цвет текста */
}

.lc { /* Стиль для первой колонки */
  text-align: left; /* Выравнивание по левому краю */
  color: #fffacd; /* Цвет текста */
}
</style>
</head>
<body>

<table cellspacing="0">
  <tr>
   <th> </th>
   <th class="even">2004</th>
   <th>2005</th>
   <th class="even">2006</th>
  </tr>
  <tr>
   <td class="lc">Рубины</td>
   <td class="even">43</td>
   <td>51</td>
   <td class="even">79</td>
  </tr>
  <tr>
   <td class="lc">Изумруды</td>
   <td class="even">28</td>
   <td>34</td>
   <td class="even">48</td>
  </tr>
  <tr>
   <td class="lc">Сапфиры</td>
   <td class="even">29</td>
   <td>57</td>
   <td class="even">36</td>
  </tr>
</table>

</body>
</html>

Чтобы отделить первую строку с заголовком от данных таблицы в примере используется двойная линия. Она получается за счет добавления параметра border-bottom к селектору TH.

Рассмотрим еще один способ формирования вида колонок — не только за счет разного цвета фона, но и применением линий между колонками (рис. 2).


[small]Рис. 2. Выделение колонок с помощью линий и цвета[/small]

Структура кода останется практически той же, что была показана в примере 1. А именно, для ячеек четных колонок используем класс even, а для первой колонки — класс lc. Чтобы установить линию между колонками, к селектору TD добавляем параметр border-left, он создает линию слева от ячейки. Однако при этом возникнет ненужная линия слева в первой колонке, поэтому для класса lc используем border: none, этот атрибут уберет лишние границы (пример 2).

[small]Пример 2. Линии между колонками[/small]

Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Таблица</title>
<style type="text/css">
TABLE {
  width: 300px; /* Ширина таблицы */
  border: 1px solid black; /* Рамка вокруг таблицы */
}

TD, TH {
  text-align: center; /* Выравнивание по центру */
  padding: 3px; /* Поля вокруг текста */
}

TH {
  color: white; /* Цвет текста */
  background: #daa520; /* Цвет фона */
}

TD {
  border-left: 1px dashed black; /* Линия слева от ячейки */
}

.even { /* Стиль для четных колонок */
  background: #dcdcdc; /* Цвет фона */
}  

.lc { /* Стиль для первой колонки */
  text-align: left; /* Выравнивание по левому краю */
  border: none; /* Нет лишних линий */
}
</style>
</head>
<body>

<table cellspacing="0">
  <tr>
   <th> </th>
   <th>2004</th>
   <th>2005</th>
   <th>2006</th>
  </tr>
  <tr>
   <td class="lc">Рубины</td>
   <td class="even">43</td>
   <td>51</td>
   <td class="even">79</td>
  </tr>
  <tr>
   <td class="lc">Изумруды</td>
   <td class="even">28</td>
   <td>34</td>
   <td class="even">48</td>
  </tr>
  <tr>
   <td class="lc">Сапфиры</td>
   <td class="even">29</td>
   <td>57</td>
   <td class="even">36</td>
  </tr>
</table>

</body>
</html>

К сожалению, работа с колонками таблицы не так удобна, как хотелось бы. Если применять стили, то фактически все ячейки таблицы пестрят указаниями на определенный стилевой класс. За счет этого снижается удобство по расширению табличных данных и повышается объем кода. Существуют специальные теги < COL> и < COLGROUP>призванные облегчить работу с колонками таблицы. Но их возможности ограничены, да и нужный результат будет отображаться не во всех браузерах. Так что на данном этапе для создания таблиц желаемого вида приходится обращаться к стилям.

 
Форум » Статьи о CSS » Оформление таблиц » Колонки таблицы
Страница 1 из 11
Поиск:

Статистика Форума
Уважаемые пользователи
Популярные темы
Недавно обновленные темы
Evgeny Репутация [ 122 ]
akkemir22 Репутация [ 113 ]
Kuks64 Репутация [ 49 ]
Gavrik Репутация [ 48 ]
Anatoliy03 Репутация [ 37 ]
MiRel Репутация [ 33 ]
hius Репутация [ 23 ]
mVizio Репутация [ 19 ]
ewa69 Репутация [ 16 ]
straik67 Репутация [ 14 ]
Прочие [ 10 ]
О програмистах и Веб-Мастерах [ 6 ]
Про детей [ 6 ]
Про автомобилистов [ 5 ]
Про женщин [ 3 ]
Блондинка сдает на права ! (МЕГА ЖЕСТЬ) [ 2 ]
Про новых русских [ 2 ]
ВАЗ-2107 1000 лошадей [ 2 ]
Новый вид ББ-кодов на вашем сайте [ 2 ]
Про компьютеры [ 1 ]
Игры на телефон бесплатно [ 0 ]
Лучшее онлайн казино. Как обыграть казино? [ 0 ]
Инвест-Проект. Прибыль каждые 5 мин. [ 1 ]
Финансовая Взаимопомощь. Каждые 24ч получаете % [ 0 ]
Играть и зарабатывать онлайн [ 0 ]
Новый Топ пользователей с аватарами для Ucoz [ 0 ]
Простой и красивый вид формы опроса [ 0 ]
Красивый информер "кто нас сегодня посетил" для Ucoz [ 0 ]
Flash радио для сайта [ 0 ]
Заработок на играх [ 0 ]