Fotohans blog

Pruhovaná tabulka

Jistě se často setkáváte na různých stránkách s rozsáhlými tabulkami, nebo je sami na svých stránkách potřebujete zobrazit. Pokud má taková tabulka více sloupců bývá problém ji zobrazit tak, aby vypadala úhledně a přitom aby oko při prohlížení udrželo linii řádku. Různé rámování buněk či řádků bývá při větších rozměrech tabulky neúčinné a oko se nemá čeho chytnout. Elegantním a jednoduchým řešením je střídání různě barevných řádků kdy i při větší šířce tabulky nebývá problém s čitelností.

Nebudu zde ukazovat jak vypadá zobrazená tabulka bez použití stylů neboť to předpokládám všichni znáte ze svých pokusů. Za druhé zde již jsou přednastaveny nějaké styly pro tyto stránky a za třetí pokud máte na svých stránkách nějaké stylování tabulek stejně by to vypadalo jinak. Ukažme si, jaké styly budeme nově definovat a navrhnu nějaké rady pro úpravu vzhledu vašich tabulek. Nejdříve si tedy do CSS přidáme dva nové styly pro střídání obarvení řádků tabulky. Pokud již máte tabulku kolorovanou do určitého odstínu nepouštějte se do přílišných barevných šíleností. Stačí jen druhý řádek o trochu zesvětlit či ztmavit ať vaše tabulky nevypadají jak papoušek.

CSS:

.color1 {background-color:#DDDDDD;}
.color2 {background-color:#F5F5F5;}

Předpokládejme, že vypisujete data třeba z databáze nebo i ze souboru nějakým cyklem. Stanovíme si pomocnou proměnnou $xx do které budeme načítat průchody cyklem (čísla řádků). Poté využijeme funkci vracející zbytek z celočíselného dělení $xx % 2 . Při dělení 2 nám tato funkce vždy vrátí 0 nebo 1 (tyto vrácené hodnoty vlastně představují matematické vyjádření logických hodnot true a false). Pomocí nich můžeme jednoduše rozlišit sudý a lichý řádek.

Jako příklad použijeme imaginární diskuzi pod nějakým článkem (s touto diskuzí budeme pracovat ještě i v dalších článcích). Vlastní kód výpisu tedy bude vypadat takto (pro přehlednost je velmi zjednodušen a není zde provedeno ošetření výstupu dat z databáze funkcemi stripslashes() a htmlspecialchars().

PHP+HTML

.
// nějakým dotazem získáme tabulková data z databáze
$result=mysql_query("select * from tabulka order by idstring");
echo '
<table cellspacing="2">
<thead><tr>
<td>Pořadí</td>
<td width="100">Jméno</td>
<td width="120" >Datum</td>
</tr>
</thead>';

// nastavení proměnné xx pro číslo řádku
$xx=0;
// v cyklu vypisujeme jednotlivé řádky
while ($row=mysql_fetch_array($result)):
  // přiřazení barvy (stylu) dle sudého a lichého řádku
  if ($xx % 2):
    $color='color1';
  else:
    $color='color2';
  endif;
  echo '
  // přiřazení stylu k celému řádku tabulky
  <tr class="'.$color.'">
  <td>'.$row["title"].'</td>
  <td class="central">'.$row["author"].'</td>
  <td>'.date("d-m-Y - H:i:s",strtotime($row["date"])).'</td>
  </tr>';
  // přičtení 1 do čítače řádků
  $xx++;
endwhile;
echo '</table>';

A zde je konečný výsledek - „Pruhovaná tabulka“. Pokud by se vám nelíbila mezera mezi sloupci nastavte u tagu <table>parametr cellspacing na 0.

No pro začátek to nebylo nic tak úžasného že, ale tešte se. Příště si řekneme pár triků jak udělat přehlednou diskuzi s odsazováním jednotlivých reakcí ve vláknech.

Související články:

• Diskuze pod článkem - 3.díl - tříděná uživatelem ( http://blog.fotohans.net/diskuze-pod-clankem-tridena-uzivatelem.html )
• Diskuze pod článkem - 2.díl - dle vlákna ( http://blog.fotohans.net/diskuze-pod-clankem-dle-vlakna.html )
• Diskuze pod článkem - 1.díl - dle příspěvků ( http://blog.fotohans.net/diskuze-pod-clankem-dle-prispevku.html )