Давно мы о таблицах не говорили. Да и что о них говорить? Их оформлять надо. Табличное представление информации является одним из важных инструментов донесения данных до пользователя и несомненно должно быть удобным и легким для восприятия.
Существуют различные методы визуального разграничения информации в таблицах для большего удобства восприятия. Такие как разделение строк таблицы различным цветом. Этот способ известен под названием «Полосатые таблицы».
Сегодня я хотел бы поговорить о столбцах (колонках) таблицы. Признавайтесь, сколько раз вы чертыхались, прописывая класс для каждой ячейки в каждой строке, чтобы выделить ту или иную колонку фоновым цветом? :)
Сейчас это конечно уже в прошлом, существуют решения с использованием JS, CSS3 и всевозможных js-фрэймворков. Мы их рассматривать сейчас не будем, благо поиск никто не отменял.
Существует простое, кроссбраузерное решение, основаное только на HTML/CSS. А именно colgroup. Решение это совсем не ново, но почему-то незаслужено забыто многими разработчиками. Перейдем прямиком к разметке:
Чем этот код отличается от обычной разметки таблицы? Наличием тегов colgroup и col. Собственно colgroup является родительским контейнером для элементов col, которые и определяют нужные нам столбцы. Достаточно указать тому или иному столбцу класс и вуаля — у нас есть колонки, выделенные по вашему вкусу.
Вот так выглядит CSS:
В принципе ничего сложного, и уж тем более инновационного, здесь нет. Таким способом можно задавать стиль для любого столбца таблицы.
Проверено в FF2/3, IE6/7, Opera 9.5, Safari|(Win). Рабочий пример можно посмотреть.
Upd: Список поддерживаемых стилевых правил.
Существуют различные методы визуального разграничения информации в таблицах для большего удобства восприятия. Такие как разделение строк таблицы различным цветом. Этот способ известен под названием «Полосатые таблицы».
Сегодня я хотел бы поговорить о столбцах (колонках) таблицы. Признавайтесь, сколько раз вы чертыхались, прописывая класс для каждой ячейки в каждой строке, чтобы выделить ту или иную колонку фоновым цветом? :)
Сейчас это конечно уже в прошлом, существуют решения с использованием JS, CSS3 и всевозможных js-фрэймворков. Мы их рассматривать сейчас не будем, благо поиск никто не отменял.
Существует простое, кроссбраузерное решение, основаное только на HTML/CSS. А именно colgroup. Решение это совсем не ново, но почему-то незаслужено забыто многими разработчиками. Перейдем прямиком к разметке:
<table>
<caption>Столбцы / колонки:</caption>
<colgroup>
<col />
<col class="alt" />
<col />
<col class="alt" />
<col />
</colgroup>
<tr>
<th>FF2/3</th>
<th>IE6/7</th>
<th>Opera</th>
<th>Safari</th>
<th>Other</th>
</tr>
<tr>
<td>Да</td>
<td>Нет</td>
<td>Да</td>
<td>Нет</td>
<td>Да</td>
</tr>
<tr>
<td>Да</td>
<td>Нет</td>
<td>Да</td>
<td>Нет</td>
<td>Да</td>
</tr>
<tr>
<td>Да</td>
<td>Нет</td>
<td>Да</td>
<td>Нет</td>
<td>Да</td>
</tr>
<tr>
<td>Да</td>
<td>Нет</td>
<td>Да</td>
<td>Нет</td>
<td>Да</td>
</tr>
</table>Чем этот код отличается от обычной разметки таблицы? Наличием тегов colgroup и col. Собственно colgroup является родительским контейнером для элементов col, которые и определяют нужные нам столбцы. Достаточно указать тому или иному столбцу класс и вуаля — у нас есть колонки, выделенные по вашему вкусу.
Вот так выглядит CSS:
table {
border: 1px solid #333;
border-collapse: collapse;
}
th, td {
padding: 2em;
text-align: center;
border-spacing: 1em;
}
th {
background: #ddd;
color: #fff;
}
/*Стиль для столбца*/
col.alt {
background: #ddf;
}В принципе ничего сложного, и уж тем более инновационного, здесь нет. Таким способом можно задавать стиль для любого столбца таблицы.
Проверено в FF2/3, IE6/7, Opera 9.5, Safari|(Win). Рабочий пример можно посмотреть.
Upd: Список поддерживаемых стилевых правил.
