NEDSCHOOLDEV

view_headline menu
yt yt yt

CSS

CSS CSS Uvod CSS Upotreba CSS Boje CSS Pozadine CSS Borders CSS Margine CSS Padding CSS Height/Width CSS Float CSS Tekst CSS Font CSS Poravnanje CSS Linkovi CSS Liste CSS Tabele CSS Ikone








CSS Tabele

<< >>



Šta CSS može sa Tabelama?


U lekcijama HTML-a smo već naučili kako kreirati tabele, ali pomoću CSS-a možemo ići i korak dalje.

CSS omogućuje da tabele dobiju novi izgled, funkcionalnost, prilagodljivost i još mnogo toga.



Granice tabele - Table Borders


Da bi odredili granice tabele, korisitmo parametar border.

Parametar border se može postaviti za sve elemente tabele (table, th i td).


wb_incandescent

Elemente (table, th i td) vidi u lekciji HTML Tabele.


U primjeru ispod, svim elentima tabele smo dodijelili granice debljine 1px, crne boje.

ImePrezimeBroj mobitela
BruceWayn066 - 656 - 224
JohnDoe066 - 333 - 222

table, th, td {
     border: 1px solid #000;
}


info

Ukoliko više različitih elemenata imaju iste parametre, u CSS-u možemo navoditi elemente jedan iza drugog, tako da ih odvojimo zarezom (table, th, td), kako bi uštedili na prostoru.




Border Collapse


Primjetili ste da u primjeru iznad tabela ima duple granice. To je zato što svi elementi imaju svoje zasebne granice.

Parametar border-collapse omogućava da se duple granice pretvore u jednu normalnu granicu.


Primjer:

ImePrezimeBroj mobitela
BruceWayn066 - 656 - 224
JohnDoe066 - 333 - 222

table {
     border-collapse: collapse;
}

table, th, td {
     border: 1px solid #000;
}


Ako želite da tabela ima samo vanjske granice, onda parametar border dodijelite samo table elementu.


ImePrezimeBroj mobitela
BruceWayn066 - 656 - 224
JohnDoe066 - 333 - 222

table {
     border: 1px solid #000;
}



Visina i širina tabele


Visina i širina tabele se određuje pomoću standardnih parametara height i width.

Pomoću ovih parametara možemo odrediti visinu i širinu bilo kojeg elementa u tabeli (table, th, td ...).


ImePrezimeBroj mobitela
BruceWayn066 - 656 - 224
JohnDoe066 - 333 - 222

table {
     width: 100%;
}

th {
     width: 33%;
     height: 50px;
}

td {
     width: 33%;
     height: 30px;
}



Horizontalno poravnanje


Horizontalno poravnanje teksta se definira standardnim parametrom text-align, za th i td ćelije.

Po default-u tekst u th elementu je centriran, a tekst u td elemntu je lijevo poravnat.


u primjeru ispod smo naslovni tekst th, poravnali sa lijeve strane.

ImePrezimeBroj mobitela
BruceWayn066 - 656 - 224
JohnDoe066 - 333 - 222

th {
     text-align: left;
}



Vertikalno poravnanje


Vertikalno poravnanje teksta se definira parametrom vertical-align, za th i td ćelije.

Po default-u, vertikalno poravnanje teksta za sve elemente u tabeli je sredina (middle).

vertikalno poravnanje može biti gore dolje ili sredina (top, bottom, middle)


u primjeru ispod smo postavili vertikalno poravnanje teksta dolje (bottom), za sve td elemente.

ImePrezimeBroj mobitela
BruceWayn066 - 656 - 224
JohnDoe066 - 333 - 222

td {
     vertical-align: bottom;
     height: 40px;
}



Padding tabele


Kako bi odredili udaljenost između teksta i granica tabele koristimo standardni parametar padding.

ImePrezimeBroj mobitela
BruceWayn066 - 656 - 224
JohnDoe066 - 333 - 222

th, td {
     padding: 20px;
}





<< >>



© Copyright 2018. nedschool.com