Táblázat stílusai és vizuális bemutató

Alap meghatározások
Azonosítók
Tabla stílusok
Headars és a scope
Summary (rövid leírás)
Cellák szövegének pozíciónálása
thead, tbody, és a tfoot

Vízuális bemutatók

Egyszerű táblázat
Keret nélküli táblázat
Cellák távolsága
Padding hatása celláknál
Háttér és kereteszín
Szöveg igazítása
thead, tbody, tfoot
thead, tbody, tfoot jelölőelemeken kivüli sorok

Egyszerű táblázat

th-cella	th-cella	th-cella	th-cella
td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella

Egyszerű, keret nélküli táblázat

th-cella	th-cella	th-cella	th-cella
td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella

Táblázati cellák egymástól vakó távolsága.

Formázott táblázat
th-cella	th-cella	th-cella	th-cella
td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella

Táblázatnál, belső margó, azaz padding hatása celláknál.

Formázott táblázat
th-cella	th-cella	th-cella	th-cella
td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella

Táblázat és cellák, háttér és kereteszín meghatározás.

Formázott, színes táblázat
th-cella	th-cella	th-cella	th-cella
td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella

Táblázat celláiban szöveg, azaz tartalom igazítása.

Táblázat thead, tbody, tfoot jelölőelemei

Táblázat fő területeinek, stílus meghatározásai:

Fejléc th-cella				Fejléc th-cella
Fejléc th-cella		Fejléc th-cella		Fejléc th-cella		Fejléc th-cella
th-cella	th-cella	th-cella	th-cella	th-cella	th-cella	th-cella	th-cella
td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella
A foot. Táblázat lábléce.

A táblázat thead, tbody, tfoot, jelölőelemein kivüli cellák

Fejléc th-cella				Fejléc th-cella
Fejléc th-cella		Fejléc th-cella		Fejléc th-cella		Fejléc th-cella
th külső	th külső	th külső	th külső	th külső	th külső	th külső	th külső
td külső	td külső	td külső	td külső	td külső	td külső	td külső	td külső
td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella
td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella	td-cella
A foot. Táblázat lábléce.

Táblázat összefoglaló:

Táblázat háttérszíne, vagy háttérképe, az összes táblázati elemre hatással van.

A táblázat háttérszíne, vagy háttérképe, ne legyen hatással a táblázat többi elemére, akkor, a táblázat celláinak egyedi id, vagy class osztályazonosítót határozhatunk meg.

A táblázat valamelyik cellájának ( "th" ; "td" ) azonosítót adtunk, akkor azt függetlenül a többi cellától, egyedi stílusokkal ruházhatjuk fel.

A táblázat cellasorait jelölő elemnek (<tr>) is adhatunk azonosítót, akkor azt függetlenül a többi cellasortól, egyedi stílusokkal ruházhatjuk fel.

Táblázat felosztható külön-külön területekre, (táblázat fejlécére, táblázat tartalmára, táblázat láblécére)

Táblázat fejléce = thead, táblázat tartalma = tbody, táblázat lábléce = tfoot (táblázat tfoot jelölőelem nem kötelező)

A táblázat háttérszínétől, vagy háttérképétől, a fő táblázati területek elkülönüljenek, használjuk a thead tbody és tfoot jelölőelemeket.

A táblázat celláinak magassága, minden böngészőben egyforma legyen, ugyan-úgy járunk el, mint a div szakaszok megjelenési méreteinél (padding).

Táblázat celláinak szélességét, beállíthatjuk a width értékével.

Táblázat celláinak magasságát, beállíthatjuk a height értékével. Lehetőleg, olyan értéket adjunk meg, hogy a cellatartalom elférjen benne.

Vissza oda, ahonnan ide jutottunk!

Tábla alapmeghatározás, szélesség és keretvastagság:
<table width="100%" border="1">................ </table>

Táblacellák közötti távolság:
<table width="80%" border="1" cellpacing="4" > ................ </table>

Táblacellák belső margója:
<table width="80%" border="1" cellpacing="4" cellpadding="3" >................ </table>

Táblapozício középre:
<table alig="center" width="80%" border="1" cellpacing="4" cellpadding="3" >................ </table>

Tábla neve: <caption>.................</caption> Pozíciója: Alapértelmezés szerint "top" de, tetszőleges lehet pl: "bottom"

Fejléc cella: <th>Szöveg</th>

Adat cella: <td>Szöveg</td>

Cella sor: <tr>................................................................................</tr>

Egyedi szélesség: <tr> <th width="33%">Szöveg</th> <th width="33%">Szöveg</th> <th width="34%">Szöveg</th> </tr>

Szélesség: <td colspan="2"> = Kettő cellaoszlop szélességével</td> Megadható: th; vagy td; cellákban.

Magasság: <td rowspan="2"> = Kettő cellasor magasságával</td> Megadható: th; vagy td; cellákban.

Üres cella: <td> </td> Megadható: th; vagy td; cellákban.

Táblázat és elemeinek azonosítása:

A "table" jelölőelemhez, és minden jelölőelemhez, mely a táblázathoz tartozik, adhatunk egyedi "id" azonosítót, és "class" osztályazonosítót, vagy mindkettőt.
<table width="80%" border="1" id="tabla">................ </table>
<table width="80%" border="1" class="tabla">................ </table>
<table width="80%" border="1" id="tabla" class="tabla">................ </table>
Cellasor:
<tr id="cellasor">....</tr>
<tr class="cellasor">....</tr>
<tr id="cellasor" class="cellasor">....</tr>
Fejléc cella:
<th id="fejlec">Szöveg</th>
<th class="fejlec">Szöveg</th>
<th id="fejlec" class="fejlec">Szöveg</th>
Adat cella:
<td id="adatok">Szöveg</td>
<td class="adatok">Szöveg</td>
<td id="adatok" class="adatok"> Szöveg</td>

Táblázat CSS stílusai, ha, a table jelölőelemet elláttuk azonosítóval:

Táblázat középre: azonosító {margin-right: auto; margin-left: auto;}
Szegély becsukása: azonosító{ border-collapse: collapse;}
Szegély elválasztása: azonosító{ border-collapse: separate;}
Cellatávolság: azonosító{ border-spacing: 5px;}
További stílusok: Minden olyan stilus, mely a szövegformázásra is meghatározható!

Táblázat headars és a scope jellemzői:

Nem minden böngésző jeleníti meg, de IE és a Safari igen
Ha nem is jelenik meg a szükséges információ, az akkor is ott van a kódban. De az információt megjelenítő és hangos képernyőfelolvasók, fel tudják használni.

A headars jellemző:

Olyan táblázatoknál, ahol kettős fejlécet is alkalmazunk.
Feladata: A "td" adatcellákat, a megfelelő "th" azaz fejléc cellákhoz társítsuk,
Minden oszlop fejlécéhez "th" cellához, tartozik egy "id" egyedi azonosító: <th id="olvas001">...</th>
Fejléchez tartozó, minden "td" cellába, el kell helyezni a fejléc azonosítóját: <td headers="olvas001">...</td>

A scope jellemző:

Olyan táblázatoknál, ahol:
- Nem használunk fejléc "th" cellát.
- Nem használunk "colspan" vagy "rowspan" meghatározást.
- Vagy, minden cellaoszlophoz, csak egy "th" fejléc cella tartozik
Minden cellaoszlophoz, egy fejléc tartozik:
<tr> <th scope="row">...</th> <th scope="row">...</th> <th scope="row">...</th> </tr>
<tr> <td scope="row">...</td> <td scope="row">...</td> <td scope="row">...</td> </tr>
Nem használunk kettős fejléc cellát:
<tr> <th scope="col">...</th> <th scope="col">...</th> <th scope="col">...</th> </tr>
<tr> <td scope="col">...</td> <td scope="col">...</td> <td scope="col">...</td> </tr>

Táblázat summary jelölőeleme (rövid leírás):

A böngészők vizuálisan nem jelenítenek meg, de a hangos képernyőfelolvasó programot használókat, fontos információval látja el.
<table width="90%" border="1" cellpacing="4" cellpadding="3" summary="Ez a táblázat bemutató célból készült. A következő részekkel foglalkozik: Alapismeretek kezdőknek, xhtml, CSS, JavaScript" >

Táblázat celláiban szövegek, azaz tartalom pozíciónálása:
A böngészők, autómatikusan középre igazítják a cellák tartalmát

A "th" cellákban, vízszintesen és függőlegesen középre, és a betűvastagság nagyobb, mint a "td" cellákban.
A "td" cellákban, balra és függőlegesen középre.

Mindkét cellában függőlegesen:

Fentre: {vertical-align: top;}
Lentre: {vertical-align: bottom;}

Mindkét cellában vízszintesen:

Balra, "th" cellában: {text-align: left;}
Középre, "td" cellában: {text-align: center;}
Jobbra, mindkét cellában: {text-align: right;}

A táblázat thead, tbody, és a tfoot jelölőelemei.

Használatuk megegyezik a weboldal felépítésével : head= fejléc, body= tartalom, footer= lábléc
Táblázatoknál:
- thead = fejléc, azaz"th" cella (táblázatfej)
- tbody = tartalom, azaz "td" cellák (táblázattörzs)
- tfoot = lábléc (táblázat lábléce)
Ezen jelölőelemek, minden táblázatban, csak egyszer szerepelhetnek.
Ezen jelölőelemekkel kijelölt táblázati elemeket a böngészők, szigorú sorrend szerint jelenítik meg.
Ha, a táblázat elkészítésénél felcserélnénk a sorrendet, azaz a táblázat első sorát tfoot jelölőelemek közé írnánk, akkor a böngésző programok, ezen sorokat a táblázat aljára helyezik.
Táblázatoknak adott háttérszín vagy háttérkép megjelenítése, a teljes táblázati területre vonatkozik.
Ezen elemekkel a táblázat fő területeinek, egyedi megjelenési háttérszínt vagy háttérképet határozhatunk meg úgy, hogy nem kell külön-külön stílust meghatározni a tr cellasoroknak vagy a th td celláknak. Ezzel, vizuálisan is áttekinthetőbb lesz táblázatunk.
Nem adhatunk háttérszínt vagy háttérképet a tr cellasoroknak, így: tr{backgroun-dcolor: blue;}, mert, felülírja a teljes tartalmat. De, egyedi azonosítóval megtehetjük, így: #trhatter{backgroun-dcolor: blue;}

Megjegyzés:

A tbody-val vigyázni kell.
Amennyiben a tbody jelölőelemhez stílust is meghatároztunk (pl.: háttérszínt), az a weboldalunkon lévő további táblázatok celláira is, hatással lesz.
Kivédeni úgy tudjuk, hogy mindegyik jelölőelemhez (thead; tbody; tfoot;) egyedi id azonosítót rendelünk, és ezen azonosítókhoz írjuk meg a stílusokat.