Táblázatok


A táblázatok három szintből állnak és ezeknek egy-egy elem felel meg. A legegyszerűbb egy példával bemutatnom ezeknek az elemeknek a hierarchiáját.

Példa:

1
2
3
4
5
6
<table>
<caption>A táblázat címe</caption>
 <tr>
  <td>A táblázat egy cellájának a tartalma.</td>
 </tr>
</table>

A ‹table› elem maga a táblázat kezdő és záró eleme. Ezen belül helyezkedik el az új sor nyitására alkalmazható ‹tr› elem, ami még magába foglalja a ‹td› elem, vagyis új sor nyitásának lehetőségét. Létezik még a ‹caption› elem is amit közvetlenül a ‹table› elem után kell elhelyeznünk. Segítségével a táblázat címét adhatjuk meg.

1. ‹table›

A ‹table› tag összes eleme opcionális, tehát szükséges a záró tag-ek használata.

Align – A táblázat igazítása állítható be vele az aktuális margókhoz képest. Alapesetben balra igazítás van érvényben, de ez még felülbírálható úgy is, ha az egész táblázatot egy ‹div› vagy ‹center› elem fogja közre.
Width – A táblázat szélességét adhatjuk meg pixelben, vagy százalékos értékben. Ha nem adjuk meg a kívánt értéket, akkor a cella szélessége a benne szereplő adatoktól függ.
Height – A táblázat magasságát adhatjuk meg pixelben, vagy százalékos értékben. Ha nem adjuk meg a kívánt értéket, akkor a cella szélessége a benne szereplő adatoktól függ.
Border – A táblázat mező köré rajzolódó keret vastagságát adhatjuk meg pixelben. Alapesetben nem szerepel keret a táblázat körül, de ha megtalálható a border paraméter érték nélkül, akkor a legtöbb böngésző ezt egy vékony vonallal jeleníti meg.
Cellspacing – Az egyes cellák közötti távolság állítható be a segítségével, továbbá a táblázat széle és a keret közötti távolságot is itt állítjuk be.
Cellpadding – A cella széle és a cella tartalma közötti távolság állítható be a segítségével.

Kezdő tag: kötelező
Záró tag: kötelező

Paraméterek:
Align – igazítás-típus – elhagyható
Width – méret – elhagyható
Height – méret – elhagyható
Border – méret – elhagyható
Cellspacing – méret – elhagyható
Cellpadding – méret – elhagyható

2. ‹tr›

Segítségével adhatjuk meg a táblázat egyes sorait. Ez az elem tartalmazza a cellákat. A záró tag használata kötelező. Az align paraméter segítségével beállítható a vízszintes igazítás, amit fölülbírálhat a cellánál megadott beállítás. A valign paraméter segítségével függőleges igazításra van lehetőség. Tartalma lehet TOP (felülre igazít), MIDDLE (középre igazít), BOTTOM (alulra igazít). A cellaelemek esteében ez szintén felülbírálható.

Kezdő tag: kötelező
Záró tag: kötelező

Paraméterek:
Align – igazítás-típus – elhagyható
Valign – igazítás-típus – elhagyható

3. ‹td›, ‹th›

A ‹th› fejléc-elemeket, míg a ‹td› normál cellákat definiál. A fejléc-elemek egy sor vagy oszlop kezdő elemei, míg a normál cellák a táblázat adatait tartalmazzák.

Nowrap – A megjelenítő ezen paraméter jelenlétében nem tördelheti több sorra a cellát még hely hiányában sem, kivéve ha mi a ‹p› vagy ‹br› segítségével parancsot adunk rá.
Rowspan – Megadhatjuk hogy az adott cella hány sor magasságú legyen.
Colspan – Hasonló az előzőhöz, csak a cella szélessége adható meg oszlopokban.
Align – Az igazítás típusát adhatjuk meg vele. Alapestben ‹th› elemnél középre, míg ‹td› elemnél balra igazítja a sorokat.
Valign – A cella tartalmát állíthatjuk be vele. Alapesetben középre van igazítva, ha ezt egy felsőbb szinten nem befolyásoltuk.
Width – A cella javasolt szélessége állítható be.
Height – A cella javasolt magassága állítható be.
Bgcolor – A háttérszín állítható be ezzel a paraméterrel.

Kezdő tag: kötelező
Záró tag: elhagyható
Paraméterek:
Headers – azonosító-lista – elhagyható
Scope – hatáskör – elhagyható
Nowrap – elhagyható
Rowspan – magasság – elhagyható
Colspan – szélesség – elhagyható
Align – igazítás-típus – elhagyható
Valign – igazítás-típus – elhagyható
Width – mezőszélesség – elhagyható
Height – mezőmagasság – elhagyható
Bgcolor – szín – elhagyható

4. Sorcsoportok

A ‹thead› elem tartalmazza a táblázat fejlécét, bevezető sorait. A ‹tbody› elem tartalmazza a táblázat lényegi részét. A ‹tfoot› elem pedig a lábléc ahol az összefoglalás helyezhető el. Ezeknek az elemeknek a ‹table› elemen belül kell szerepelniük. A ‹tfoot› elemnek a ‹thead› és a ‹tbody› elemek között kell elhelyezkedniük.

‹thead›

Kezdő tag: kötelező, Záró tag: elhagyható

‹tfoot›

Kezdő tag: kötelező, Záró tag: elhagyható

‹tbody›

Kezdő tag: elhagyható, Záró tag: elhagyható

5. Oszlopcsoportok
‹colgroup›

Ezzel az elemmel csoportosíthatjuk az oszlopokat. Ha nincsen jelen ez az elem akkor a táblázat összes oszlopa egy csoportba tartozik.

Span – Megadhatjuk vele, hogy hány oszlopot tartalmaz az adott csoport. Alapértéke 1 és csak akkor van hatása, ha nincsen ‹col› elem.
Width – A csoportba szereplő oszlopok szélessége állítható be vele.

Kezdő tag: kötelező
Záró tag: elhagyható
Paraméterek:
Span – oszlopszám – elhagyható
Width – oszlopszélesség – elhagyható

‹col›

Ez az elem a ‹colgroup› elemen belül szerepelhet és segítségével beállíthatjuk egyes oszlopok paramétereit. Záró tag használata tilos.

Repeat – Megadhatjuk vele hogy hány oszlopra vonatkozzanak a beállítások. Ha hiányzik az értéke akkor csak egyre vonatkozik.
Width – Az oszlop szélességét adhatjuk meg.

Kezdő tag: kötelező
Záró tag: tilos
Paraméterek:
Repeat – oszlopszám – elhagyható
Width – oszlopszélesség – elhagyható

Kapcsolódó bejegyzések:
  • Az bekezdésszintű HTML elemek leírása; H1-H6, ADDRESS, P, UL LI és OL, DL DT és DD, PRE, DIR és MENU, DIV és CENTER, BLOCKQUOTE, HR1. Fejlécek ‹H1› – ‹H6› …

  • Az alapvető HTML elemek leírása; HTML, HEAD, TITLE, SCRIPT és STYLE, ISINDEX, BASE, META, LINK, BODY.1. HTML verzióformációA dokumentum elsõ sorában a …

  • Az űrlapok az interaktivitás legfontosabb elemei. Segítségükkel az olvasó kifejezheti véleményét, kommunikálhat az íróval, vagy más olvasókkal. Ilyen lehetőségek …

  • A karakterszintű HTML elemek leírása; tt, i, b, u, s, big, small, sub, sup, em, strong, cite, code, dfn, kbd, samp, var, a, img, font, basefont, br1. Fizik …

  • Color: az adott elem színét adhatjuk meg vele. Pl.H1 { color: blue } H2 { color: #0000ff } H3 { color: #0c0 }Background Color: az adott elem háttérsz …

A cikket beküldte: GD (http://www.gdportal.hu/)

1 hozzászólás

  1. czakrisz says:

    A table tag width attribútuma a minimum vagy a maximum szélességét adja meg a táblázatnak? Én hiába adom meg pixelben, hogy milyen széles legyen, egyszerűen mégis a benne lévő tartalomtól teszi függővé a szélességét. Tud valaki segíteni?

Szólj hozzá
a Táblázatok c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>