HTML táblázatok

Számos oldal használ táblázatos felépítést, noha első ránézésre lehet, nem tűnnek táblázatnak. A táblázatoknak a szegélyét módosítani, vagy eltüntetni is lehet. A táblázat kiváló pozicionálásra.

HTML-ben minden egyes táblázat a table kettős tagen belüli blokkon van definiálva. Ez annyit tesz, hogy bármi, amit a táblázat felépítésével kapcsolatban tudunk, a

és

között szerepel. A táblázat szélessége és hosszúsága (dimenziói) megadhatók a table attribútumaival. A height attribútum a hosszúságot, míg a width a szélességet határozza meg. Megadható neki fix képpont, például 100px, vagy százalékos érték, mely a táblázatot tartalmazó elem méretéhez viszonyul. Ha például a táblázatunk a body tagen belül közvetlenül szerepel, a 70%-os szélesség azt jelenti majd, hogy a táblázat szélessége egyenlő lesz az őt tartalmazó, felsőbb szintű elem, azaz a body szélességének 70%-ával. Talán nem kell ezt tovább ragozni. Nézzük, hogyan adhatunk hozzá oszlopokat és sorokat, elvégre a táblázat alapvető részei!

Oszlopokat a td, sorokat pedig a tr kettős taggel lehet hozzáadni. A kettőt egymásba szokták ágyazni. Feltételezzük, hogy egy sorban kell 3 oszlop. Ekkor egy tr tagen belül definiáljuk három td taget. Példakód:

1.2.3.

A táblázatok szegélyét a table tag border attribútuma határozza meg. Ez egy alapvető fekete, folytonos vonalú szegély vastagságát határozza meg képpontban. Nullára állítva ez a szegély eltűnik. Ha például szaggatott vonalat, vagy más színű vonalat szeretnénk szegélynek, illetve különböző szegélyt szeretnénk különböző helyekre (például felül és alul más legyen, mint bal-és jobb oldalon), CSS-t kell használnunk. Erről részletesebben a CSS tananyagok között van olvasnivaló.

A fenti táblázat így néz ki a gyakorlatban:

1.

2.

3.

Az oszlopok és sorok metszéspontjait celláknak hívjuk (hasonlóan, mint bárhol máshol az informatikában). Ezen cellák egymástól való távolságát határozza meg a cellspacing attribútum, mely szintén a table taghez kapcsolható. Értéke: px / em / %.

1.

2.

3.

Ez a táblázat egy 5 pixeles cellspacing-et mutat.

Ha a cellák tartalmát a szegélyüktől (vagy nem létező szegélyüktől, tehát a cella szélétől) távolítani szeretnénk, a table cellpadding attribútumát kell használnunk. 5 pixel nagyságú cellpadding látható a képen:

1.

2.

3.

A táblázatokat noha sokszor használják weblapkészítésnél, a CSS technológia elterjedése óta a div megoldások a népszerűbbek. Legfőbb előnyei a flexibilitás és kompatibilitás, azonban fontos megjegyezni, hogy a table használata negatív hatással lehet az oldalbetöltési sebességre, míg a div értelmezése sokkal gyorsabb.

A CSS stílusleíró nyelvvel szebbé tehetjük a táblázatainkat, erről további tananyag található az oldalon.

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.