HTML tabele se koriste za organizaciju i prikaz podataka u obliku redova i kolona na web stranici. Tabele su često korisne kada želite predstaviti podatke u urednom i preglednom formatu, kao što su rasporedi, popisi proizvoda, raspored događanja i slični sadržaji.
Osnovna struktura HTML tabele:
<table>: Oznaka koja definiše početak i kraj tabele.
<tr>: Oznaka koja definiše red u tabeli.
<th>: Oznaka koja definiše zaglavlje tabele (naslove kolona).
<td>: Oznaka koja definiše ćeliju u tabeli (podatke).
Primer HTML tabele:
<table>
<tr>
<th>Ime</th>
<th>Prezime</th>
<th>Godine</th>
</tr>
<tr>
<td>Marko</td>
<td>Petrović</td>
<td>30</td>
</tr>
<tr>
<td>Jovana</td>
<td>Jovanović</td>
<td>25</td>
</tr>
</table>
Ovaj primer kreira tabelu sa tri kolone (Ime, Prezime, Godine) i dva reda podataka. Prvi red definiše zaglavlje tabele pomoću <th> oznaka, dok drugi i treći red sadrže stvarne podatke koristeći <td> oznake.
Kako definisati atribute i stilizaciju tabela:
- Border: Možete definisati širinu i stil obruč za tabelu ili ćelije koristeći
border atribut.
- Width (Širina): Definišite širinu tabele koristeći
width atribut.
- Header (Zaglavlje): Koristite <th> oznake za definisanje zaglavlja tabele.
- Padding (Razmak): Dodajte razmak unutar ćelija koristeći CSS stilizaciju sa
padding svojstvom.
- Spacing (Rastojanje): Postavite rastojanje između ćelija koristeći
cellspacing atribut za tabelu.
- Colspan (Spajanje kolona): Spojite više kolona u jednu koristeći
colspan atribut u <td> oznakama.
- Rowspan (Spajanje redova): Spojite više redova u jedan koristeći
rowspan atribut u <td> oznakama.
- Colgroup (Grupa kolona): Koristite
colgroup element za grupisanje kolona i primenu zajedničkih atributa na celu grupu kolona.
Podešavanje Border-a na Tabeli
Da biste postavili granicu (border) na tabeli u HTML-u, možete koristiti atribut border u tabeli ili CSS stilizaciju:
<!DOCTYPE html>
<html>
<head>
<title>Podešavanje Border-a na Tabeli</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<h1>Podešavanje Border-a na Tabeli</h1>
<p>Da biste postavili granicu (border) na tabeli u HTML-u, možete koristiti atribut <code>border</code> u tabeli ili CSS stilizaciju.</p>
<h2>Pomoću atributa border:</h2>
<table border="1">
<tr>
<th>Ime</th>
<th>Prezime</th>
<th>Godine</th>
</tr>
<tr>
<td>Marko</td>
<td>Petrović</td>
<td>30</td>
</tr>
<tr>
<td>Jovana</td>
<td>Jovanović</td>
<td>25</td>
</tr>
</table>
<h2>Pomoću CSS stilizacije:</h2>
<table>
<tr>
<th>Ime</th>
<th>Prezime</th>
<th>Godine</th>
</tr>
<tr>
<td>Marko</td>
<td>Petrović</td>
<td>30</td>
</tr>
<tr>
<td>Jovana</td>
<td>Jovanović</td>
<td>25</td>
</tr>
</table>
Da biste postavili granicu (border) koristeći CSS, koristite stilizaciju <code>border</code> i
Evo svih primera:
Border (Obrub): Možete definisati širinu i stil obruba za tabelu ili ćelije koristeći border atribut. Na primer, border="1" će postaviti tanak obrub oko svih ćelija.
<table border="1">
<!-- Sadržaj tabele -->
</table>
Width (Širina): Definišite širinu tabele koristeći width atribut.
<table width="100%">
<!-- Sadržaj tabele -->
</table>
Header (Zaglavlje): Možete koristiti <th> oznake za definisanje zaglavlja tabele. Zaglavlje će biti boldirano i centralizovano po podrazumevanim postavkama.
<table>
<tr>
<th>Ime</th>
<th>Prezime</th>
<th>Godine</th>
</tr>
<!-- Ostatak tabele -->
</table>
Padding (Razmak): Možete dodati razmak unutar ćelija koristeći CSS stilizaciju sa padding svojstvom. Na primer, style="padding: 10px;" će dodati 10 piksela razmaka unutar ćelija.
<table>
<tr>
<td style="padding: 10px;">Podatak 1</td>
<td style="padding: 10px;">Podatak 2</td>
</tr>
<!-- Ostatak tabele -->
</table>
Spacing (Rastojanje): Rastojanje između ćelija možete postaviti koristeći cellspacing atribut za tabelu
<table cellspacing="10">
<!-- Sadržaj tabele -->
</table>
Colspan (Spajanje kolona): Možete spojiti više kolona u jednu koristeći colspan atribut u <td> oznakama. Na primer, colspan="2" će spojiti dve kolone u jednu.
<table>
<tr>
<td>Podatak 1</td>
<td colspan="2">Spajam dve kolone</td>
</tr>
<!-- Ostatak tabele -->
</table>
Rowspan (Spajanje redova): Slično kao za colspan, možete spojiti više redova u jedan koristeći rowspan atribut u <td> oznakama. Na primer, rowspan="3" će spojiti tri reda u jedan.
<table>
<tr>
<td rowspan="3">Spajam tri reda</td>
<td>Podatak 1</td>
</tr>
<tr>
<td>Podatak 2</td>
</tr>
<tr>
<td>Podatak 3</td>
</tr>
</table>
Colgroup (Grupa kolona): colgroup element omogućava grupisanje kolona i primenu zajedničkih atributa na celu grupu kolona. Ovo se obično koristi za postavljanje zajedničkog stila za određene kolone.
<table>
<colgroup>
<col style="background-color: #f2f2f2;">
<col>
</colgroup>
<tr>
<th>Ime</th>
<th>Prezime</th>
</tr>
<!-- Ostatak tabele -->
</table>
Ovo su osnovni atributi i tehnike za rad sa tabelama u HTML-u. Možete kombinovati ove tehnike kako biste postigli željeni dizajn i stil za vaše tabele.