Bevezetés a CSS táblastílushoz

Miért használjuk a CSS-t, bár HTML táblázatokat is használhatunk, azért, mert a HTML-táblázatban a táblázatokon alapuló oldal elrendezés gyakran lassabban jelenik meg, mint egy ezzel egyenértékű CSS-alapú elrendezés; ez különösen igaz a sok tartalommal rendelkező oldalakra. A táblákat nem szabad elrendezési segédanyagként használni. És ha HTML táblázatokat építünk stílusok vagy attribútumok nélkül a böngészőben, akkor szegély nélkül jelennek meg. Az asztal stílusával a CSS javíthatja annak megjelenését.

A CSS táblázatok megértése és használata meglehetősen egyszerű. Csak arra kell emlékezni, hogy a HTML-tábla alapvető elemei milyen CSS megjelenítési tulajdonságokkal rendelkeznek. A CSS segítségével képesek vagyunk elegáns táblákat készíteni.

Mi a CSS táblastílus?

A CSS (lépcsőzetes stíluslapok) táblázata leírja, hogyan lehet sorokat és oszlopokat elrendezni. A HTML táblázatokra alkalmazott alapértelmezett CSS egy CSS tábla.

  • A CSS megtervezte és újratervezte a rugalmasságot.
  • Ez azt jelenti, hogy a CSS-alapú elrendezés biztosítja, hogy minden stílusát (azaz a kisebb változásoktól a fő szabályokig) egy helyre helyezze.
  • Ha megváltoztatja az abban a stíluslapban beállított elrendezési szabályokat, és ez befolyásolja az összes hivatkozó oldalt.
  • A CSS-alapú oldalrendezés általában gyorsabban jelenik meg a képernyőn, sőt a letöltés is gyorsabb, mint az asztali alapú.

CSS táblázatstílus tulajdonságai

Az alábbiakban bemutatjuk a CSS táblázati stílusok különböző tulajdonságait:

1. A határ összeomlása

Ez azt jelzi, hogy a táblázat celláinak körvonalait el kell-e választani, vagy össze kell-e szűkíteni.

Szintaxis: border-collapse: separate|collapse|initial|inherit;

  • Szegély összeomlása: külön: Akkor használják, hogy a szomszédos celláknak megvannak a saját és egymástól független szegélyei, amelyek nincsenek megosztva.

Szintaxis

border-collapse: separate;

A szegély-összeomlás tulajdonsághoz beállított alapértelmezett érték külön van. Amikor elválasztják egymástól, a böngészők néhány pixel helyet hagynak minden cellába a szegélytávolság tulajdonság használatával.

Kód

Kimenet:

  • Határ összeomlás: összeomlás: amikor a border-collapse tulajdonságot összeomlásra állítja, az eltávolítja a cellák közötti teret.

Szintaxis

border-collapse: collapse;

Kód

Kimenet :

Még akkor is, ha kiküszöböli ezt a helyet, ha a HTML-címke cellába helyezésének attribútumát 0-ra állítja, a böngészők továbbra is dupla szegélyeket jelenítenek meg. Vagyis az egyik cella alsó határa az alábbi cella felső határa felett jelenik meg, ami a szegélyek megduplázódását idézi elő. Ha a szegély-összeomlás tulajdonságot összeomlásra állítja, akkor egyaránt megszűnik a cellák közötti tér, és ez a határvonalak megduplázódik.

  • Szegély-összeomlás: kezdeti: A szegély-összeomlás tulajdonság alapértelmezett értékére állítására szolgál.
  • Határ összeomlás: öröklés: akkor használják, amikor a határ összeomlás tulajdonság a szülő elemekből örököl. Ez a tulajdonság csak akkor működik, ha a címke.

    Értékek: összeomlás, külön, kezdeti, öröklés;

    2. Határok közötti távolság

    Beállítja a szomszédos szegélyeket és az asztal körülvevő tartalmat. Ez hasonló a címke cellák térközéhez

    attribútum, kivéve, ha van egy opcionális második értéke. Ez a tulajdonság csak akkor működik, ha a
    címke.

    Szintaxis

    border-spacing: Length|initial|inherit;

    A szegélytávolság általában egy vagy két hosszértéket vesz igénybe. Ebben csak egy értéket ad meg, akkor meghatározza mind a vízszintes, mind a függőleges távolságot a cellák között.

    Kód

    Kimenet:

    Ebben az esetben, ha két értéket ad meg, akkor az első érték meghatározza a cellák közötti vízszintes távolságot (az egyes cellák mindkét oldalán lévő teret), a második érték pedig a cellák közötti függőleges távolságot. (az a terület, amely elválasztja az egyik cella alját az alatta lévõ tetejétõl).

    3. Képaláírás-oldal

    A képaláírási oldal tulajdonsága határozza meg a táblafelirat elhelyezését. A táblázat feliratainak alkalmazásakor ez a tulajdonság meghatározza, hogy a felirat megjelenik-e a táblázat tetején vagy alján. A képaláírás általában az asztal tetején jelenik meg.

    Szintaxis

    caption-side: top|bottom|initial|inherit;

    Ennek a tulajdonságnak lehet a négy érték egyikét:

    • Feliratok oldala: felül: Ez az alapértelmezett érték. Ebben a feliratot az asztal fölé helyezi.

    Szintaxis: caption-side:top;

    Kód

    Kimenet:

    • Feliratok oldala: alul: a képaláírást az asztal alá helyezi.

    Szintaxis: caption-side:bottom;

    Kód

    Kimenet:

    • Feliratok oldali: kezdeti: A tulajdonság alapértelmezett értékére állítására szolgál.
    • Feliratoldal: öröklés : ezt a tulajdonságot a szülő eleméből örökli .

    Értékek: felső, alsó, kezdeti, öröklődő;

    4. Üres cellák

    Azt mondja a böngészőnek, hogy megjelenjen-e egy teljesen üres cellás cellát. Ez ellenőrzi a cellák szegélyeinek és háttérének megjelenítését, amelyek nem tartalmaznak látható tartalmat egy olyan táblázatban, amely az elválasztott szegélyek modelljét használja.

    Szintaxis: empty-cells: show|hide|initial|inherit;

    Ennek a tulajdonságnak lehet a négy érték egyikét:

    • Üres cella: show: Ez a tulajdonság az üres cella szegélyeinek megjelenítésére szolgál.

    Szintaxis: empty-cells: show;

    Kód

    Kimenet:

    • Üres cella: elrejtés: Ezt a tulajdonságot használják az üres cella szegélyeinek elrejtésére.

    Szintaxis: empty-cells: hide;

    Kód

    Kimenet:

    • Üres cella: kezdeti : A tulajdonságot az alapértelmezett értékre állítja.
    • Üres cella: öröklés : ezt a tulajdonságot a szülő eleméből örökli .

    Értékek: megmutatni, elrejteni, kezdeni, öröklni;

    5. Táblázat-elrendezés

    Szabályozza, hogy a webböngésző hogyan rajzol egy táblát, és kissé befolyásolhatja a böngésző által megjelenített sebességét. Ennek a tulajdonságnak lehet a négy érték egyikét.

    Szintaxis: table-layout: auto|fixed|initial|inherit;

    Az alapértelmezett tulajdonság az auto.

    1. Táblázat-elrendezés: automatikus: Az auto automatikusan beállítja az elemek szélességét, hogy illeszkedjenek a tartalomhoz.

    2. Táblázat - elrendezés: rögzített : A rögzített beállítás arra kényszeríti a böngészőt, hogy az összes oszlopot ugyanolyan szélességűvé tegye, mint az első sor oszlopai. Ha a tartalom szélesebb, mint az első sor, akkor a tartalmat becsomagolják, levágják vagy meghosszabbítják a cellákon kívül.

    Kód

    Kimenet:

    3. Táblázat-elrendezés: kezdeti: A tulajdonságot az alapértelmezett értékre állítja.

    4. Táblázat-elrendezés: öröklés : ezt a tulajdonságot a szülő eleméből örökli .

    Következtetés

    A CSS segítségével elegáns táblákat készíthetünk, és javíthatjuk az asztal megjelenését.

    Ajánlott cikkek

    Ez a CSS Table Styling útmutatója. Itt tárgyaljuk a tulajdonságokat kódokkal, kimenetekkel és a CSS tábla stílusának szintaxisával. Megnézheti az adott cikkeket is, hogy többet megtudjon -

    1. A CSS előnyei
    2. A CSS felhasználásai
    3. Bevezetés a CSS-be
    4. CSS szöveg formázása

    Kategória:

    Webfejlesztő eszközök