fbpx

Style tabel

Obramowanie tabel

Tabela wykonana w języku HTML w domyślnym stylowaniu będzie zazwyczaj miała podwójne obramowanie, jeżeli zechcemy zmienić tą własciwosć, albo po prostu upewnić się, że w różych przeglądarkach tabele będą wyglądać tak samo możemy skorzystać z właściwości border-collapse.

table {
    border-collapse: collapse;
}
Kolor i grubość obramowania

Do określania tych parametrów służy atrybut border, który przyjmuje trzy wartości. Pierwsza określa grubość, druga rodzaj obramowania, a trzecia kolor.

table, th, td {
    border: 1px solid gray;
}

Ponieważ zarówno tabela, komórki nagłówka, jak i zwykłe komórki maja swoje obramowania, dla wszystkich tych elementów na raz ustawiliśmy jednolite obramowanie. Ciągłą linię, grubości 1 pixela, w kolorze szarym.

W CSS dostępnych jest więcej rodzajów obramowania:

  • solid
  • dashed
  • dotted
  • double
  • groove
  • ridge
  • inset
  • outset

W tabelach możemy też stosować obramowanie wyłącznie po wybranych stronach komórek dzieki atrybutom border-topborder-rightborder-bottom i border-left.

Pozostałe atrybuty tabel

Dla tabel można stosować również inne atrybuty.

Szerokość i wysokość
th, td {
    height: 30px;
    wdth: 100px;
}

Powyższy przykład określa wysokość komórek na 30 pixeli i ich długość na 100 pixeli.

Padding
th, td {
    padding: 10px;
}

Padding powoduje, że tekst wewnątrz komórek nie będzie bezpośrednio przylegał do ich obramowania. W tym przypadku zostanie od nich odsunięty o 10 pixeli.

Tła dla komórek
th, td {
    background-color: red;
}

W tym przypadku przypisaliśmy dla komórek czerone tło.

Naprzemienne kolorowanie wierszy

Aby wiersze zostały pokolorowane w taki sposób możemy stworzyć klasy dla wierszy (znacznik tr) parzystych i nieparzystych

tr.nieparzysty {
    background-color: red;
}
tr.parzysty {
    background-color: blue;
}

Dzięki takiemu rozwiązaniu możemy dopisać w kodzie HTML class=”nieparzysty” i class=”parzysty” naprzemiennie do znaczników tr w tabeli.

udostępnij:
Gratulacje!
Wniosek został wysłany prawidłowo.
Dziękujemy za przesłanie zapytania. Skontaktujemy się z Tobą najszybciej jak to możliwe.