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

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


[small]Рис. 1. Таблица со строками, выделенными с помощью линий[/small]

Линии между строк устанавливаются достаточно просто, для этого следует добавить стилевой атрибут border-bottom к селектору TD. Если вокруг таблицы содержится рамка, то нижняя граница получится удвоенной толщины. В этом случае можно убрать нижнюю линию у последней строки или скрыть нижнюю границу у таблицы (пример 1).

[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: 1px solid black; /* Рамка вокруг таблицы */
  border-bottom: none; /* Убираем линию снизу */
}

TD, TH {
  padding: 3px; /* Поля вокруг содержимого ячеек */
}

TH {
  text-align: left; /* Выравнивание по левому краю */
  background: black; /* Цвет фона */
  color: white; /* Цвет текста */
  border: 1px solid white; /* Рамка вокруг ячеек */
}

TD {
  border-bottom: 1px solid black; /* Линия снизу */
}
</style>
</head>
<body>

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

</body>
</html>

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

Применение цвета расширяет возможности по изменению вида таблицы. Например, цвет фона четных и нечетных строк может различаться, как показано на рис. 2.


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

Для изменения цвета фона нужных строк введем дополнительный класс, назовем его even, и станем добавлять его к четным строкам таблицы, а именно к тегу < TR>. Заметьте, что для селектора TR можно задавать только цвет фона через свойство background. Всякие линии, которые установлены для селектора TR, отображаться не будут. Поэтому нижнюю границу проводим у ячейки, применяя свойство border-bottom к селектору TD (пример 2).

Цвет фона нечетных строк определяется путем изменения цвета всей таблицы. Но поскольку для выборочных строк (для которых добавлен параметр class="even") устанавливается индивидуальный цвет, то он «перекрывает» цвет фона таблицы. За счет этого и получается чередование цветных строк.

[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; /* Ширина таблицы */
  background: #fffff0; /* Цвет фона нечетных строк */
  border: 1px solid #a52a2a; /* Рамка вокруг таблицы */
  border-collapse: collapse; /* Убираем двойные линии между ячейками */
}

TD, TH {
  padding: 3px; /* Поля вокруг содержимого ячейки */
}

TD {
  text-align: center; /* Выравнивание по центру */
  border-bottom: 1px solid #a52a2a; /* Линия внизу ячейки */
}

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

TR.even {
  background: #fff8dc; /* Цвет фона четных строк */
}

.la {
  text-align: left; /* Выравнивание по левому краю */
}
</style>
</head>
<body>

<table>
<tr>
<th> </th>
<th>2004</th>
<th>2005</th>
<th>2006</th>
</tr>
<tr class="even">
<td class="la">Рубины</td>
<td>43</td>
<td>51</td>
<td>79</td>
</tr>
<tr>
<td class="la">Изумруды</td>
<td>28</td>
<td>34</td>
<td>48</td>
</tr>
<tr class="even">
<td class="la">Сапфиры</td>
<td>29</td>
<td>57</td>
<td>36</td>
</tr>
<tr>
<td class="la">Аметисты</td>
<td>23</td>
<td>64</td>
<td>97</td>
</tr>
</table>

</body>
</html>

В данном примере двойной линии внизу таблицы не возникает в результате применения свойства border-collapse со значением collapse к селектору TABLE. Этот параметр отслеживает появление двойных линий в местах соприкосновения ячеек и заменяет их одинарными линиями. Заметим, что в разных браузерах могут возникнуть разночтения по поводу цвета оставляемых линий в том случае, если цвет границы вокруг таблицы не совпадает с цветом линий под строками.

 
Форум » Статьи о 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 ]