Design tabuľky, cyklus v cykle
Z minulej kapitoly už máme pripravené pole s dátami pre našu tabuľku. Keď sme sa učili o tabuľkách, mali sme dáta uložené v jednorozmernom poli. Toto pole sme si prechádzali cyklom, v každom kroku sme mali index zväčšený o jedna a tento index reprezentoval aj aktuálne pozíciu v poli prvku, takže sme sa k nemu vedeli dostať. Teraz však máme dvojrozmerné pole a potrebujeme vypísať všetky jeho hodnoty do tabuľky s tým, že prvý rozmer pola obsahuje pole dát, ktoré chceme zobraziť do jedného riadka. Ako na to?
Skúste sa nad tým zamyslieť. Keď sme chceli vypísať všetky prvky jednorozmerného poľa, prešli sme si ho cyklom, v každom kroku sme sa dostali konkrétne k jednej hodnote. Ak si však prejdeme toto pole cyklom, vieme sa pomocou indexu cyklu dostťa len k prvému rozmeru, čo bude premenná typu pole. Ako sa dostaneme k jej hodnotám? No predsa tak ako predtým, pole si predsa prechádzame cyklom. Takže jednoducho, v každom kroku cyklu si prejdeme hodnotu prvku – ďalšie pole – ďalším cyklom. Takže použijeme cyklus v cykle.
Nie je to prakticky nič nové, len je to možno trochu neprehľadné, ale nie je to nič ťažké. V každom kroku cyklu môžeme vykonať čo len chceme, takže cyklus môžeme použiť v cykle aj sto razy, nič nám v tom nebráni. Jediná dôležitá informácia je ale to, že samozrejme nemôžeme použiť ten istý názov premennej, pretože by sme si indexy prepísali. Budeme potrebovať dve rôzne premenné, jednu pre jeden cyklus (vonkajší) a druhú pre druhý cyklus (vnútorný). Poďme si to názorne ukázať, pomocou cyklu v cykle si vypíšeme obsah poľa dp tabuľky. Aby ste pochopili, ako to funguje, pred hodnotu prvku pridáme indexy, aby ste vedeli, kde sa nachádzame, resp. akým postupom sa cykly vykonávajú:
page1.php:
<?php
$person_1 = array('Raťafák', 'Plachta', 'plachtos@mail.sk','0903 123 123');
$person_2 = array('Od kuka', 'do kuka', 'kuko@mail.sk','0903 123 123');
$person_3 = array('Joey', 'Tribbiani', 'ako.sa.mas@mail.sk','0903 123 123');
$person_4 = array('Charlie', 'Harper', 'hooker@mail.sk','0903 123 123');
$person_5 = array('Chruno', 'Moysey', 'abstinent@mail.sk','0903 123 123');
$pole = array($person_1, $person_2, $person_3, $person_4, $person_5);
$pole[5] = array('Jardo', 'Jágr', 'legenda@mail.sk','0903 123 123');
echo '<table border="1">';
for($i=0; $i<count($pole); $i++){
echo '<tr>';
for($j=0; $j<count($pole[$i]); $j++){
echo '<td>'.$i.'-'.$j.' :'.$pole[$i][$j].'</td>';
}
echo '</tr>';
}
echo '</table>';
?>
Pozrite sa na kód, pred spustením cyklu si otvárame tag pre element tabuľky. Na začiatku máme zadefinovaný cyklus s indexom i, ktorý sa výkoná toľko krát, koľko prvkov obsahuje premenná s názvom pole. Toto číslo je zhodné s počtom riadkov našej tabuľky, pretože každý tento prvok obsahuje dáta nášho riadka. Čo potrebujeme vykonať v každom riadku? No musíme zadať tagy pre riadok (tr) a následne vypísať všetky hodnotu do buniek (td). Obsah premennej s prvým indexom (pole[$i]) – premenná typu array – si prechádzame druhým cyklom s indexom j. V každom kroku tohto poľa vypíšeme bunku tabuľky, do ktorej vpíšeme indexy našich cyklov a následne hodnotu prvku ($pole[$i][$j]) tak, ako sme to robili už dávnejšie.
Vo výsledku je pekne vidieť dáta v tabuľke. Systém je jednoduchý, index i je na začiatku na hodnote 0 a vykoná sa prvý krok cyklu. V ňom máme zadefinovaný ďalší cyklus, začína hodnotou indexu j na nule a vykoná sa v ňom iba výpis (echo). Takto prejdú všetky kroky tohto cyklu až kým sa neprejde jeho celý veľkosť (count($pole[$i]). Následne sa uzavrie riadok (/tr) a prvý cyklus sa posunie na index i s hodnotou 1 a takto až po koniec.
Keď už vieme dáta do tabuľky vypísať, poďme si ju naštýlovať. Predstavíme si teraz niekoľko vlasností a pravidiel, ktoré majú vplyv na vzhľad tabuľky. Doteraz sme používali atribút border (s hodnotou 1) na to, aby sme mali v tabuľke orámovanie. Tento atribút už nebudeme používať, ale budeme na to používať rovnomennú vlastnosť v jazyku CSS – border, podobne ako u iných elementoch. Táto vlastnosť sa zadáva osobitne pre prvok table (orámovanie okolo tabuľky), th (orámovanie okolo buniek v hlavičke) a td (orámovania okolo vnútorných buniek). Ak ste si všimli, pri používaní atribútu border v prvku table mala tabuľka akokeby dvojité orámovanie – medzi jednotlivým orámovaním (td, th, table) bola medzera. Toto zapríčiňuje vlastnosť border-collapse (zložené orámovanie), ktorej defaultná hodnota je separate (oddelené). Aby sme medzi orámovaním medzeru nemali, musíme zadať hodnotu collapse (zložené). Pri hodnote separate je možné nastaviť aj vlastnosť border-spacing (priestorovanie orámovania), kde môžeme zadať buď jedným číslom pre horizontálnu a vertikálnu vzdialenosť v pixeloch medzi orámovaním alebo dvomi osobitne pre horizontálnu vzdialenosť a pre vertikálnu.
Ďalšia užitočná vlastnosť pre tabuľku je vlastnosť table-layout (rozvhnutie tabuľky), ktoré ovplyvňuje šírku jednotlivých buniek (stĺpcov) tabuľky. Defaultná hodnota je auto (automaticky), kedy šírku stĺpcov nastaví prehliadač automaticky podľa najdlhšieho obsahu bunky (aby sa zobrazila najdlhšia hodnota – ak je to možné v jednom riadku). Praktickejšie a rýchlejšie je používať hodnotu fixed (fixná), kedy prehliadač nastaví šírku stĺpcov podľa šírky tabuľky a šírky stĺpcov, čiže ak je na to priestor, šírka stĺpcov bude rovnaká.
Tabuľka sama o sebe už nemá žiadne nateraz pre nás dôležité vlastnosti, ktoré by nejak zásadne ovplyvňovali jej výzor. Ostatok je už len na kreativite a nápaditosti programátora, ako v podstate celý design a CSS. Je vo zvyku napríklad farebne odlíšiť hlavičku (pozadie a farba textu iná) od zbytku tabuľky, veľmi často sa zvykne používať orámovanie, aby sa dáta (údaje) nezlievali dokopy, ale aby boli kus výzorovo oddelené od seba. Dôležité ja nastaviť rozmer tabuľky, či sa má roztihanuť na celú dostupnú šírku (width 100%) alebo má zaberať len istú šírku (zadaná width). Podobne je možné nastaviť napríklad aj výšku buniek v hlavičke (th) alebo aj v tabuľke (td), zarovnanie textu v bunkách horizontálne (text-alignment) alebo aj vertikálne – vertical-alignment. Alebo nastaviť padding v bunkách alebo aj zmenu farby na hover ponad bunky a pod.
Veľmi časté a pre používateľa vhodné je mať dve rôzne farby pre riadky, čiže aby sa striedali dve farby. Toto sa dá zadefinovať pomocou špeciálneho selectora nth-child(), ktorý sa cez dvojbodku pridáva k elementu tr. Jeho parametrom je hodnota even (párny) alebo odd (nepárny) pre príslušné poradové číslo riadka. Na našu tabuľku so zoznamom mien si aplikujeme takmer všetky tieto možnosti:
index1.php:
echo '<table class="persons">';
echo '<tr>';
echo '<th>Meno</th>';
echo '<th>Priezvisko</th>';
echo '<th>Email</th>';
echo '<th>Telefónne číslo</th>';
echo '</tr>';
for($i=0; $i<count($pole); $i++){
echo '<tr>';
for($j=0; $j<count($pole[$i]); $j++){
echo '<td>'.$pole[$i][$j].'</td>';
}
echo '</tr>';
}
echo '</table>';
global.css (len pridané zmeny):
/**********PERSONS***********/
.persons{
width: 100%;
table-layout: fixed;
font-family: Arial;
}
.persons, .persons TH, .persons TD{
border: 1px solid #D9E4E6;
}
.persons TH, .persons TD{
padding: 15px;
}
.persons TH{
background-color: #167F92;
color: #FFFFFF;
font-weight: normal;
text-transform: uppercase;
}
.persons TR:nth-child(odd){
background-color: #D9E4E6;
}
.persons TR{
color: #024457;
background-color: #FFFFFF;
}
.persons TD{
font-size: 14px;
}
.persons TR:HOVER{
color: #f5f7f4;
background-color: #f96b81;
cursor: pointer;
}
Pre element table sme zrušili atribút border. V súbore global.css sme najskôr zadali štýl pre tabuľku - šírku, font a layout. Ako vidíte, tým že sme zadali layout fixed, šírka stĺpcov je rovnaká, skúste si vyskúšať druhú hodnotu, čo to spraví so vzhľadom tabuľky. Následne sme zadali orámovanie (pre všetky prvky tabuľky – skúste si nejaký prvok odstrániť a uvidíte, že nebude mať orámovanie a ako to bude vyzerať) a vnútorný okraj pre bunky. Potom sme naštýlovali bunky hlavičky (th) – štýl písma a pozadie. Ďalej sme naštýlovali riadky tabuľky s tým, že pre nepárny riadok (nepárne poradové číslo – jednoducho každý druhý) sme zadali inú farby pomocou špecálneho selectora nth-child. Na konci sme zadali štýl pre celý riadok pre prípad hover, čiže keď sa myšou zobrazíme ponad nejaký riadok. Toto sa často využíva v prípade, že sa dá na niečo v riadku kliknúť alebo len pre lepšiu prehľadnosť pri čítaní, ak má tabuľka príliš veľa stĺpcov. Skúste si zadať aj vlastnosť border-collapse, aby ste videli, ako sa to prejaví. Aby sme to mali kompletné, premenujte si tento súbor a aj odkazy a texty naň z page1.php na O nás (o-nas.php...).