Taulukot

Johdanto

Taulukoilla voidaan esittää taulukkomuotoista dataa html-koodissa. Lisäksi sitä voi varauksin käyttää muihinkin tehtäviin, kuten kuvien ja tekstin keskinäisen sijainnin kiinnittämiseen tai jopa marginaalien luomiseen.

Table-välilehti

Tällä välilehdellä ovat taulukon käsittelyyn tarkoitetut työkalut. Ensimmäisellä nappulalla avataan editori, jolla saadaan määritellä kaikki taulukkoon liittyvät ominaisuudet:

Taulukkoeditori

Esimerkissä tehdään 2-rivin ja 2-sarakkeinen taulukko. Taulukon sisältötekstit voidaan kirjoittaa jo valmiiksi tässä, jos halutaan.

Extended-välilehden takaa valitaan taulukon lisäominaisuudet, kuten taustaväri ja reunan paksuus ynnä muita vastaavia.

Table header

Toinen nappula vasemmalta on taulukon otsikkorivien tekijä. Se luo taulukkoon koodin <th></th>, joka luo taulukkoon otsikkorivin. Otsikkorivi näkyy yleensä lihavoituna:

Table data ja Insert row

Seuraavaksi löytyvät nappulat taulukkosolujen tekemiseen (table data), <td></td> sekä taulukkoon rivien lisäämiseen (table row), <tr></tr>. Kun lisäilet soluja ja rivejä jälkikäteen taulukkoon, ole tarkkana, että olet oikeassa paikassa taulukon sisällä!

Speedy table sizer

Tällä nappulalla luodaan halutun kokoinen perustaulukko:

Kyseinen esimerkki luo taulukon, jossa on kolme saraketta ja neljä riviä.

Konvertoi taulukoksi

Valmiin tekstin voi konvertoida taulukoksi samoin kuin listaksikin. Esimerkiksi maalataan seuraava teksti ja valitaan hiiren oikeanpuoleisen napin takaa "Selected" | "Convert lines to table"

Tuote	hinta
kengät	49
takki	129
housut	79
	   

Tällä saa tällaisen koodin aikaiseksi:

<table>
	<tr><td>Tuote	hinta</td></tr>
	<tr><td>kengät	49</td></tr>
	<tr><td>takki	129</td></tr>
	<tr><td>housut	79</td></tr>
</table>
	   

Tämä ei ole aivan sitä, mitä halutaan, sillä koko rivi on laitettu samaksi soluksi. Sarakkeiden väliin voi lisätä </td><td>-parin, jonka jälkeen taulukko onkin jo ainakin lähempänä sitä, mitä haettiin.