CSS listák és táblázatok

A CSS lehetőséget ad arra, hogy a listák és táblázatok megjelenését teljesen testre szabjuk. Ez magában foglalja a felsorolásjelek stílusát, a sorszámozás típusát, valamint a táblázatok határainak, színeinek és méreteinek kialakítását.

Listák formázása

A listáknál a <list-style-type> tulajdonsággal határozhatjuk meg a felsorolás jeleit, például kör, négyzet, római szám vagy betű. Az unordered és ordered listák különféle stílusokat kaphatnak.

Az alábbi példák bemutatják, hogyan jelennek meg a listák különböző felsorolásjelek vagy számozási stílusok beállításával.

Táblázatok formázása

A táblázatok stílusozásához gyakran használjuk a border, padding és background tulajdonságokat. A <border-collapse> beállítással elérhetjük, hogy a szomszédos cellák határai összeolvadjanak.

A következő kód egy egyszerű táblázatot mutat be, amely tartalmaz fejlécet és két adat sort, alapvető CSS formázással.

Tippek listákhoz és táblázatokhoz

A listák és táblázatok átláthatóvá és könnyen olvashatóvá teszik a tartalmat, de a túlzott formázás zavaró lehet.

• Mindig ügyelj az olvashatóságra, például a táblázatoknál a sorkiemelés hasznos lehet.
• Ne használj túl sokféle listastílust egy oldalon, mert vizuálisan kaotikus hatást kelt.
• A reszponzív design érdekében engedd, hogy a táblázatok görgethetőek legyenek kisebb képernyőkön.