Оглавление

Чередование фонового цвета строк таблицы

Решение
При просмотре таблицы с большим количеством данных бывает трудно удержать взгляд на конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два различных фоновых цвета поочередно. Неважно, добавляете ли вы ряды таблицы вручную или же отображаете данные из базы данных, – для создания описанного эффекта можно использовать классы CSS.

 

Ниже представлена необходимая разметка:

<table summary="List of new students 2003" class="datatable">
  <caption>Список студентов</caption>
  <tr>
    <th scope="col">Имя студента</th>
    <th scope="col">День рождения</th>
    <th scope="col">Группа</th>
    <th scope="col">Номер</th>
  </tr>
  <tr>
    <td>Юрий</td>
    <td>27/08/1997</td>
    <td>122</td>
    <td>12009</td>
  </tr>
  <tr class="altrow">
    <td>Николай</td>
    <td>20/07/1997</td>
    <td>122</td>
    <td>12010</td>
  </tr>
  <tr>
    <td>Андрей</td>
    <td>21/07/1997</td>
    <td>122</td>
    <td>12030</td>
  </tr>
  <tr class="altrow">
    <td>Елена</td>
    <td>19/03/1997</td>
    <td>123</td>
    <td>12021</td>
  </tr>
  <tr>
    <td>Виктор</td>
    <td>18/05/1997</td>
    <td>123</td>
    <td>12022</td>
  </tr>
  <tr class="altrow">
    <td>Светлана</td>
    <td>17/07/1997</td>
    <td>122</td>
    <td>12019</td>
  </tr>
  <tr>
    <td>Валентин</td>
    <td>04/04/1997</td>
    <td>123</td>
    <td>12007</td>
  </tr>
</table>

 


А ниже представлена связанная с ним таблица стилей:

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:

  <tr class="altrow">


Если вы прочли предыдущие решения в этой главе, то использованные в CSS-коде свойства должны быть вам хорошо знакомы. Кроме того, я добавила следующий класс:

.datatable tr.altrow {
	background-color: #DFE7F2;
	color: #000000;
}


Эти стили будут применены ко всем элементам tr класса altrow, находящимся внутри таблицы класса datatable.
Если вы формируете таблицу динамически с помощью ASP, PHP или иной подобной технологии, извлекающей данные из базы данных, то для чередования фонового цвета придется приписывать данный класс каждому второму отображаемому ряду.

 

10
 << Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити