Stylowanie list i tabel

Stylowanie list i tabel w CSS to ważny element przy projektowaniu przejrzystych i estetycznych stron internetowych. Dzięki różnorodnym właściwościom CSS możemy łatwo zmieniać wygląd list oraz tabel, aby dostosować je do designu strony

Stylowanie list

W CSS możemy stylizować zarówno listy uporządkowane (ol), jak i listy nieuporządkowane (ul). Oto kilka kluczowych właściwości.

• Właściwość list-style-type
  • square - kwadratowe znaczniki dla listy nieuporządkowanej
  • decimal - numeryczne znaczniki dla listy uporządkowanej
• Właściwość list-style-position
  • inside - znacznik znajduje się wewnątrz elementu listy
  • outside - znacznik znajduje się na zewnątrz elementu listy (domyślne)

ul {
  list-style-type: square;
}

ol {
  list-style-type: decimal;
}

ul {
  list-style-position: inside;
}

/* Zamiast punktora listy możemy użyć dowolnego zdjęcia */
ul {
  list-style-image: url('bullet.png');
}

   See the Pen    Untitled by EE-Informatyk.pl (@eeinformatyk)   on CodePen. 
 

Stylowanie tabel

Tabela to struktura zbudowana z wierszy i kolumn, którą możemy stylizować, aby poprawić czytelność i estetykę danych.

• Właściwość border-collapse
  • collapse - obramowania komórek są połączone
  • separate - obramowania komórek są oddzielnie (domyślnie)
• Właściwość border-spacing
  • Jeśli border-collapse jest ustawione na separate, możemy kontrolować odstępy między komórkami za pomocą border-spacing.
• Właściwość text-align
  • Właściwość text-align pozwala ustawić wyrównanie tekstu wewnątrz komórek tabeli.
• Właściwość padding
  • Aby poprawić wygląd tabeli i sprawić, że tekst wewnątrz komórek będzie miał więcej miejsca, możemy dodać padding.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Alternatywne kolory wierszy

Często stosuje się różne kolory dla parzystych i nieparzystych wierszy, aby zwiększyć czytelność tabeli.

tr:nth-child(even) {
  background-color: #f2f2f2;
}

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Podsumowanie

Stylowanie list i tabel w CSS pozwala na pełną kontrolę nad wyglądem tych elementów. Od zmiany znaczników list po stylizację komórek tabeli — odpowiednie zastosowanie CSS umożliwia tworzenie przejrzystych i estetycznych układów danych na stronach internetowych.