Sähköinen asiointipalvelu, johdanto

Sorakuilu

table

Yksinkertainen taulukko

Nimi ID Lempiväri
Jouko 00001 Sininen
Susanna 00002 Punainen
Elmeri 00003 Vihreä
<table>
  <tr>
    <th>Nimi</th>
    <th>ID</th>
    <th>Lempiväri</th>
  </tr>
  <tr>
    <td>Jouko</td>
    <td>00001</td>
    <td>Sininen</td>
  </tr>
  <tr>
    <td>Susanna</td>
    <td>00002</td>
    <td>Punainen</td>
  </tr>
  <tr>
    <td>Elmeri</td>
    <td>00003</td>
    <td>Vihreä</td>
  </tr>
</table>

caption

caption-elementti on taulukon pääotsikko.

Se sijoitetaan

head, body ja foot

Taulukon ensimmäisen rivin oletetaan olevan otsikkorivi, siinä ei ole varsinaista dataa. Se voidaan toteuttaa thead-elementillä

Tässä tapauksessa itse data sijoitetaan elementtiin tbody.

Elementti tfoot on vastaava kuin thead, mutta taulukon alarivillä.

Sijoittamalla kaikki ylläolevat elementit 1. taulukko muuttuu seuraavasti:

Pääotsikko
Nimi ID Lempiväri
Jouko 00001 Sininen
Susanna 00002 Punainen
Elmeri 00003 Vihreä
Nimi ID Lempiväri
<table>
	<caption>Pääotsikko</caption>
	<thead>
	  <tr>
		<th>Nimi</th>
		<th>ID</th>
		<th>Lempiväri</th>
	  </tr>
	</thead>
	<tfoot>
	  <tr>
		<th>Nimi</th>
		<th>ID</th>
		<th>Lempiväri</th>
	  </tr>
	</tfoot>	  
	<tbody>		
	  <tr>
		<td>Jouko</td>
		<td>00001</td>
		<td>Sininen</td>
	  </tr>
	  <tr>
		<td>Susanna</td>
		<td>00002</td>
		<td>Punainen</td>
	  </tr>
	  <tr>
		<td>Elmeri</td>
		<td>00003</td>
		<td>Vihreä</td>
	  </tr>
	</tbody>	
</table>

Rivielementti

Rivielementti on tr, se on theadin, tbodyn ja tfootin lapsi (voi olla myös suoraan tablen lapsi.

Sisältöelementit

Sisältöelementeistä th:tä käytetään otsikoissa (head) ja td:tä varsinaisessa sisällössä (data). Sisältöelementit ovat rivielemnttien lapsia.

Sarake-elementit col ja colgroup

CSS taulukoissa

Taulukon ulkoasu on riippuvainen selainohjelman oletuscss:stä.

Taulukkoon liitetyt attribuutit

AttribuuttiMihin elementtiinMitä tekee?
colspan th, tdleventää solua joko kaksinkertaiseksi tai isommaksi verrattuna muihin soluihin
rowspan th, tdsuurentaa solun korkeutta joko kaksinkertaiseksi tai isommaksi verrattuna muihin soluihin
spancolLevittää sarakkeen kahden tai useamman sarakkeen levyiseksi
headers td välillä erotettu merkkijono, joka vastaa th-elementtien ID:itä käytettäessä th:ta row | col | rowgroup | colgroup (oletus) – määrittää otsikkoelementin akselin. Oletuksena on se, että otsikko on sarakeotsikko, mutta se voi olla myös riviotsikko.

Tärkeitä tyyliohjeita taulukoille

CSS-ominaisuus Mahdolliset arvot Mitä tekee
vertical-align baseline, sub, super, text-top, text-bottom, middle, top, bottom, %, length tasaa solun sisällön tekstin
white-space normal, pre, nowrap, pre-wrap, pre-line Kontrolloi tekstin jakaantumista soluun. Osa datasta ei ole ymmärrettävää, jos se ei ole yhdellä rivillä.
border-collapse collapse, separate sovelletaan taulukoissa, joissa reunat voivat sotkea toisensa (collapse = kaataa, sortua), esim. onko marginaali kaksisuuntainen vai ei? Mitä jos kaksi reunaviivaa, jotka kohtaavat toisensa ovat erityylisiä (esim. väri on eri). Tämänkaltaisilla elementeillä sovellettava tyyli on voimakkaamman mukaan, järjestys:cell, row, row group, column, column group, table.
border-spacing length Jos border-collapse on separate, voit määrittää, kuinka kaukana solujen pitäisi olla toisistaan

Solujen yhdistäminen, colspan and rowspan

Molemmille annetaan positiivinen luku 2 tai suurempi. Jos td:lla on colspan 2, (<td colspan="2">), se on vielä yksi solu, mutta vie kahden vierekkäisen solun tilan. Saman tekee rowspan, mutta pystysuunnassa.

2-akselinen taulukko

1 2 3 4 5
2 4 6 8 10
3 6 9 12 15
4 8 12 16 20
5 10 15 20 25

<table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
  </tr>
  <tr>
    <th>2</th>
    <td>4</td>
    <td>6</td>
    <td>8</td>
    <td>10</td>
  </tr>
  <tr>
    <th>3</th>
    <td>6</td>
    <td>9</td>
    <td>12</td>
    <td>15</td>
  </tr>
  <tr>
    <th>4</th>
    <td>8</td>
    <td>12</td>
    <td>16</td>
    <td>20</td>
  </tr>
  <tr>
    <th>5</th>
    <td>10</td>
    <td>15</td>
    <td>20</td>
    <td>25</td>
  </tr>
</table>

CSS

td, th {
  width: 4rem;
  height: 2rem;
  border: 1px solid #ccc;
  text-align: center;
}
th {
  background: lightblue;
  border-color: white;
}
body {
  padding: 1rem;
}