CSS DISPLAY i tabele

Atribut DISPLAY ima i, nazovimo, tabelarne vrednosti pomoću kojih mogu da se kreiraju pod znacima navoda tabele, prvenstveno namenjene dizajniranju internet strana. Spisak tih vrednosti sledi:

table - vrednost u display atributu koja je analogija <table> HTML tagu
table-row - vrednost u display atributu koja je analogija <tr> HTML tagu
table-cell - vrednost u display atributu koja je analogija <td> HTML tagu
table-row-group - trebalo bi da bude nešto kao analogija figurativno tbody za tabelu kao body u html kodu
table-header-group - analogno kao nekom, nazovimo figurativno, thead za te CSS tabele, a kao analogija head tagu u HTML kodu
table-footer-group - trebalo bi da se definiše kao podnožje tabele (čitaj podnožje internet strane)
table-caption - kao neki deo za naslov tabele. Zapravo tačnije za internet stranice, jer u stvari mi sad pravimo alat za lakše dizajniranje stranica.
table-column - vrednost koja bi trebala (ako zatreba) da definiše pojedinu kolonu (primećujete da tako nešto nije postojalo u HTML tabelama).
table-column-group - vrednost koja bi trebala ako zatreba da definiše čitave grupe kolona (takodje nije postojalo u HTML tabelama).

Ako uzmemo neke od gornjih vrednosti sa njihovim značenjem ajde da napravimo tu CSS tabelu sa, na primer, tri ćelije:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <style type="text/css"> .kontejner {display: inline-table;} .redovi {display: table-row;} .celije { display: table-cell; width: 100px; height: 20px; border: 1px solid blue; padding: 3px; } </style></head><body> <div class="kontejner"> <div class="redovi"> <div class="celije">CELIJA A</div> <div class="celije">CELIJA B</div> <div class="celije">CELIJA C</div> </div> </div> </body></html>

CELIJA A

CELIJA B

CELIJA C

Samo napomena da trebate kao rezultat videti ćelije koje su rasporedjene ne jedna ispod druge nego jedan pored druge horizontalno. Svi oni koji vide ćelije jednu ispod druge njihovi brauzeri ne podržavaju CSS tabele. Jer i bez ikakvih display atributa prave se ćelije jedna ispod druge. Poenta je napraviti ih tabelarnim vrednostima jednu pored druge. Nastavimo sad dalje.

Medjutim obzirom da smo sada na terenu CSS-a, komotno će raditi potpuno isto i sledeći kod:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <style type="text/css"> .celije { display: table-cell; width: 100px; height: 20px; border: 1px solid blue; padding: 3px; } </style></head><body> <div class="celije">CELIJA A</div> <div class="celije">CELIJA B</div> <div class="celije">CELIJA C</div> </body></html>

CELIJA A

CELIJA B

CELIJA C

Ovakva CSS tabela koja ima samo ćelije naziva se anonimna tabela. Ovde smo izbacili klase sa atributima display: inline-table i display: table-row da bi demonstrirali kako se u CSS mogu kreirati fleksibilnije tabele. Naravno takve anonimne tabele imaju svoju primenu , ali takodje i atribute koje smo izostavili imaju svoju logiku i primenu. Na primer u klasu koju smo nazvali kontejner možemo ubacivati atribute koji su opšti za celu jednu tabelu, pa kasnije kad hoćemo nešto menjati, menjamo samo kontejner, itd. Takodje i svi ostale vrdnosti tabelarne koje smo nabrojali za atribut display itekako imaju svoju primenu.

Za sada će mo ovde stati sa teorijom u vezi CSS tabela iz prostog razloga što ih jako malo brauzera podržava. A i oni koji podržavaju većina ima bagova.

Evo spisak brauzera sa njihovim verzijama od kojih su počeli da podržavaju CSS tabele: firefox 2, opera 9.62, internet explorer 8.x, safari 4.0b, chrome 2, konqueror 3. Svi ispod tih verzija ne podržavaju.