cssing Архив » Таблицы в полоску

Таблицы в полоску

Давненько уже на ALA была статья про “Полосатые таблицы”. Решил поделиться маленькой хитростью которую подсмотрел там же в обсуждении статьи.

Что было

В оригинальной статье использовался довольно немаленький (по меркам современного веба) скрипт. Этот скрипт искал таблицу и потом определенным ячейкам присваивал фоновый цвет.
Причем этот скрипт не работал в старых ИЕ(5.0, 5.5) поскольку они не поддерживали такое присвоение.(у меня по крайней мере не заработало).

Присвоение же цвета агрументировалось экономией имени класса.(ИМО абсолютно не нужной). перевод статьи можно почитать здесь: Полосатые таблицы

Другие пути

Порывшись на ALA в обсуждении этой статьи, я обнаружил несколько намного более изящных путей для решения проблемы.

Путь первый: универсальный

Идея первого пути почти такая же в оригинале. Но теперь мы присваиваем не фоновые цвета для каждой ячейки, а классы для строк.
Вот собственно скрипт:

function stripe(id) {
    var table = document.getElementById(id);
    if (! table) { return; }
    var trs = table.getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i += 2) {
      trs[i].className += ' even';
    }
  }

Где вместо ID нужно подставить ID будущей "зебры".
Лично я, для раскраски нескольких таблиц, использую такую конструкцию:

/*Running onLoad Scripts*/
  function runScripts()
	{
	stripe('price');
	stripe('price-a');
	stripe('price-b');
	stripe('price-d');
	}
window.onload = runScripts;

Ну и естественно, так как скрипт лишь расставляет лишь класс для строк без CSS тут не обойтись:

#price tbody tr.even td {
	background-color: #edf3fe
}

Таким образом на любой странице этим подключенным скриптом будут раскрашены таблицы с id price,price-a,price-b,price-d.
Пример можно посмотреть по адресу: http://cssing.iatp.org.ua/examples/melos/table.html

Второй путь: НЕуниверсальный

Это решение наверно можно назвать реализацией CSS3 в ИЕ.
Работает это естественно только для ИЕ. :(
Но уж больно симпатичное и изящное оно.
Для полосатых таблиц достаточно добавить в CSS вот такую строку:

.zebra tr {
background: expression(this.rowIndex%2 == 1?'#F0F0F0':'#FFF');
}

Все таблицы класса .zebra будут полосаты в ИЕ.

Само собой

Для того что бы работал скрипт, надо что бы структура таблиц была примерно такая:

<table id='playlist'>
  <tbody>
    <tr class='odd'>
     ...
    </tr>
  </tbody>
</table>

Ну и для красоты рекомендую сразу поставить cellspacing=”0″ для всех таблиц которые вам нужны полосатыми.

В обсуждении были еще методы. Но первый был лучшим, а второй занятным. Что и определило мой выбор.

XHTML/CSS, Полезности