Weblapprogramozás

- Oktatási segédanyag középiskolák számára

Táblázatok készítése

A táblázatok igen gyakori elemei a weblapoknak, ugyanis nem csak az adatok táblázatos megjelenítésére használják őket, hanem gyakran egy szegély nélküli táblázattal rendezik el az oldal tartalmát is a lapon. Az igazán professzionális weblapok azonban nem táblázattal, hanem úgynevezett stíluslapok segítségével valósítják meg az elrendezést.

Láthattuk ugyanis a képeknél, hogy nem olyan egyszerű a képeket megfelelő helyekre tenni, és az oldal méretének változtatásával gyakran elmászkálnak. A táblázat az egyik hatásos módszer a tartalmak pontos elhelyezéséhez.

Minden táblázatot a <table> címke nyit és a </table> zár. A táblázat alapvetően sorokra van osztva, a sorok pedig cellákra, így épül fel a hierarchia. A sorokat a <tr> címke nyitja és a </tr> zárja. Soron belül, az egyes cellák tartalmát a <td> és a </td> címkék közé kell írni. (Figyelem, minden sorban ugyanannyi cellát kell definiálni!) Nézzük az első, legegyszerűbb példát táblázatra!

Interaktív példa táblázatra (2x2-es):

A táblázatok gyakran adatokat közölnek, ilyenkor az első sor tartalmazza az adatok típusait, a fejlécet. Ekkor az elsősorban a <td> címkék helyett használjunk <th>-kat (és záró párjaikat), így a cellák kiemelten fognak megjelenni.

Interaktív példa fejléces táblázatra:

A <table> paraméterei

Nézzük, a táblánknak milyen beállítási lehetőségei vannak. A <table> címke paraméterei:

align= igazítás
border= keret vastagsága
width= tábla szélessége (pontokban, vagy %-ban)
height= tábla magassága (pontokban, vagy %-ban)
cellspacing= mennyi helyet hagyjon ki a cellák között
cellpadding= mennyi helyet hagyjon ki a szöveg
                                  és a cella fala között
background= háttérkép
bgcolor= háttér színe (színkóddal)
bordercolor= keret színe (színkóddal)

Interaktív példa <table> paramétereire:

A <tr> paraméterei:

Az előzőekben az egész táblázatra vonatkozó beállításokat láthattuk. Amiket a <tr>-en belül állítunk, az értelemszerűen csak az adott sorra fog vonatkozni. Paraméterei:

align= vízszintes igazítás (left, rigth, center)
valign= függőleges igazítás (top, bottom, middle)
background= háttérkép
bgcolor= háttér színe (színkóddal)
bordercolor= keret színe (színkóddal)

Interaktív példa <tr> paramétereire:

A <td> paraméterei:

Természetes most már, hogy a <td> címkével pedig egy adott cella tulajdonságait tudjuk állítani. Paraméterei:

align= vízszintes igazítás (left, rigth, center)
valign= függőleges igazítás (top, bottom, middle)
width= szélesség (egy oszlopban egyezőnek kell lennie)
height= magasság (egy sorban egyezőnek kell lennie)
background= háttérkép
bgcolor= háttér színe (színkóddal)
bordercolor= keret színe (színkóddal)

Interaktív példa <td> paramétereire:

Tartalom elrendezése táblázattal >>

Weblapprogramozás oktatása középiskolában - Készült: 2007