16. HTML taulukot

HTML Taulukko reunuksilla

2016-05-20T07:55:26+03:00

Taulukko näkyy perinteiseillä reunuksilla, jos et erikseen määrittele taulukollesi erottuvia reunuksia.

Reunus voidaan määrittää reunus atribuutilla:

Esimerkki

<table border="1" style="width:100%">
<tr>
<td>Tauno</td>
<td>Palo</td>
<td>50</td>
</tr>
<tr>
<td>Toni</td>
<td>Vilander</td>
<td>94</td>
</tr>
</table>

	Reunus atribuutti toimii parhaiten CSS:ää käytettäessä.

Reunuksia lisätessäsi, käytä CSS reunus ominaisuutta:

Esimerkki:

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

Muista määritellä reunukset taulukkoon ja taulukko soluihin.

HTML taulukon erikois ominaisuuksia lisää

2016-05-20T08:29:09+03:00

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>

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

HTML taulukoiden erikois ominaisuuksia

2016-05-20T08:10:33+03:00

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

2016-05-20T07:55:49+03:00

HTML taulukko esimerkki

Numero	Etunimi	Sukunimi	Pisteet
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.

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