Tábla stílus bemutató

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


• Táblacellák közötti távolság:
  <table cellpacing="4" >


• Táblacellák belső margója:
  <table cellpadding="3" >


• Táblapozício középre:
  <table alig="center">


• Tábla neve:
  <caption>...</caption>
  Pozíciója:
  Alapértelmezés szerint "top"


• 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">..</td>
  Kettő cellaoszlop széles.
  Megadható: th; vagy td; cellákban.


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


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

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

• Táblázat középre:
  {margin-right: auto; margin-left: auto;}


• Szegély becsukása:
  { border-collapse: collapse;}


• Szegély elválasztása:
  { border-collapse: separate;}


• Cellatávolság:
  { 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ő:

• Amikor kettős fejlécet is alkalmazunk.
• Feladata:
  A "td" adatcellákat, a megfelelő "th" cellákhoz társítása.


• Minden "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, melyeknél:
  - 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

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 summary="Ez a táblázat bemutató célból készült. A következő részekkel foglalkozik: Alapismeretek kezdőknek." >

Táblázat celláiban 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:
  <tr id="trhatter">
  Stílus:
  #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.