HTML/CSS

Полосатая таблица или зебра

Сборник методов как сделать HTML таблицу «полосатой» или, как ее еще называют «таблица с зеброй».

1

Вариант на CSS

В CSS можно применить псевдокласс :nth-child он используется для добавления стиля к элементам на основе нумерации. Подробнее на http://htmlbook.ru/css/nth-child.

<table id="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Jake</td>
            <td>Propper</td>
            <td>@vso</td>
        </tr>
    </tbody>
</table>
/* Нечетные строки */
#table tbody tr:nth-child(odd){
    background: #fff;
}

/* Четные строки */
#table tbody tr:nth-child(even){
    background: #F7F7F7;
}

Чтобы сделать разноцветные строки таблицы с количеством цветов более двух, можно применить следующие прием:

/* Строки 1,4,7... */
#table tbody tr:nth-child(3n+1){
    background: #f2fff5;
}

/* Строки 2,5,8... */
#table tbody tr:nth-child(3n+2){
    background: #ffeaea;
}

/* Строки 3,6,9... */
#table tbody tr:nth-child(3n+3){
    background: #eeecff;
}
2

Вариант на JS

Скрипт перебирает строки таблицы и добавляет им классы odd и even.

var table = document.getElementById('table');
var table_body = table.getElementsByTagName('tbody');

for (var h = 0; h < table_body.length; h++) {
    var table_tr = table_body[h].getElementsByTagName('tr');
    for (var i = 0; i < table_tr.length; i++) {
        if (i%2) {
            table_tr[i].className = 'even';
        } else {
            table_tr[i].className = 'odd';
        }
    }
}
/* Нечетные строки */
#table .odd {
    background: #fff;
}

/* Четные строки */
#table .even {
    background: #F7F7F7;
}
3

Вариант на jQuery

Добавлением класса строкам таблицы: 

$('#table tbody tr:odd').addClass('odd');
$('#table tbody tr:even').addClass('even');

Или добавление CSS стилей:

$('#table tbody tr:odd').css('background', '#F7F7F7');
$('#table tbody tr:even').css('background', '#fff');
4

Вариант на PHP

В скрипте используется префиксный инкремент (++$i) для подсчета строк и арифметический оператор % - деление по модулю.
Выражение ($i%2) вернет "1" если число в переменной $i нечетное и "0" если четное. 

<?php $i = 0; ?>

<table id="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr class="<?php echo (++$i%2) ? 'odd' : 'even'; ?>">
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr class="<?php echo (++$i%2) ? 'odd' : 'even'; ?>">
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr class="<?php echo (++$i%2) ? 'odd' : 'even'; ?>">
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        <tr class="<?php echo (++$i%2) ? 'odd' : 'even'; ?>">
            <td>4</td>
            <td>Jake</td>
            <td>Propper</td>
            <td>@vso</td>
        </tr>
    </tbody>
</table>

<style type="text/css">
/* Нечетные строки */
#table .odd {
    background: #fff;
}

/* Четные строки */
#table .even {
    background: #F7F7F7;
}
</style>
12 ноября 2017