Чередование фонового цвета строк встречается гораздо чаще, чем чередование цвета столбцов. Однако этот прием достаточно эффективен для выделения группы данных.

Решение
Для описания колонок таблицы мы воспользуемся элементом col. При этом можно задать для них фоновый цвет с помощью CSS. В следующей разметке видны добавленные для каждого столбца элементы col, каждому из которых присвоено имя класса (как и в примере с изменением фонового цвета строк в разделе «Чередование фонового цвета строк таблицы»).

<table class="datatable">

  <col class="odd" />
  <col class="even" />
  <col class="odd" />
  <col class="even" />

  <tr>
    <th>Европа</th>
    <th>Азия</th>
    <th>Америка</th>
    <th>Африка</th>
  </tr>
  <tr>
    <td>Испания</td>
    <td>Китай</td>
    <td>Мексика</td>
    <td>Эфиопия</td>
  </tr>
  <tr class="even">
    <td>Франция</td>
    <td>Корея</td>
    <td>Аргентина</td>
    <td>Судан</td>
  </tr>
  <tr>
    <td>Германия</td>
    <td>Япония</td>
    <td>Бразилия</td>
    <td>Египет</td>
  </tr>
  <tr class="even">
    <td>Италия</td>
    <td>Вьетнам</td>
    <td>США</td>
    <td>Ливия</td>
  </tr>
  <tr>
    <td>Греция</td>
    <td>Монголия</td>
    <td>Канада</td>
    <td>Алжир</td>
  </tr>
</table>

Классам, присвоенным элементам col, можно задать определенные правила стилей, как показано ниже; результат обработки данного кода показан на рис. 5.12.

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 (DEMO)

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

Ниже представлен пример вложенных элементов col:

<table class=”datatable”>
<colgroup class=”odd”>
<col />
<col />
</colgroup>
<colgroup class=”even”>
<col />
<col />
</colgroup>
... 

Ниже представлены правила стилей, применяемые по отношению к элементу colgroup, а не col:

.datatable colgroup.odd {
background-color: #80C9FF;
color: #000000;
}
.datatable colgroup.even {
background-color: #BFE4FF;
color: #000000;
}

В результате получим таблицу с двумя колонками одного цвета и двумя колонками другого цвета, что показано на рис. 5.13.

Рис. 5.13. Задание вида таблицы при использовании colgroup (DEMO)