Доброго времени суток дорогие читатели, в этой статье я расскажу про "Полосатые таблицы", точнее как их сделать, и что это вообще такое. "Полосатая таблица" - это обычная таблица, просто цвет строк чередуется. Такая таблица напоминает зебру, (от того и полосатая).
А вот и она:
Для чего, собственно, она нужна такая полосатая? А нужна она по следующей причине - Удобочитаемость. Хотя кроме удобочитаемости, такая таблица обладает "симпатичной внешностью" (ну сами посмотрите).
Сделать такую таблицу можно следующим образом: каждая четная строка будет иметь цвет фона одного цвета, каждая нечетная будет отличаться от нее соответственно (от четной цветом фона). Для удобства, будем использовать каскадные таблицы стилей, а именно создадим два класса,
z1 и
z2, для четной и нечетной строки. Цвета на ваше усмотрение, а мы возьмем эти:
#ccffff - для четной,
#fff - для нечетной.
$max_str=15; - этой переменной присвоим значение, которое указывает на количество строк таблицы. В данном случае - 15 строк.
<?php
echo "<html><head><title>Полосатая таблица</title><style type='text/css'>
body{font-family:tahoma;color:#666;}
.z1{background:#ccffff;padding:10px;font-size:11px}
.z2{background:#fff;padding:10px;font-size:11px}
</style></head><body>
<table cellpadding='0' cellspacing='0' border='0' width='100%'>";
$max_str=15; //Количество строк таблицы
for($i=0; $i<=$max_str; $i++){
echo "<tr><td class='".($i%2==0?"z1":"z2")."'>строка ".$i."</td></tr>";
}
echo "</table></body></html>";
?>
echo "<tr><td class='".($i%2==0?"z1":"z2")."'>строка ".$i."</td></tr>";
Здесь происходит самое главное:
($i%2==0?"z1":"z2") - если $i содержит четное значение, то подставляем класс
z1, иначе
z2
<tr><td class='z1'>четная</td></tr>
<tr><td class='z2'>нечетная</td></tr>
% - этот оператор позволяет определить остаток от деления. В данном случае остаток от деления на 2. Нет остатка - четное, иначе - нечетное.
Можно также, вместо строк использовать столбцы или, и то и другое. (Это необходимо если столбцов много). Вместо таблиц можно использовать слои (DIV). В данной статье был показан простенький пример, поэкспериментируйте с ним, попробуйте усложнить его, например так: выводим содержимое массива (предварительно заполнив каждую ячейку каким либо текстом, при этом оставив несколько ячеек пустыми), если ячейка пуста, то цвет строки будет, допустим серого, плюс ко всему, каждая четная одного цвета, нечетная соответственно другого. Попробуйте также сделать полосатыми столбики. Удачи!
Автор: Бекенов Балтабек (cybri0nix)
NAVAT.NET (наш партнёр)