HTML taulukon erikois ominaisuuksia lisää

HTML Taulukko raja väleillä

Raja välit määrittää solujen välin.

määrittääksesi solujen välin taulukossa, käytä CSS rajan väli ominaisuutta:

Esimerkki

table {
border-spacing: 5px;
}

Taulukko solu joka kattaa monta saraketta

Tehdäksesi solun joka sisältää monta saraketta, käytä colspan atribuuttia:

Esimerkki

<table style="width:100%">
<tr>
<th>Nimi</th>
<th colspan="2">Puhelin</th>
</tr>
<tr>
<td>Timo Tuominen</td>
<td>1555 77 854</td>
<td>1555 77 855</td>
</tr>
</table>

Taulukko solu joka kattaa monta riviä

Tehdäksesi solun jossa on monta riviä, käytä rowspan attribuuttia:

Esimerkki

<table style="width:100%">
<tr>
<th>Nimi:</th>
<td>Timo Tuominen</td>
</tr>
<tr>
<th rowspan="2">Puhelin:</th>
<td>1555 77 854</td>
</tr>
<tr>
<td>1555 77 855</td>
</tr>
</table>

HTML Taulukko yläotsikolla

Tehdäksesi otsikon taulukolle, käytä <caption> tagia:

Esimerkki

<table style="width:100%">
<caption>Kuukausi säästöt</caption>
<tr>
<th>Kuukausi</th>
<th>Säästöt</th>
</tr>
<tr>
<td>Tammikuu</td>
<td>100€</td>
</tr>
<tr>
<td>Helmikuu</td>
<td>50€</td>
</tr>
</table>
Note <caption> tagi pitää kirjoittaa heti <table> tagin jälkeen.

Erikois tyyli yhdelle taulukolle

Määrittääksesi spesiaali tyylin yhdelle taulukolle, lisää id atribuutti taulukolle:

Esimerkki

<table id="t01">
<tr>
<th>Etunimi</th>
<th>Sukunimi</th>
<th>Pisteet</th>
</tr>
<tr>
<td>Tiina</td>
<td>Moilanen</td>
<td>94</td>
</tr>
</table>

Nyt voit määrittää erikoistyylin tietylle taulukolle:

table#t01 {
width: 100%;
background-color: #f1f1c1;
}

Ja laita heti tyylejä:

table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}