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 -
- A CSS előnyei
- A CSS felhasználásai
- Bevezetés a CSS-be
- CSS szöveg formázása