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;
}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:
W tabelach możemy też stosować obramowanie wyłącznie po wybranych stronach komórek dzieki atrybutom border-top, border-right, border-bottom i border-left.
Dla tabel można stosować również inne atrybuty.
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.
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.
th, td {
background-color: red;
}W tym przypadku przypisaliśmy dla komórek czerone tło.
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.
