Полосатые таблицы, то есть таблицы у которых, например, фон нечетной строки серый, а четной белый, проще читать.
Как добавить такое форматирование для таблицы или списка?..
Самый первый способ это добавить классы для нечетных строк, класс odd (нечетный), для четных even (нечетный) класс добавлять не нужно, для них будет использоваться общее форматирование для таблицы.
Это самый трудоемкий способ, поэтому самый неудачный, на мой взгляд)
Второй способ, это использовать возможности CSS 3.
Зададим для таблицы класс table, и в файл стилей добавим следующий код:
.table tr td{background:#fff; border-top:1px solid #dddddd;} .table tr:nth-child(odd) td {background:#f9f9f9;} .content-block ul li {background:#fff; border-top:1px solid #dddddd; padding:4px 4px;} .content-block ul li:nth-child(odd) {background:#f9f9f9;}
Это самый предпочтительный способ, хотя таблицы в старых браузерах не поддерживающих CSS3, останутся без форматирования.
В результате получается вот такое оформление:
Таблица
Список
Третий способ это использовать js код.
Для таблиц с классом table для нечетных строк задается класс odd:
jQuery(function(){ $(".table tr:nth-child(odd)").addClass('odd'); //нечётные строки таблицы });
Для списков, размещенных в контейнере content-block:
jQuery(function(){ $(".content-block li:nth-child(odd)").addClass('odd'); //нечетные эл-ты списка });
Для варианта на JQuery добавляем такой CSS код:
.table td {background:#fff; border-top:1px solid #dddddd;} .table .odd {background:#f9f9f9;} .content-block ul li {background:#fff; border-top:1px solid #dddddd; padding:4px 4px;} .content-block ul li.odd {background:#f9f9f9;}