Полосатые таблицы

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

Таблица обычно несет в себе довольно много информации, расположенной и отсортированой на довольно маленькой площади. Так почему бы не сделать чтение этой информации более приятным и легким?

iTunes таблица Попытаемся немного освежить вывод информации в таблицах. Ниже приведены три способа, позволяющие быстро создать полосатые таблицы за счет четных и нечетных рядов в таблице. Выбор за вами.

Способ первый. Самый явный.

Так как вариантов рядов у нас всего два, то указывать отдельно каждый не имеет смысла. Мы укажем только нечетные ряды. Соответственно все остальные будут четными ;)

Смотрим простой пример здесь.

Основной недостаток в том, что нам надо явно прописывать в коде класс для рядов.

Способ второй. Динамический.

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

Пример смотрим здесь, в комментариях в коде присутствуют описания.

Чем хорош этот способ?

Классы теперь можно использовать для каких-либо более конкретных задач, на пример выделение выбранного ряда.
“Заполосатить” теперь можно любую таблицу на любой странице где присутствует вызов функции.

Знаете способ лучше? Пишите в комментариях.

Способ третий. XSLT.

В XSLT все на много проще. Нужно вписать в темплэйт условие, которое будет проверять tr на четность-нечетность и в зависимости от ваших нужд будет либо присваивать атрибут class или же будет выписывать стиль. На пример:

<tr>
<xsl:if test="(position() mod 2 = 1)">
<xsl:attribute name = "style">background:#f4f4f4;</xsl:attribute>
</xsl:if>
<td colspan="5"><strong>Заметки:</strong><xsl:value-of select="text()"/></td>
</tr>

Эта запись опубликована в Вторник, 9/01/2007 , 6:15 пп и размещена в рубрике CSS, Javascript, XSLT. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.