HTML táblázat kialakítása CSS-sel - SELFHTML-Wiki

Információk erről a szövegről

táblázat

A táblázat elrendezésénél egy dolog a legfontosabb - nem az, hogy milyen jól néz ki az asztal, hanem az, hogy hogyan gyors és egyszerű a felhasználó adatokat rögzíthet a megfelelő oszlopokban és sorokban.

Ez a fejezet bemutatja, hogyan használhatja a CSS3-at a táblák vonzóbbá és ugyanakkor könnyebben olvashatóvá tételéhez.

Tartalomjegyzék

  • 1 CSS alapbeállítások
    • 1.1 keretek és szegélyek
    • 1.2 Fejlécek
    • 1,3 mező
  • 2 Példa a böngésző támogatására
    • 2.1 Oszlopcsoportok a cellák között
    • 2.2 A táblázat címsora
    • 2.3 Alapvető CSS-információk
    • 2.4 Fejléc és adatcellák tervezése
    • 2,5 zebrán
    • 2.6 Sorok címsorai
    • 2.7 Tervezze meg a címsort
    • 2.8 Vonalak jelölése: lebeg
  • 3 Példa szövetségi államok szürkére és szürkére
  • 4 weblink

CSS alapbeállítások [szerkesztés]

Keretek és szegélyek [szerkesztés]

Általában a SELFHTML azt javasolja, hogy legyen óvatos a böngésző alapértelmezett beállításainak megváltoztatásával kapcsolatban. A táblák kivétel ez alól, mivel a normál nézetben minden tábla cellának és magának a táblának van egy szegélyvonala és egy külső szegélye, ami "technikai" megjelenést kölcsönöz a táblázatoknak:

Határ-összecsukással: összecsukás ezt meg lehet változtatni úgy, hogy a táblázat "normál" rácsban jelenjen meg.

Fejlécek [szerkesztés]

Egy táblázatban a th cellák alkotják az egyes oszlopok vagy sorok fejlécét, a felirat elem a tábla feliratát jelenti. Normál esetben (vagyis az alapértelmezett stíluslapon) a táblázat fejléceit félkövér betűtípussal jelenítik meg, a feliratot a Asztal elhelyezve. Ez CSS-sel módosítható:

Mezők [szerkesztés]

A legtöbb táblázat számsorokat tartalmaz.

Itt fontos a számok egyértelmű összehangolása és az összegek ennek megfelelő megjelölése.

Példa a böngésző támogatására [szerkesztés]

Példánkhoz egy táblázatot használunk, amely bemutatja az egyes böngészők piaci részesedését Németországban.

A táblába egy tbody, thead és tfoot elem került (a böngésző maga is létrehozhat egy tbody elemet). Vonalakat vezetünk be tr-vel.

A táblafejléc th elemekből áll, az egyes cellák td elemekkel.

Cellák közötti oszlopcsoportok [szerkesztés]

Mivel az Internet Explorer a többi böngészővel ellentétben nem kap automatikus frissítéseket, érdekes tudni, hogy a piaci részesedés mely verziókra oszlik el:

Táblázat címe [szerkesztés]

Hozzárendelhet egy rövid magyarázatot vagy címet egy táblához a felirat elemmel. A nyilatkozatot közvetlenül a bevezető tábla címke után kell megtenni, de a táblázat alá helyezhető CSS segítségével is.

Minden oszlopnak van egy fejléc cellája (th) a táblázat fejlécében (thead), amely hozzárendelve az oszlophoz, amelynek hatóköre = "col".

Hasonlóképpen, a hatókör = "sor" bal oldali oszlop szolgál az egyes sorok táblázatfejléceként.

Alapvető CSS-információk [szerkesztés]

A border-collapse tulajdonsággal megadhatja, hogy a szomszédos táblaelemek határai elválasztva (border-collapse: külön;) vagy egybe esnek-e (border-collapse: collapse;).

A fejlécben és az adatcellákban található betűtípus a szokásos betűmérettel, a fejléc cellákban lévő betűkészlet félkövéren látható.

Fej- és adatcellák tervezése [szerkesztés]

A böngésző saját normál beállításaiban csak a számok állandó rendetlenségét látja. A CSS lehetővé teszi fejléc és adatcellák tervezését, hogy a számok könnyebben olvashatók legyenek.

A táblázat fejlécei megadják a háttér és a szöveg színét.
Az adatcellák betűkészletének dőlt és helyes indoklással kell rendelkeznie, hogy a nagy értékek azonnal kitűnjenek.

Annak érdekében, hogy a bal felső sarokban lévő üres adatsella ne kapjon árnyékot, az üres cellákat üres pseudo-osztályokkal címezzük meg, és az árnyék ismét eltávolításra kerül.

Zebra [szerkesztés]

Különösen nagyobb asztaloknál könnyebb minden második sort színezni.

Sorfejlécek [szerkesztés]

Emlékszik az egyes sorok fejléc celláira?

Tervezési címsor [szerkesztés]

A felirat elemben található felirat szalaggal van megtervezve:

A bal oldali álelem háromdimenziós megjelenést kölcsönöz a sávnak.

Az asztal most szintén árnyékot kapott.

Vonalak jelölése: lebegés [szerkesztés]

Amikor a felhasználó az egeret az asztal fölé viszi, a megfelelő adatcellát és a hozzá tartozó táblázat sort színesen kiemelik:

Példa szövetségi államok szürkére szürke [szerkesztés]

A következőkben a Szövetségi Köztársaság szövetségi államait mutatjuk be egy második példában.