Tabelki

Tabelki

Stosowanie tabelek do tworzenia układu strony odeszło już w niepamięć w większości przypadków. Niemniej jednak same tabelki jako takie stosujemy do prezentacji danych, czyli do tego do czego tabelka służy.

Nie zamierzam opisywać jak się tworzy tabelkę w html, bo do tego są inne poradniki, lecz zajmę się niektórymi aspektami stylowania tabelki, które mogą się okazać przydatne.

Cechy tabelki html:

  • Tabelka zachowuje się jak element blokowy, czyli każda tabelka ustawi się w nowej linii.
  • tabelka zajmuje tyle miejsca ile potrzebuje aby pomieścić swoją zawartość, chyba że ustawimy jej szerokość w css. Jeśli zawartość jest większa, będzie się zawijać. Jeśli ustawimy  white-space: nowrap, wtedy zawartość nie będzie się zawijać i rozszerzy tabelkę wszerz.
  • komórki tabelki nie zawijają się, dlatego jeśli utworzy się ich więcej tak, że się nie mieszczą, rozepchną one tabelkę tak, że jej szerokość się zwiększy.

Reguły css szczególnie przydatne w tabelkach

  1. vertical-align – ustawia wyrównanie tekstu w pionie, co bardzo przydaje się do ładnego ustawienia zawartości tabelek
  2. white-space – ustawia jak zawartość ma się zawiajać w tabelce
  3. border-collapse – collapse – usuwa przerwę między komórkami i kolumnami, separate ustawia przerwę. Przy separate można ustawić wielkość przerwy stosująć border-spacing
  4. width – szerokość
  5. border – brzeg
  6. table-layout – auto – szerokość kolumn będzie zależna od ich zawartości, fixed – kolumny będą tej samej szerokości bez względu na ich zawartość

Przydatne style dla tabel

  1. kolorowanie wierszy – zdecydowanie ulatwia czytanie danych z tabelki, gdy wiersze różnią się kolorem. Można to zrobić używając kolorowego tła (lepiej jasnoszarego) dla tbody tr:nth-child(odd)
  2. podświetlanie wierszy lub kolumn po najechaniu myszą – zmieniamy kolor tła dla td:hover, th:hover jeśli chcemy podswietlić komórki tabelki,  tbody tr:hover – podświetlenie wiersza
  3. zaokrąglone rogi – w tabelce są możliwe tylko wtedy gdy ma ona ustawiony border-collapse: separate

To tyle ciekawostek jesli chodzi o tabelki. Obecni największy problem to responsywna tabelka. Dla moich zastosowań najlepiej sprawdził się skrypt tablesaw.

 

na podstawie: https://css-tricks.com/complete-guide-table-element/

One Comment
  1. Dziękuje za artykuł i przydatne reguły do stylowania. Ma Pani rację, że nie robi się już stron w tabelach ale z samych tabel korzysta się już dosyć często żeby przejrzyście przedstawić większą ilość danych. Pozdrawiam

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.