PHP – вывод таблицы зеброй

PHP – вывод таблицы зеброй

PHP – вывод таблицы зеброй

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

Мы с Вами напишем собственную функцию, которая будет отвечать за вывод таблицы зеброй. И так приступим.


<?php
//Создаем массив с данными от 1 до 5
 $data = range(1,5);
 
 /*Функция заливки таблицы
 *@param int $num
 */
 function bgColorTable($num)
 {
     //Первый цвет заливки строки таблицы
     $bg = '#c0c0c0';
     
     if(++$num % 2 == 0)
        //Второй цвет заливки строки таблицы
        $bg = '#ffffd0';

     //Возвращаемый цвет заливки строки таблицы
     return $bg;
 }

 //Рисуем саму таблицу
 $tbl = '<table border="0" width="50%" align="center">'."\n";
 
 //Определяем переменную для инкремента
 $i = 0;

 //Перебираем массив с данными и вставляем в ячейки таблицы
 foreach($data as $val)
 {
    $tbl .= '<tr bgcolor="'. bgColorTable($i++) .'">'."\n";
    $tbl .= '<td>'. $val .'</td>'."\n";
    $tbl .= '</tr>'."\n";
 }
 
 $tbl .= '</table>'."\n";

 //Выводим сгенерированную таблицу
 echo $tbl;
?>

Пример №1 - Вывод таблицы зеброй

1
2
3
4
5

Мы создали функцию, которая отвечает за генерацию цвета строки ячеек в таблицы. Теперь, когда нам нужно в таблицу вывести зеброй мы всего лишь на всего вызываем нашу функцию. Если нужно изменить цвета, то мы лишь в одном месте меняем их в теле функции, а не бегаем судорожно по страницам с кодом и исправляем везде. Согласитесь, удобней поменять значения параметра в одном месте, чем искать их в разных местах.

Но данный пример не очень гибкий. Дело в том, что данная реализация позволяет нам сохранить стиль наших таблиц на всем нашем , но бывают случаи, когда нужно таблицу разукрасить другими цветами. Чтобы не писать новую функцию специально для одной таблицы или нескольких мы немного модифицируем нашу функцию.


<?php
//Создаем массив с данными от 1 до 5
 $data = range(1,5);
 
 /*Функция заливки таблицы
 *@param int $num
 *@param string $bgOne
 *@param string $bgTwo
 */
 function bgColorTable($num, $bgOne = '#c0c0c0', $bgTwo = '#ffffd0')
 {
     //Первый цвет заливки строки таблицы
     $bg = $bgOne;
     
     if(++$num % 2 == 0)
        //Второй цвет заливки строки таблицы
        $bg = $bgTwo;

     //Возвращаемый цвет заливки строки таблицы
     return $bg;
 }

 //Рисуем саму таблицу
 $tbl = '<table border="0" width="30%" align="center">'."\n";
 
 //Определяем переменную для инкремента
 $i = 0;

 //Перебираем массив с данными и вставляем в ячейки таблицы
 foreach($data as $val)
 {
    //Получаем цвет заливки по умолчанию
    $color = bgColorTable($i++);
    
    $tbl .= '<tr bgcolor="'. $color .'">'."\n";
    $tbl .= '<td width="20px" valign="middle" align="center"><b>'. $val .'</b></td>'."\n";
    $tbl .= '<td width="200px" valign="middle" style="padding-left:5px">'. $color .'</td>'."\n";
    $tbl .= '</tr>'."\n";
 }
 
  //Перебираем массив с данными и вставляем в ячейки таблицы
 foreach($data as $val)
 {
    //Получаем цвет заливки с новыми цветами
    $color = bgColorTable($i++, '#ff0000','#ffcc00');
    
    $tbl .= '<tr bgcolor="'. $color .'">'."\n";
    $tbl .= '<td width="20px" valign="middle" align="center"><b>'. $val .'</b></td>'."\n";
    $tbl .= '<td width="200px" valign="middle" style="padding-left:5px">'. $color .'</td>'."\n";
    $tbl .= '</tr>'."\n";
 }
 
 //Закрываем таблицу
 $tbl .= '</table>'."\n";

 //Выводим сгенерированную таблицу
 echo $tbl;
?>

Пример №2 - Вывод таблицы зеброй

1 #c0c0c0
2 #ffffd0
3 #c0c0c0
4 #ffffd0
5 #c0c0c0
1 #ffcc00
2 #ff0000
3 #ffcc00
4 #ff0000
5 #ffcc00

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

Скачать: PHP – вывод таблицы зеброй


Теги
Поддержи проект:

No-name
Natasha Lim
Hey, I visited your site and I think that your content is amazing! It is really engaging and original, you must have worked so hard to generate such a quality content. My name is Natasha from ForeMedia and I help website owners with great websites to maximize the revenue they make from their website. I would love to buy Ad Spaces on your website and pay you per each impression of the ads on your site. We are Google Ad Exchange Premium partners and we work with more than 100 Ad Network & thousands of premium direct advertisers who would LOVE to buy Ads directly from your site and we can guarantee to increase your revenue by at least 45% compared to other advertising solutions you are currently using. You deserve to earn more for your content and maximize your earning potential and I will help you unlock that potential! There is no cost, you can register to our monetization platform for free on this link: https://foremedia.pro/JVZq5 I will be available for you on the Live Chat if you need any help, or you can email me back to: natasha@foremedia.pro if you have any questions. I have at least 17 Premium Advertisers that have asked me to approach you because they would like to advertise on your website on Premium eCPM [cost per impressions] basis. Have a good day & feel free to ping me for any question! Click the link here for 1 minute registration to our platform [it's free!]: https://foremedia.pro/JVZq5 ForeMedia - Earn Money With Your Website https://foremedia.pro/JVZq5

15/03/2024 16:16:40

No-name
Сергей
IE8 доля настолько ничтожно мала, что им можно принибречь без всяких потерь я и говорю, что средствами php делать таблицу в наше время это костыли, зачем этому учить, это не тренд, надо же задавать правильные направления новичкам, зачем учить плохому можно как пример показать, но сказать, что современное решение это то, которое я привел

23/09/2015 19:09:52

Администратор
Администратор
Сергей тема моего урока была PHP – вывод таблицы зеброй, а не средствами CSS3. Если буду делать уроки по CSS3 то обязательно сделаю сравнение с этим методом. Спасибо Вам за критику.

24/09/2015 08:29:24

No-name
Сергей
по Bootstrap если вы присмотритесь к табличке, то увидите, что она про броузеры в принципе, а не только про Bootstrap, там нет поддержки именно броузеров фактически, например нет IE нигде кроме как на Windows - ну так это объективно, нет браузера этого на других ОС, соответственно нет и Bootstrap, а на всех типичных, родных броузерах везде поддержка имеется :)

21/09/2015 12:36:56

Администратор
Администратор
Количество пользователей ОС Windows очень велико по сравнению с другими ОС, и Bootstrap не может игнорировать IE из-за большой аудитории. О чем собственно и говорится в табличке. Т.е. IE присудствует на каждом ПК под ОС Window + пользователь может выбрать в качестве альтернативы любой другой браузер. При этом во многих крупных компания ПК под управлением ОС Windows имеют возможность использовать только IE так как это обусловленно информационной политикой предприятия. Bootstrap пытается както с использованием костылей поддерживать IE 8, но не всегда получается. :)

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

21/09/2015 14:16:00

No-name
Сергей
какой IE8, давно уже принята концепция среди разработчиков отказаться от поддержки костылями старых броузеров, Chrome и Firefox и Opera обновляются автоматически, доля IE8 ничтожно мала, а с выходом 10-ки виндоцы так он вообще мертв вот решение на читсом css: tbody { border: 1px solid #CCC; } tr td { pading 0px; border: 1px solid #CCC; } tr:nth-of-type(even){ background-color: #f3f3f3; } tr:nth-of-type(odd){ background-color: #ddd; } и ни строчки кода :)

21/09/2015 12:30:34

Администратор
Администратор
Все это здорово, я тоже не любитель IE, но судя по статистики из яндекс метрики есть люди пользующиеся IE 7. Конечно их доля на общем фоне мала, но она есть. Тем более у меня вывод зеброй с помощью PHP а не средствами HTML-5 + CSS-3.

21/09/2015 13:42:00

No-name
Сергей
это глупость делать так полосатую таблицу, все делается средствами чистого css , и в популярных фреймворках типа bootstrap это все давно имеется

18/09/2015 19:12:43

Администратор
Администратор
Сергей Это ваше мнение. Не у всех пользователей стоят новые ОС. Многие используют старый браузер типа IE 8 который не поддерживает в полной мере CSS3 и разноцветная таблица средствами bootstrap может не работать. О поддерживаемых браузерах bootstrap можете почитать тут - http://getbootstrap.com/getting-started/

19/09/2015 10:04:24


Copyright © 2014 - 2024 All rights reserved.