Taulukko on olennainen komponentti HTML:ssä tietojen näyttämiseksi jäsennellyssä muodossa, jossa on rivejä ja sarakkeita. HTML:ssä taulukot luodaan käyttämällä <table>-, <tr>- ja <td>-tageja.
Tunniste <table> edustaa taulukon pääsäiliötä, joka sisältää kaikki rivit ja sarakkeet. Rivit määritellään <tr>(taulukkorivi) -tunnisteen avulla, kun taas rivien sisällä olevat solut määritetään <td>(taulukon tiedot) -tunnisteen avulla. Lisäksi voit käyttää <th>(taulukon otsikko) -tunnistetta määrittääksesi taulukon otsikkosolut.
Voit käyttää attribuutteja, kuten colspan ja riviväli, yhdistääksesi taulukon soluja tai span soluja useille riveille ja sarakkeille. Lisäksi voit käyttää CSS-ominaisuuksia mukauttaaksesi taulukon ulkoasua ja asettelua.
Taulukko( <table>)
- <table> Elementillä luodaan taulukko HTML-kielellä.
- Tiedot sijoitetaan riveihin( <tr>) ja sarakkeisiin( <td> tai <th>).
- Jokainen tietosolu sijoitetaan <td>(tietosolu) tai <th>(otsikkosolu) elementtien sisään.
<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>
Sarakkeen otsikko( <th>)
- <th> Elementillä luodaan sarakeotsikot taulukkoon.
- Tyypillisesti sijoitettu taulukon ensimmäiselle riville.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Tietorivit( <tr>):
- <tr> Elementillä luodaan tietorivejä taulukkoon.
- Tietosolut( <td>) tai otsikkosolut( <th>) sijoitetaan näihin <tr> elementteihin.
<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>
Sarakkeen kattavuus( colspan)
Attribuuttia colspan käytetään määrittämään sarakkeiden lukumäärä, jonka tietosolu tai otsikkosolu kattaa taulukossa.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Riviväli( rowspan)
Attribuuttia rowspan käytetään määrittämään rivien lukumäärä, jonka tietosolu tai otsikkosolu kattaa taulukossa.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Solujen yhdistäminen( colspan ja rowspan)
Voit yhdistää sekä attribuutit colspan että rowspan solut taulukossa.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border omaisuutta
- border Ominaisuus määrittää taulukon reunuksen paksuuden.
- Arvo border on ei-negatiivinen kokonaisluku.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding omaisuutta
-, cellpadding Ominaisuus määrittää solun sisällön ja solun reunan välisen etäisyyden taulukossa.
- Arvo cellpadding on ei-negatiivinen kokonaisluku
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing omaisuutta
- cellspacing Ominaisuus määrittää taulukon solujen välisen välin.
- Arvo cellspacing on ei-negatiivinen kokonaisluku.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Näiden attribuuttien ja elementtien avulla voit luoda ja mukauttaa taulukoita HTML-muodossa tarpeidesi mukaan. Voit käyttää niitä näyttämään tietoja selkeästi ja järjestelmällisesti verkkosivustollasi.