Русскоязычные документы веб-мастеру готовы к употреблению
Где вы зарабатываете больше всего?
Яндекс.Директ
Google Adsens
Sape
Begun
Setlinks
Mainlinks
Blogun

Доброго времени суток дорогие читатели, в этой статье я расскажу про "Полосатые таблицы", точнее как их сделать, и что это вообще такое. "Полосатая таблица" - это обычная таблица, просто цвет строк чередуется. Такая таблица напоминает зебру, (от того и полосатая).

А вот и она:



Для чего, собственно, она нужна такая полосатая? А нужна она по следующей причине - Удобочитаемость. Хотя кроме удобочитаемости, такая таблица обладает "симпатичной внешностью" (ну сами посмотрите).


Сделать такую таблицу можно следующим образом: каждая четная строка будет иметь цвет фона одного цвета, каждая нечетная будет отличаться от нее соответственно (от четной цветом фона). Для удобства, будем использовать каскадные таблицы стилей, а именно создадим два класса, 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 (наш партнёр)

Комментарии

 13.03.2009    Пётр

А если количество строк мне неизвестно ? Т.е их количество может менятся то что делать в таком случае ?

Имя 

 

[15.10.08] Урок фотошоп Рисование фракталов

[14.10.08] Плагины для Photoshop Добавлено парочку новых.

[13.10.08] Пиксельные шрифты Добавлено 11 шрифтов.

[10.10.08] Урок фотошопа Как нарисовать дерево.

[05.10.08] JavaScript Новая документация.

[03.10.08] Plug-ins Пару новых плагинов для фотошопа.

[01.10.08] Урок фотошопа Старая фотография.

[01.10.08] Урок фотошопа Сказочный текст.

[30.09.08] PERL статьи 3 новых интересных статьи.

[30.09.08] PHP статьи Полосатая таблица.

[29.09.08] WEB документация На сайте появились учебники и книги.

[18.09.08] Урок Фотошопа Ледяной текст 2.

[16.09.08] Урок Фотошопа Mp3 Player.

[15.09.08] Урок Фотошопа Огненный текст.

Все новости
Рейтинг@Mail.ru
Александр Акимов
ICQ:
Mail: odvd@ya.ru