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;
}