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.
| Ime | Prezime | Broj mobitela |
|---|---|---|
| Bruce | Wayn | 066 - 656 - 224 |
| John | Doe | 066 - 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:
| Ime | Prezime | Broj mobitela |
|---|---|---|
| Bruce | Wayn | 066 - 656 - 224 |
| John | Doe | 066 - 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.
| Ime | Prezime | Broj mobitela |
|---|---|---|
| Bruce | Wayn | 066 - 656 - 224 |
| John | Doe | 066 - 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 ...).
| Ime | Prezime | Broj mobitela |
|---|---|---|
| Bruce | Wayn | 066 - 656 - 224 |
| John | Doe | 066 - 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.
| Ime | Prezime | Broj mobitela |
|---|---|---|
| Bruce | Wayn | 066 - 656 - 224 |
| John | Doe | 066 - 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.
| Ime | Prezime | Broj mobitela |
|---|---|---|
| Bruce | Wayn | 066 - 656 - 224 |
| John | Doe | 066 - 333 - 222 |
td {
vertical-align: bottom;
height: 40px;
}
Padding tabele
Kako bi odredili udaljenost između teksta i granica tabele koristimo standardni parametar padding.
| Ime | Prezime | Broj mobitela |
|---|---|---|
| Bruce | Wayn | 066 - 656 - 224 |
| John | Doe | 066 - 333 - 222 |
th, td {
padding: 20px;
}