Tablica je bitna komponenta u HTML-u za prikaz podataka u strukturiranom formatu s redovima i stupcima. U HTML-u se tablice izrađuju pomoću oznaka <table>, <tr> i <td>.
Oznaka <table> predstavlja glavni spremnik tablice koji sadrži sve retke i stupce. Redovi su definirani oznakom <tr>(redak tablice), dok su ćelije unutar redaka definirane oznakom <td>(podaci tablice). Osim toga, možete koristiti oznaku <th>(zaglavlje tablice) za definiranje ćelija zaglavlja za tablicu.
Možete koristiti atribute kao što su colspan i rowspan za spajanje ćelija u tablici ili raspoređivanje ćelija u više redaka i stupaca. Nadalje, možete primijeniti CSS svojstva za prilagodbu izgleda i rasporeda tablice.
Tablica( <table>)
- <table> Element se koristi za izradu tablice u HTML-u.
- Podaci se postavljaju u retke( <tr>) i stupce( <td> ili <th>).
- Svaka podatkovna ćelija smještena je unutar <td>(podatkovna ćelija) ili <th>(ćelija zaglavlja) elemenata.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Zaglavlje stupca( <th>)
- <th> Element se koristi za stvaranje zaglavlja stupaca u tablici.
- Obično se nalazi u prvom redu tablice.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Redovi podataka( <tr>):
- <tr> Element se koristi za kreiranje redova podataka u tablici.
- Podatkovne ćelije( <td>) ili ćelije zaglavlja( <th>) smještene su unutar ovih <tr> elemenata.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Raspon stupaca( colspan)
Atribut colspan se koristi za određivanje broja stupaca koje će podatkovna ćelija ili ćelija zaglavlja obuhvatiti u tablici.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Raspon redaka( rowspan)
Atribut rowspan se koristi za određivanje broja redaka koje će podatkovna ćelija ili ćelija zaglavlja obuhvatiti u tablici.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Spajanje ćelija( colspan i rowspan)
Možete kombinirati oba colspan atributa i rowspan za spajanje ćelija u tablici.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border vlasništvo
- border Svojstvo određuje debljinu ruba tablice.
- Vrijednost border je nenegativan cijeli broj.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding vlasništvo
-, cellpadding Svojstvo određuje udaljenost između sadržaja ćelije i granice ćelije u tablici.
- Vrijednost cellpadding je nenegativan cijeli broj
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing vlasništvo
- cellspacing Svojstvo određuje razmak između ćelija u tablici.
- Vrijednost cellspacing je nenegativan cijeli broj.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Ovi atributi i elementi omogućuju vam stvaranje i prilagodbu tablica u HTML-u prema vašim potrebama. Možete ih koristiti za prikaz podataka na jasan i organiziran način na vašoj web stranici.