Táblázatok
A táblázatokat elsősorban adatok rendezett megjelenítésére használjuk, weblapunk felépítését lehetőleg ne táblázatok segítségével valósítsuk meg!
A táblázatok sorokból (rows/tr), oszlopokból (columns), adattáblából (data/td) és fejlécből (header/th) állhatnak.
A cellákban szinte bármilyen információ elhelyezhető, így kép, szöveg, címsor is.
Több táblázat is egymásba ágyazható.
| Paraméter | Magyarázat |
|---|---|
| <table> | jelezzük, hogy táblázatot készítünk |
| <tr> | megadjuk, hogy ebben a sorban, |
| <th></th> | mennyi cella (oszlop) lesz egymás mellett. Ebben a táblázatban 2 fejléc cellát hoztam létre. |
| <th></th> | A <th> paraméter jelenti, hogy ezek fejlécek lesznek. A fejléc tartalma általában középre igazított, félkövér stílusú. Az oszlopoknak és a soroknak is lehetnek fejlécei, melyek a sor- és oszlopcímeket adják meg, de nem kötelező a használatuk. A megjelenés böngészőnként eltérhet! |
| </tr> | Lezárjuk a sor részt, ha nem akarunk több oszlopot és |
| <tr> | új sort definiálunk. |
| <td></td> | A <td> paraméterrel adatcellákat hozunk létre. |
| <td></td> | Ezek tartalma balra igazított. A táblázat tartalmi felépítését mi határozzuk meg. Létrehozhatunk csak adattáblázatot is, ahol nincs <th>, azaz fejléc definiálva. |
| </tr> | Lezárjuk a sor részt. |
| </table> | Lezárjuk a táblát. A nyitó és záró tag nélkül a táblázat nem fog látszani! |
A thead, tbody és tfoot jellemzők
A thead, tbody és tfoot jellemzők további formázási lehetőséget nyújtanak, valamint segítenek a táblázat helyes megjelenítésében.
- thead a táblázat fejlécének a formázását teszi lehetővé
- tbody a törzsrészt alkotó sorokat tartalmazza
- tfoot (lábléc) a tbody része. A jelölt rész teljesen mindegy hol helyezkedik el a táblázatban, a böngészők a táblázat alján jelenítik meg.
Méretek: <width, height>
A <table width="#"> a teljes táblázat
szélességét, a <table height="#"> a magasságát adja meg. A %-os értékadás azt jelenti,
hogy a táblázat a rendelkezésére álló helyből annyi %-ot foglal el, amennyit megadtunk neki. Ebben az esetben, ha a böngészőt
átméretezzük, a táblánk is ugyan úgy átméreteződik.
A táblázatra megadott méretet a további alakításnál 100%-ként kell figyelembe venni, mert így érjük el a tábla egészére megadott értékeket.
Vagyis, ha az egész táblára 60% van megadva, és négy egyforma széles oszlopot szeretnénk, akkor négy 25%-os méretet kell a szélességre megadni.
Az oszlopok és sorok mérete a tartalomtól függően is változhat. A méretek megadásának egy alap
táblázat létrehozásánál és annak megfelelő kitöltésénél van jelentősége.
Ha nem adunk meg értéket, akkor azt a tartalom határozza meg.
Az érték megadás alapértelmezett mértékegysége a px, nem kötelező az érték után kiírni.
Keret: <border>
A border elemmel a táblázat szegélyét határozhatjuk meg. A böngészők (általában) rendelkeznek alapértelmezett
vonalvastagsággal, amit akkor használnak, ha értékként "border"-t adunk meg (border="border").
Egyébként a vastagságot pixelben adjuk meg, ami az egységes megjelenítés miatt ajánlatos. Ha a megadott érték nulla, akkor nem látszik a szegély.
Ha nem írunk az értékhez mértékegységet, akkor px-ben kapjuk az eredményt.
Margók: <cellpadding, cellspacing>
A cellpadding a tartalom és a cella belső margója közti távolságot határozza meg.
A cellspacing kóddal a cella és a táblázat külső szegélye közti távolságot adhatjuk meg.
Igazítás: <align, valign>
Az align (igazítás) utasítással a <th> <tr> <td> cellák tartamát
vízszintesen tudjuk igazítani.
Értékei lehetnek: left (balra), right (jobbra), center (középre).
A fejléc cellákban a center, az adatcellákban pedig a balra (left) az alapértelmezett beállítás.
Az igazítás a <tr> tagban a teljes sorra vonatkozik, <td>
és <th> tagban csak az adott cellában lesz érvényes.
A tartalom függőleges igazítására a valign utasítással van lehetőség.
Értékei: valign:
| top | felülre | |
|---|---|---|
| middle | középre | |
| bottom | alulra | |
| baseline | a cellák tartalmának | az alját igazítja egymáshoz |
Táblázat cím: <caption>
A <caption>#</caption> paraméterrel a táblázat címét tudjuk megadni. A táblázatban csak egyszer fordulhat elő. Alapértelmezésben középre igazított, de az align kóddal igazíthatjuk jobbra és balra is, sőt a bottom értékkel a táblázat aljára is.
Leírás: <summary>
A <summary> jellemzővel a a tábláról tudunk egy rövid leírást adni. Ez a hangos képernyőfelolvasót használóknak nyújt
segítséget, a képernyőn nem jelenik meg.
A table része: <table summary="leírás">
Társítás: <scope>
A <scope> (kiterjedés) jellemző az adatcellákat társítja a megfelelő fejlécekhez. A rowspan és collspan jellemzőkkel nem használható. Az oszlopok fejléceit a scope="col", a sor fejléceket a scope="row" azonosítja. Légyege, hogy tudatja a hangos képernyő felolvasóval, vagy böngészővel, hogy az adatcellához melyik fejléc tartozik.
Oszlop- és sorátfogás: <colspan, rowspan>
A colspan (oszlop) és a rowspan (sorátfogás) kódok használatával még tovább tudjuk
a táblázatunkat formázni.
A colspan-nal az oszlopokat tudjuk összevonni. Figyelni kell, hogy megfelelő számú
oszlopunk legyen hozzá. Így a colspan="2" parancshoz kettő oszlopot
kell társítani. Értelemszerűen a colspan="3"-hoz hármat.
A rowspan-nal a sorokat tudjuk formázni. Itt a sorok számára kell figyelni.
Ha nem így teszünk, akkor a böngésző mindkét esetben egy üres cellát
épít be a táblázatba, hogy az szimmetrikus maradjon.
Üres cellák: < >
Az üres cellák megjelenítésére "nemtörő szóközt" használjunk. Így a böngészők helyesen jelenítik meg a táblázatunkat. Kódja:<td> </td>
