16. HTML taulukot

HTML taulukoiden erikois ominaisuuksia

Sisällytetyt taulukot

Jos haluat reunuksen sisällyttää reunukseen, lisää CSS reunus-sisällys:

Esimerkki:

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}


HTML Taulukon solun muotoilu

Solun muotoilu määrittää välin solun sisältöön ja sen reunuksiin.

jos et tätä erikseen määritä, taulukon solut tullaan näyttämään ilman mitään erillisiä reunuksia.

Leventääksesi haluamaan kokoon solut, käytä CSS levennys ominaisuutta:

Esimerkki:

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}

HTML Taulukko otsikointi

Taulukko otsikot määritellään <th> tagilla.

Oletuksena, kaikki suurimmat selain taulukko otsikot näytetään lihavoituna ja keskitettynä:

Esimerkki:

<table style="width:100%">
<tr>
<th>Etunimi</th>
<th>Sukunimi</th>
<th>Pisteet</th>
</tr>
<tr>
<td>Tiina</td>
<td>Laulainen</td>
<td>94</td>
</tr>
</table>

Määrittääksesi taulukko otsikot vasempaan laitaan, käytä CSS tekstin määritys ominaisuutta:

Esimerkki

th {
text-align: left;
}


HTML Taulukot

HTML taulukko esimerkki

NumeroEtunimiSukunimiPisteet
1 Tauno Palo 94
2 Timo Maki 80
3 Tiina Turunen 67
4 Jaana Servo 50

HTML taulukoiden määrittely

Esimerkki

<table style="width:100%">
<tr>
<td>Tiina</td>
<td>Simo</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Liina</td>
<td>94</td>
</tr>
</table>

Esimerkki selitettynä:

Taulukot määritellään <table> tagilla.

Taulukot on jaettu taulukko riveihin <tr> tageilla.

Taulukko rivit on jaettu taulukko tietueisiin <td> tagilla.

Taulukko rivi voidaan jakaa myös taulukko otsikoihin <th> tagilla.

Note Taulukko tietue <td> ovat datan kerääjiä taulukossa.
Ne voivat sisältää kaikenlaisia HTML elementtejä kuten tekstiä, kuvia, listoja, muita taulukoita jne.