Taulukko voi sisältää esimerkiksi numeroita, tekstiä, lomake-kenttiä, kuvia tai näiden yhdistelmiä. Taulukoihin vopidaan kohdistaa CSS-muotoiluja kuten useisiin muihinkin elementteihin.
Taulukko luodaan table-elementiin, sisäisten elementtien avulla luodaan otsikot, rivit- ja sarakkeet.
| Elementti | Tarkoitus | Elementti | Tarkoitus |
|---|---|---|---|
table | Taulukko-elementti jonka sisään luodaan taulukko | ||
th | Otsikoiden-elementti, rivien ja sarakkeiden otsikot | tr | Rivien luonti elementti |
td | Taulukon solu -elementti, taulukon ruudun sisältö | caption | Taulukon pääotsikko, otsikko joka näkyy taulukon ulkopuolella |
colgroup | Taulukon sarakkeiden html-tiedostossa tehtävin muotoiluihin tarkoitettu elementti | col | colgroup-elementin sisällä elementti jossa varsinaiset asetukset toteutetaan.Atribuutteina esim span, style sekä niiden määritteet. |
thead | Ylärivin "otsikko"-ryhmä, esim CSS-asetukset ylärivin otsikoille | tfoot | Alarivin sisältöä koskeva ryhmä, esim CSS-asetukset koko alariville |
tbody | Varsinaisten sisältösolujen ryhmä, esim CSS-asetukset taulukon sisällölle |
Esimerkissä alla, elementit ja niiden tarkoitus:
table, taulukon luonti
caption, taulukon otsikko
tr, taulukon rivit
th, rivien sekä sarakkeiden otsikot
td, taulukon solujen sisältö
<table>
<caption><b>Tuotteet</b></caption>
<tr> <td> Hylly </td> <th> Hedelmä </th> <th> Lukumäärä </th> </tr>
<tr> <th> 1 </th> <td> Omena </td> <td> 10 </td> </tr>
<tr> <th> 2 </th> <td> Sitruuna </td> <td> 12 </td> </tr>
</table>
| Hylly | Hedelmä | Lukumäärä |
|---|---|---|
| 1 | Omena | 10 |
| 2 | Sitruuna | 12 |
Sama taulukko hiukan erilailla asemoituna (html-muotoiltu):
<table border=1 width=200 height=100>
<caption><b>Tuotteet</b></caption>
<tfoot align="center">
<tr> <td> Hylly </td> <th> Hedelmä </th> <th> Lukumäärä </th> </tr>
<tr> <th> 1 </th> <td> Omena </td> <td> 10 </td> </tr>
<tr> <th> 2 </th> <td> Sitruuna </td> <td> 12 </td> </tr>
</tfoot>
</table>
| Hylly | Hedelmä | Lukumäärä |
|---|---|---|
| 1 | Omena | 10 |
| 2 | Sitruuna | 12 |
taulukko tehdään table-elementillä, taulukon muotoiluja: border kehyksen paksuus width taulukon leveys height taulukon korkeus caption taulukon otsikko tfoot -elementillä voidaan muotoilla taulukkoa: align-atribuutissa on center-merkkauksella keskitetty koko taulukon sisältö taulukon rivit merkitään tr-elementein taulukon rivi ja sarakkeiden otsikot merkitään th-elementein taulukon varsinainen sisältö merkitään td-elementein
Taulukon muotoilu CSS-ohjeilla esitellään CSS-oppaassa !!
Taulukon table-elementtiin voi lisätä summary-atribuutilla toteutetun
tekstin joka näkyisi mikäli selain ei kykene näyttämään taulukkoa.
Taulukon otsikko kirjoitetaan caption-elementtiin.
Kumpikaan elementti, summary ja caption ei ole välttämätön. Eri selaimet saattavat näyttää taulukot hieman erilailla ilman CSS-muotoiluja.
Käytä taulukkoja sellaisten asioiden esittämiseen mitkä ovat aidosti taulukoita.
<table summary="Tässä olisi teksti joka näkyisi mikäli selain ei kykene
näyttämään taulukkoa.">
<caption><b> Tilauslista </b></caption>
<tr><th> Tuote </th> <th>kpl</th> <th>Hinta</th> <th>Hinta €</th> </tr>
<tr><th> M3 ruuvi </th> <td>50 </td> <td>0,02</td> <td>1,00</td> </tr>
<tr><th> M4 ruuvi </th> <td>50 </td> <td>0,02</td> <td>1,00</td> </tr>
<tr><th> M5 ruuvi </th> <td>20 </td> <td>0,04</td> <td>8,00</td> </tr>
<tr><th> M6 ruuvi </th> <td>20 </td> <td>0,04</td> <td>8,00</td> </tr>
<tr><th> Yhteensä: </th><td colspan="2"></td> <td>3,20 €</td> </tr>
</table>
| Tuote | kpl | Hinta | Hinta € |
|---|---|---|---|
| M3 ruuvi | 50 | 0,02 | 1,00 |
| M4 ruuvi | 50 | 0,02 | 1,00 |
| M5 ruuvi | 20 | 0,04 | 8,00 |
| M6 ruuvi | 20 | 0,04 | 8,00 |
| Yhteensä: | 3,20 € | ||
Esimerkissä (alla) käytetään colgroup-elementtiä taulukon "muotoiluun". col-elementissä span-atribuutilla määritellään ryhmiteltävien solujen määrä, style-kohdissa määritellään taustavärit.
<table border="1">
<colgroup>
<col span="2" style="background-color:#CCFFCC">
<col style="background-color:#CCFFFF">
</colgroup>
<tr><th>Nimike</th> <th>ISBN</th> <th>Hinta </th></tr>
<tr><td>CSS3-uudet ominaisuudet</td> <td>978-952-5912-79-1 </td> <td>49 € </td></tr>
<tr><td>HTML5-uudet ominaisuudet</td> <td>978-951-0-38137-3 </td> <td>39,50 €</td></tr>
</table>
| Nimike | ISBN | Hinta |
|---|---|---|
| CSS3-uudet ominaisuudet | 978-952-5912-79-1 | 49 € |
| HTML5-uudet ominaisuudet | 978-951-0-38137-3 | 39,50 € |
Taulukon muotoiluun käytettävät CSS-ohjeet html-tiedoston alussa style-elementissä:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{
background-color: RGB(213,213,255);
}
thead {color:green;}
tbody {color:#B40486;}
tfoot {color:red;}
table,th,td {border:1px solid black;}
</style>
</head>
<body>
</style>
<table>
<thead>
<tr><th>Nimike</th> <th>ISBN</th> <th>Hinta</th></tr>
</thead>
<tbody>
<tr><td>CSS3-uudet ominaisuudet</td> <td>978-952-5912-79-1</td> <td>49 €</td></tr>
<tr><td>HTML5-uudet ominaisuudet</td> <td>978-951-0-38137-3</td> <td>39,50 €</td></tr>
<tbody>
<tfoot>
<tr> <td>2 kpl</td> <td> </td> <td>yht: 88,50 €</td> </tr>
</tfoot>
</table>
</body>
</html>
Esimerkki-koodauksen tulos www-sivulle:
Taulukolle liitetään taulukkoon CSS-muotoiluohjeet style.css tiedostosta
div-elementin class-atribuutissa annetulla tunnisteella,
esimerkissä Taulukko1. Lisää taulukoihin liittyvää asiaa CSS-muotoilu oppaassa:
<div class="Taulukko1">
<table>
<tr><th>Nimike</th> <th>ISBN</th> <th>Hinta</th></tr>
<tr><td>CSS3-uudet ominaisuudet</td> <td>978-952-5912-79-1 </td> <td>49 €</td></tr>
<tr><td>HTML5-uudet ominaisuudet</td> <td>978-951-0-38137-3 </td> <td>39,50 €</td></tr>
</table>
</div>
| Nimike | ISBN | Hinta |
|---|---|---|
| CSS3-uudet ominaisuudet | 978-952-5912-79-1 | 49 € |
| HTML5-uudet ominaisuudet | 978-951-0-38137-3 | 39,50 € |