Клетчатые строки таблицы и столбцы?

Question

Есть ли способ сделать строки и столбцы в таблице HTML измененными между двумя разными цветами?

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

Спасибо!

Answer 1

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

tr td
{
    background-color: #fff;
}

tr:nth-child(even) td:nth-child(odd), 
tr:nth-child(odd) td:nth-child(even)
{
    background-color: #ccc;
}

Answer 2

Конечно можно. Вот простая функция JavaScript, которая позаботится об этом за вас:

function altRows() {
    var table = document.getElementById("tableToAlternateRowsIn");
    var tRows = table.getElementsByTagName("tr");
    var cssClassName;

    for(var i = 0; i < tRows.length; i++) {
        (i % 2 == 0) ? cssClassName = "odd" : cssClassName = "even";
        tRows[i].className = cssClassName;
    }
}

window.onload = altRows;

Это должно помочь тебе. Не проверено, поэтому может работать не так, как планировалось.

Answer 3

См. Пример в Colorize - jQuery Table Plugin - он включает в себя некоторый Javascript, но вы можете использовать его как есть или читать в качестве примера.

Colorize - это плагин jQuery для добавления цвета фона в чередующиеся строки таблицы, выделения строки / столбца при наведении курсора мыши и раскраски строки / столбца при щелчке мыши над ним. Вы можете раскрасить столько строк таблицы, сколько захотите. Повторный щелчок мыши возвращает строку к исходному цвету фона.

Answer 4

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

Answer 5

Чтобы сделать это только с помощью HTML + CSS и заставить его работать со всеми основными браузерами, вам придется вручную добавить класс в каждую альтернативную строку:

<tr>
   <td>col1</td>
   <td>col2</td>
</tr>
<tr class="highlight">
   <td>col1</td>
   <td>col2</td>
</tr>
<tr>
   <td>col1</td>
   <td>col2</td>
</tr>
<tr class="highlight">
   <td>col1</td>
   <td>col2</td>
</tr>

и т.д ...

Затем используйте CSS, чтобы изменить цвет строк:

tr {
  background-color: #FFF;
}
tr.highlight {
  background-color: #CCC;
}

Answer 6

Конечно. Сделайте их одинаковыми белыми (то есть оставьте их по умолчанию), а затем программно добавьте не совсем белый стиль ко всем другим TD (или span, div или li или ...).

Не забывайте, что вам нужно начинать с «столбца» 0 или 1 в зависимости от того, в какой строке вы находитесь.