Taulukot

HTML taulukot


HTML:llä voidaan luoda taulukoita.


Esimerkkejä

Tables
HTML-taulukon luominen

Table borders
Taulukon reunusten käyttö

(lisää esimerkkejä sivun alaosassa)


Taulukot

Taulukot määritellään <table>-tagilla. Taulukko jaetaan riveihin (<tr>-tagi) ja jokainen rivi jaetaan datasoluihin (<td>-tagi). Lyhenne td tulee sanoista "table data". Datasolu voi sisältää teksitä, kuvia, luetteloita, kappaleita, lomakkeita, vaakaviivoja, taulukoita, jne.

<table border="1">  
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Ylläoleva taulukko näyttää selaimessa seuraavalta:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2


Taulukot ja border-attribuutti

Jos taulukolle ei määritellä border-attribuuttia näytetään taulukko ilman reunusta. Joskus tämä voi olla hyödyllistä, mutta useimmiten reunus halutaan näyttää.

Reunus saadaan näkyviin border-attribuutilla seuraavasti:

<table border="1">  
<tr>  
<td>Row 1, cell 1</td>  
<td>Row 1, cell 2</td>  
</tr>  
</table>


Taulukkojen otsakkeet

Taulukkojen otsakkeet määritellään <th>-tagilla.

<table border="1">  
<tr>  
<th>Heading</th>  
<th>Another Heading</th>  
</tr>  
<tr>  
<td>row 1, cell 1</td>  
<td>row 1, cell 2</td>  
</tr>  
<tr>  
<td>row 2, cell 1</td>  
<td>row 2, cell 2</td>  
</tr>  
</table>

Tulos näyttää selaimessa tältä:

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2


Taulukon tyhjät solut

Taulukon tyhjät (sisällöttömät) solut näkyvät automaattisesti oikein
suurimassa osassa selaimia.

<table border="1">  
<tr>  
<td>row 1, cell 1</td>  
<td>row 1, cell 2</td>  
</tr>  
<tr>  
<td>row 2, cell 1</td>  
<td></td>  
</tr>  
</table>

Edellinen näyttää selaimessa tältä:

row 1, cell 1 row 1, cell 2
row 2, cell 1

IE ei näytä reunusta tyhjän solun ympärillä, Firefox näyttää.

Ongelman välttämiseksi voidaan tyhjään soluun lisätä &nbsp;-entiteetti: 

<table border="1">  
<tr>  
<td>row 1, cell 1</td>  
<td>row 1, cell 2</td>  
</tr>  
<tr>  
<td>row 2, cell 1</td>  
<td>&nbsp;</td>  
</tr>  
</table>

Edellinen näyttää selaimessa tältä:

row 1, cell 1 row 1, cell 2
row 2, cell 1  


Huomioita ja vinkkejä

<thead>-,<tbody>- ja <tfoot>-elementtejä käytetään
harvoin, koska selaimet eivät tue niitä kovin hyvin. Tämä tullee kuitenkin
muuttumaan XHTML:n tulevien versioiden myötä.


Lisää esimerkkejä

Table with no border
Taulukko ilman kehyksiä.

Headings in a table
Taulukon otsakkeiden esittäminen.

Empty cells
"&nbsp;"-entiteetin käyttö tyhjässä solussa.

Table with a caption
Taulukon "kuvateksti".

Table cells that span more than one row/column
Useamman kuin yhden rivin / sarakkeen kokoisen soluln määrittäminen.

Tags inside a table
Taulukko joka sisältää elementtejä.

Cell padding
Tyhjän tilan lisääminen solun sisällön ja reunuksen väliin.

Cell spacing
Solujen välisen etäisyyden määrittäminen.

Add a background color or a background image to a table
Taustavärin tai -kuvan lisääminen taulukkoon.

Add a background color or a background image to a table cell
Taustavärin tai -kuvan lisääminen taulukkon soluille.

Align the content in a table cell
Solujen sisällön asemointi.

The frame attribute
frame-attribuutin käyttö

The frame and border attributes
frame- ja bordes-attribuuttien yhteiskäyttö


Taulukkotagit

Tagi Kuvaus
<table> Määrittää taulukon
<th> Määrittää taulukon otsakkeen
<tr> Määrittää taulukon rivin
<td> Määrittää taulukon solun
<caption> Määrittää taulukon "kuvatekstin"
<colgroup> Määrittää taulukon sarakeryhmän
<col> Määrittää aatribuuttien arvot yhdelle tai useammalle taulukon
sarakkeelle
<thead> Määrittää taulukon otsake-elementin
<tbody> Määrittää taulukon runko-elementin
<tfoot> Määrittää taulukon "footerin"


 

AttachmentSize
08taulukkoharjoitus.doc38 KB