Html tablice (engl. table) se sastoje od redaka (engl. rows) i stupaca (engl. columns). Slične su tablicama (engl. tables) i upitima (engl. queries) u relacijskim bazama podataka, te ih možemo koristiti za njihov prikaz na web stranici.
Html tablicu počinjemo <table> elementom. Za umetanje novog retka u tablicu koristimo <tr> (engl. table row) element. Za naslovnu ćeliju koristimo <th> (engl. table header) element. Podatke umećemo unutar <td> (engl. table data) elementa. <th> i <td> elementi se moraju nalaziti unutar <tr> elementa.
Tekst naslovne ćelije tablice <th> je zadano podebljan i poravnat po sredini. Sadržaj ćelije <td> je zadano poravnat lijevo.
Primjer tablice u kojoj smo umetnuli naslove u prvi redak, a podatke u drugi i treći redak:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Jednostavna tablica</title>
<style>
table {
border: 1px solid red;
}
th, td {
width: 200px;
padding: 10px;
border: 1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Tvrtka</th>
<th>Kontakt</th>
<th>Država</th>
</tr>
<tr>
<td>Bartol plus</td>
<td>Mihovil Horvat</td>
<td>Hrvatska</td>
</tr>
<tr>
<td>Bartol</td>
<td>Bosanska Posavina</td>
<td>Bosna i Hercegovina</td>
</tr>
</table>
</body>
</html>Kako bi tablicu vizualno oblikovali, koristimo css. Budući da ne koristimo odvojenu css datoteku sa stilovima, css oblikovanja smo smjestili u <style> element, kojeg treba umetnuti unutar <head> elementa.
Za dodavanje širine stupaca, odmaka (engl. padding) i obruba, koristili smo slijedeća css oblikovanja:
<style>
table {
border: 1px solid red;
}
th, td {
width: 200px;
padding: 10px;
border: 1px solid blue;
}
</style>Opis djelovanja css selektora, css svojstva i njihovih vrijednosti nije obuhvaćen ovim tečajem. Više o tome možete saznati u online tečaju koji možete otvoriti na donjoj poveznici.
Naslov tablice umećemo pomoću <caption> elementa. Naslov tablice moramo umetnuti neposredno nakon <table> elementa. Zadano je poravnat po sredini i nalazi se iznad tablice. Vodoravno poravnanje i položaj naslova možemo promijeniti pomoću css svojstava text-align i caption-side.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Tablica s naslovom</title>
<style>
table {
border: 1px solid red;
}
th, td {
width: 200px;
padding: 10px;
border: 1px solid blue;
}
</style>
</head>
<body>
<table>
<caption>Mjesečni troškovi</caption>
<tr>
<th>Mjesec</th>
<th>Troškovi</th>
<th>Zarada</th>
</tr>
<tr>
<td>Siječanj</td>
<td>200€</td>
<td>300€</td>
</tr>
<tr>
<td>Veljača</td>
<td>100€</td>
<td>150€</td>
</tr>
</table>
</body>
</html><colgroup> element omogućava označavanje jednog ili više stupaca u tablici. Umećemo ga radi oblikovanja cijelog stupca, umjesto ponavljanja stila oblikovanja pojedinačno za svaku ćeliju. Mora biti umetnut kao dijete <table> elementa, iza <caption> elementa, a prije <thead>, <tbody>, <tfoot> i <tr> elemenata.
Želimo li postaviti različita svojstva pojedinih stupaca, stavljamo <col> elemente unutar <colgroup> elementa.
Kada želimo zajedno oblikovati svojstva više susjednih stupaca pomoću jednog <col> elementa, koristimo svojstvo span. Dodjeljujemo mu vrijednost broja stupaca koje želimo zajedno oblikovati.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Oblikovana tablica</title>
<style>
table {
border: 1px solid red;
}
th, td {
width: 200px;
padding: 10px;
border: 1px solid blue;
}
</style>
</head>
<body>
<table>
<colgroup>
<col style="background-color: aqua;">
<col span="2" style="background-color: yellow;">
</colgroup>
<tr>
<th>Mjesec</th>
<th>Troškovi</th>
<th>Zarada</th>
</tr>
<tr>
<td>Siječanj</td>
<td>200€</td>
<td>300€</td>
</tr>
<tr>
<td>Veljača</td>
<td>100€</td>
<td>150€</td>
</tr>
</table>
</body>
</html>U tablici možemo (ali ne moramo) imati - kao i u većini web sjedišta - tri glavna dijela: zaglavlje (engl. header), sadržaj i podnožje (engl. footer).
Najprije umećemo <thead> element. Nakon njega slijedi <tbody> element. Na kraju se može nalaziti <tfoot> element.
Web preglednik može koristiti ove elemente, kako bi pomicao sadržaj tablice (koji se nalazi u <tbody> elementu) gore dolje, neovisno o zaglavlju i podnožju, koji mogu mirovati. Također, kod ispisa velikih tablica, koje se protežu na više stranica, ovi elementi omogućavaju ispis zaglavlja i podnožja na vrhu i dnu svake stranice (potrebno je programsko rješenje koje to omogućava).
Unutar <thead> elementa moramo staviti barem jedan <tr> element. <thead> element mora biti dijete (engl. child) <table> elementa, poslije <caption> i <colgroup> elemenata, a prije <tbody> i <tfoot> elemenata.
<thead>, <tbody> i <tfoot> elementi ne utječu na izgled html tablice, no oni nam omogućavaju njihovo oblikovanje pomoću css stilova.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Tablica u dijelovima</title>
<style>
table {
border: 1px solid red;
}
th, td {
width: 200px;
padding: 10px;
border: 1px solid blue;
}
thead {
color: white;
background-color: olive;
}
tfoot {
color: white;
background-color: firebrick;
}
</style>
</head>
<body>
<table>
<caption>Tablica u dijelovima</caption>
<colgroup>
<col style="background-color:yellow;">
<col span="2" style="background-color:green;">
</colgroup>
<thead>
<tr>
<th>Mjesec</th>
<th>Troškovi</th>
<th>Zarada</th>
</tr>
</thead>
<tbody>
<tr>
<td>Siječanj</td>
<td>200€</td>
<td>300€</td>
</tr>
<tr>
<td>Veljača</td>
<td>100€</td>
<td>150€</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Ukupno</th>
<th>300€</th>
<th>450€</th>
</tr>
</tfoot>
</table>
</body>
</html>Unutar html tablica možemo povezati dvije ili više susjednih ćelija. Za povezivanje susjednih ćelija stupaca tablice, koristimo svojstvo html elementa colspan - koji omogućava vodoravno povezivanje. Za povezivanje susjednih ćelija redaka tablice, koristimo svojstvo html elementa rowspan - koji omogućava okomito povezivanje.
Ova svojstva možemo dodati <th> ili <td> elementima. Svojstvima colspan i rowspan dodjeljujemo kao vrijednost, broj susjednih ćelija koje želimo povezati.
Slika 1
Pogledajte primjer na slici 1. U prvom retku su tri ćelije. Prva i posljednja se protežu kroz dva retka, a druga se proteže kroz tri stupca. Tako možemo izračunati kako je u prvom retku pet stupaca.
U drugom retku je već popunjen prvi i posljednji stupac s povezanim ćelija iz prethodnog retka, dakle za popunjavanje su nam potrebna još tri stupca. Prva ćelija nema proširenja, dakle proteže se kroz samo jedan stupac. Druga ćelija se proteže kroz dva stupca. Ukupno pet stupaca - tri plus dva stupca.
No što se događa kada umetnemo tablicu sa samo dva retka kao na slici. Ćelija drugog retka koja se proteže kroz dva stupca biva prikazana s istom širinom kao i ćelija koja se proteže kroz jedan redak. Zato koristimo sljedeći trik:
<tr style="visibility: hidden;">Na kraju tablice umećemo dodatni redak <tr>, zajedno s pet ćelija, za pet stupaca. Toliko koliko ih želimo imati u prethodnim redcima. Pomoću css svojstva visibility: hidden; taj redak skrivamo. No iako skriven, on nam omogućava ispravan prikaz ćelije u drugom retku koja se proteže kroz dva stupca! Probajte izbaciti ovaj redak iz kôda i vidjet ćete što će se dogoditi!
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Povezivanje ćelija</title>
<style>
body {
background-color: ivory;
}
td {
font-size: 30px;
padding: 80px;
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="2">1x2</td>
<td colspan="3">3x1</td>
<td rowspan="2">1x2</td>
</tr>
<tr>
<td>1x1</td>
<td colspan="2">2x1</td>
</tr>
<tr style="visibility: hidden;">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>Slijedi još jedan primjer povezivanja stupaca i redaka. U njemu nije potrebito dodavati nevidljivi redak na kraju, iz razloga što smo već u prvom retku umetnuli ćelije sva tri stupca.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Povezivanje stupaca i redaka</title>
<style>
table {
border: 1px solid red;
}
th, td {
width: 200px;
padding: 10px;
border: 1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>Ime</th>
<th>Predmet</th>
<th>Ocjena</th>
</tr>
<tr>
<td rowspan="2">Ivona</td>
<td>Napredni web</td>
<td>5</td>
</tr>
<tr>
<td>Baze podataka</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">Petra</td>
<td>Napredni web</td>
<td>4</td>
</tr>
<tr>
<td>Baze podataka</td>
<td>5</td>
</tr>
<tr>
<th colspan="3">Prosječna ocjena: 4.5</th>
</tr>
</table>
</body>
</html>CDN pohrana slika i videa.
AI povećanje slika.
Pretvorba formata slika: webp...
25Gb podataka.
Zašto ne sada?
