Чередование фонового цвета строк таблицы
Решение
При просмотре таблицы с большим количеством данных бывает трудно удержать взгляд на конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два различных фоновых цвета поочередно. Неважно, добавляете ли вы ряды таблицы вручную или же отображаете данные из базы данных, – для создания описанного эф- фекта можно использовать классы CSS.
Ниже представлена необходимая разметка:
chapter05/alternate.html (фрагмент)
<table summary=”List of new students 2003” class=”datatable”>
<caption>Student List</caption>
<tr>
<th scope=”col”>Student Name</th>
<th scope=”col”>Date of Birth</th>
<th scope=”col”>Class</th>
<th scope=”col”>ID</th>
</tr>
<tr>
<td>Joe Bloggs</td>
<td>27/08/1997</td>
<td>Mrs Jones</td>
<td>12009</td>
</tr>
<tr class=”altrow”>
<td>William Smith</td>
<td>20/07/1997</td>
<td>Mrs Jones</td>
<td>12010</td>
</tr>
<tr>
<td>Jane Toad</td>
<td>21/07/1997</td>
<td>Mrs Jones</td>
<td>12030</td>
</tr>
<tr class=”altrow”>
<td>Amanda Williams</td>
<td>19/03/1997</td>
<td>Mrs Edwards</td>
<td>12021</td>
</tr>
<tr>
<td>Kylie Jameson</td>
<td>18/05/1997</td>
<td>Mrs Jones</td>
<td>12022</td>
</tr>
<tr class=”altrow”>
<td>Louise Smith</td>
<td>17/07/1997</td>
<td>Mrs Edwards</td>
<td>12019</td>
</tr>
<tr>
<td>James Jones</td>
<td>04/04/1997</td>
<td>Mrs Edwards</td>
<td>12007</td>
</tr>
</table>
А ниже представлена связанная с ним таблица стилей:
chapter05/alternate.css (фрагмент)
body {
font: 0.8em Arial, Helvetica, sans-serif;
}
.datatable {
border: 1px solid #D6DDE6; border-collapse: collapse; width: 80%;
}
.datatable td {
border: 1px solid #D6DDE6;
padding: 0.3em;
}
.datatable th {
border: 1px solid #828282; background-color: #BCBCBC; font-weight: bold;
text-align: left;
padding-left: 0.3em;
}
.datatable caption {
font: bold 110% Arial, Helvetica, sans-serif;
color: #33517A;
text-align: left;
padding: 0.4em 0 0.8em 0;
}
.datatable tr.altrow { background-color: #DFE7F2; color: #000000;
}
Результат обработки данного кода показан на рис. 5.9.
Рис. 5.9. Чередование различного цвета фона для облегчения ориентирования в больших таблицах
Обсуждение
Каждая вторая строка в приведенной выше таблице относится к классу
altrow:
chapter05/alternate.html (фрагмент)
<tr class=”altrow”>
Если вы прочли предыдущие решения в этой главе, то использованные в CSS-коде свойства должны быть вам хорошо знакомы. Кроме того, я добавила следующий класс:
chapter05/alternate.css (фрагмент)
.datatable tr.altrow { background-color: #DFE7F2; color: #000000;
}
Эти стили будут применены ко всем элементам tr класса altrow, находя- щимся внутри таблицы класса datatable.
Если вы формируете таблицу динамически с помощью ASP, PHP или иной подобной технологии, извлекающей данные из базы данных, то для чередования фонового цвета придется приписывать данный класс каждому второму отображаемому ряду.
Взгляд в будущее
Добавлять имя класса для каждого второго ряда довольно утомительно, и вы не ошиблись, если задумались о наличии альтернативного реше- ния той же самой задачи. Эффекта чередования можно достичь исклю- чительно средствами CSS. Надо отметить, что этот метод гораздо эффек- тивнее. Воспользовавшись селектором псевдокласса CSS3 :nth-child, можно выбрать все четные или нечетные ряды таблицы, ничего не ме- няя в HTML-разметке. Наступят времена, когда все броузеры будут под- держивать этот псевдокласс, и жизнь разработчиков на CSS станет го- раздо проще. Понять механизм функционирования этого псевдоклас- са достаточно сложно, поэтому рекомендую вам обратиться к справоч- ной документации CSS Reference, в которой он прекрасно представлен.1
С помощью данного селектора псевдокласса можно выбирать элементы в зависимости от количества предшествующих ему элементов того же уровня.
Вернемся к изначальному коду таблицы до добавления имени класса для рядов. Можно обратиться ко всем четным рядам таблицы с помо- щью следующего CSS-кода:
.datatable tr:nth-child(2n) { background-color: #DFE7F2; color: #000000;
}
Для обращения ко всем нечетным рядам можно использовать следую- щий CSS-код:
.datatable tr:nth-child(2n+1) { background-color: #DFE7F2; color: #000000;
}
Содержащиеся в данном селекторе числовые выражения могут пока- заться замысловатыми, но, к счастью, разработчикам настолько часто приходится выполнять подобную задачу, что в спецификации CSS3 был описан более простой синтаксис. Вместо числовых выражений в скоб- ках можно использовать ключевые слова:
.datatable tr:nth-child(even) {
?
}
.datatable tr:nth-child(odd) {
?
}
На момент написания данной книги эти примеры обрабатывались по- следними версиями Opera и Safari, но, пока данный псевдокласс не по-
Совет
Обеспечение поддержки с помощью JavaScript. JavaScript-библиотека jQuery поддерживает селекторы CSS3,1 поэтому ее можно использовать для че- редования фонового цвета ячеек таблицы. Для создания описанного эффекта, выполняющего эстетическую функцию, можно использовать JavaScript; при этом не нужно добавлять имена классов элементам разметки.
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- Получение больших наборов данных (0)
- Анализ большого набора данных (0)
- Пример: выявление тенденций (0)
- Создание таксономии запросов (0)
- Завершение углубленного анализа востребованности поисковых запросов (0)
- Что такое селекторы и как их правильно использовать (0)
- Создание «резинового» макета: слева – меню, а справа – область с контентом (0)