Чередование фонового цвета столбцов таблицы
Чередование фонового цвета строк встречается гораздо чаще, чем чере- дование цвета столбцов. Однако этот прием достаточно эффективен для выделения группы данных.
Решение
Для описания колонок таблицы мы воспользуемся элементом col. При этом можно задать для них фоновый цвет с помощью CSS. В следующей разметке видны добавленные для каждого столбца элементы col, каж- дому из которых присвоено имя класса (как и в примере с изменением фонового цвета строк в разделе «Чередование фонового цвета строк та- блицы»).
chapter05/columns.html (фрагмент)
<table class=”datatable”>
<col class=”odd” />
<col class=”even” />
<col class=”odd” />
<col class=”even” />
<tr>
<th>Pool A</th>
<th>Pool B</th>
<th>Pool C</th>
<th>Pool D</th>
</tr>
<tr>
<td>England</td>
<td>Australia</td>
<td>New Zealand</td>
<td>France</td>
</tr>
<tr class=”even”>
<td>South Africa</td>
<td>Wales</td>
<td>Scotland</td>
<td>Ireland</td>
</tr>
<tr>
<td>Samoa</td>
<td>Fiji</td>
<td>Italy</td>
<td>Argentina</td>
</tr>
<tr class=”even”>
<td>USA</td>
<td>Canada</td>
<td>Romania</td>
<td>Europe 3</td>
</tr>
<tr>
<td>Repechage 2</td>
<td>Asia</td>
<td>Repechage 1</td>
<td>Namibia</td>
</tr>
</table>
Классам, присвоенным элементам col, можно задать определенные пра- вила стилей, как показано ниже; результат обработки данного кода по- казан на рис. 5.12.
chapter05/columns.css (фрагмент)
body {
font: 0.8em Arial, Helvetica, sans-serif;
}
.datatable {
border: 1px solid #D6DDE6; border-collapse: collapse; width: 80%;
}
.datatable col.odd { background-color: #80C9FF; color: #000000;
}
.datatable col.even { background-color: #BFE4FF; color: #000000;
}
.datatable td {
border:2px solid #ffffff;
padding: 0.3em;
}
.datatable th {
border:2px solid #ffffff; background-color: #00487D; color: #FFFFFF;
font-weight: bold; text-align: left; padding: 0.3em;
}
Рис. 5.12. Чередование фонового цвета столбцов путем задания стилей для элемента col
Обсуждение
С помощью элемента col можно более гибко задавать стили для столбцов таблицы, чтобы они отличались визуально, и пользователю было удоб- нее воспринимать содержащиеся в них данные. Если элементы col явля- ются дочерними по отношению к элементу colgroup, то для управления внешним видом столбцов можно применить правила стилей по отноше- нию к нему. При отсутствии элемента colgroup броузер считает, что в та- блице только одна группа столбцов, содержащая все элементы col.
Ниже представлен пример вложенных элементов col:
chapter05/colgroups.html (фрагмент)
<table class=”datatable”>
<colgroup class=”odd”>
<col />
<col />
</colgroup>
<colgroup class=”even”>
<col />
<col />
</colgroup>
…
Ниже представлены правила стилей, применяемые по отношению к элементу colgroup, а не col:
chapter05/colgroups.css (фрагмент)
.datatable colgroup.odd { background-color: #80C9FF; color: #000000;
}
.datatable colgroup.even { background-color: #BFE4FF; color: #000000;
}
В результате получим таблицу с двумя колонками одного цвета и двумя колонками другого цвета, что показано на рис. 5.13.
Рис. 5.13. Задание вида таблицы при использовании colgroup
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Создание «резинового» макета: слева – меню, а справа – область с контентом (0)
- Создание макета с тремя колонками средствами CSS (0)
- Создание макета страницы с помощью CSS-таблиц (0)
- Изменение стиля горизонтальной линии (0)
- Удаление отступов по умолчанию для всех элементов страницы (0)
- Задание фонового изображения для страницы с помощью CSS (0)
- Как сделать фоновое изображение неподвижным при прокрутке контента (0)