Czasami istnieje potrzeba pokazania jakichś elementów w formie katalogu. Może być to np. lista znajomych, katalog użytkowników, jakieś obrazki. W tym poradniku pokażę Wam jak napisać skrypt, który będzie w stanie wyświetlać dane elementy w tylu kolumnach, w ilu będziemy chcieli. W przykładzie utworzymy katalog obrazków.
Na początku stwórzmy sobie prosty szablon HTML. Umieścimy w nim tabelę, która będzie naszym katalogiem. Ja nadałem jej atrybut cellspacing równy 5px.
<html> <head> <title>Wyświetlanie elementów w formie katalogu</title> </head> <body> <h1>Wyświetlanie elementów w formie katalogu</h1> <table cellspacing="5px"> </table> </body> </html>
Teraz zajmijmy się samym kodem PHP. Na początku stworzyłem tablicę $obrazki, która przechowuje adresy obrazów. Następnie zdefiniowałem, ile chcę mieć kolumn. Wybrałem 3. Dalej zostaje już tylko obliczanie ilości wierszy i wyświetlanie.
<?php $obrazki = array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png'); $ile = count($obrazki); $kolumny = 3; $wiersze = ceil($ile / $kolumny); $current = 0; for($wiersz = 0; $wiersz < $wiersze; $wiersz++) { echo '<tr>'; for($kolumna = 0; $kolumna < $kolumny; $kolumna++) { if($current < $ile) { echo '<td><img src="'.$obrazki[$current].'" alt="Obrazek" width="150px" height="150px" style="border: 2px solid black;" /></td>'; $current++; } } echo ' </tr>'; } ?>
Cały nasz kod przyjmie teraz taką postać:
<html> <head> <title>Wyświetlanie elementów w formie katalogu</title> </head> <body> <h1>Wyświetlanie elementów w formie katalogu</h1> <table cellspacing="5px"> <?php $obrazki = array('image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png'); $ile = count($obrazki); $kolumny = 3; $wiersze = ceil($ile / $kolumny); $current = 0; for($wiersz = 0; $wiersz < $wiersze; $wiersz++) { echo '<tr>'; for($kolumna = 0; $kolumna < $kolumny; $kolumna++) { if($current < $ile) { echo '<td><img src="'.$obrazki[$current].'" alt="Obrazek" width="150px" height="150px" style="border: 2px solid black;" /></td>'; $current++; } } echo ' </tr>'; } ?> </table> </body> </html>
Jak widać, w bardzo prosty sposób można przedstawić coś w formie katalogu. Oczywiście dane nie muszą być określone w skrypcie, można je pobierać z bazy danych i dopiero wyświetlić. Dziękuję za uwagę. :)
Zobacz przykład | Pobierz Demo
