Aplikacje internetowe CSS - Formatowanie tabel

Wstęp Za pomocą kaskadowych arkuszy stylów można kontrolować wygląd tabel. Należy jednak przy tym pamiętać, że nazwy niektórych własności nie są takie same jak odpowiadające im atrybuty znaczników HTML.

Atrybuty tabeli i właściwości CSS Poniższa tabela pokazuje, które właściwości CSS odpowiadają poszczególnym atrybutom znaczników. Cel Atrybut tabeli Właściwości CSS Obramowanie border właściwości border Odstęp wewnątrz komórki cellpadding padding Odstęp między komórkami cellspacing border-spacing Szerokość tabeli width właściwości width oraz table-layout Obramowanie tabeli frame Wyrównanie align, valign właściwości text-align,  vertical-alignment

border: grubość rodzaj kolor Właściwości border Właściwość border służy do określania grubości(szerokość) obramowania, rodzaju i koloru dla określonego elementu tabeli. border: grubość rodzaj kolor Grubość obramowania możemy podawać w punktach, pikselach, cm, mm.

Rodzaje obramowań dotted - obramowanie w postaci kropek dashed - obramowanie w postaci kresek solid - obramowanie w postaci linii double - obramowanie w postaci podwójnej linii groove - obramowanie w postaci linii z rowkiem ridge - obramowanie w postaci linii z grzbietem inset - obramowanie w postaci linii zagłębionej outset - obramowanie w postaci linii wypukłej

border-collapse: wartość; Model obramowania Do określania czy komórki tabeli będą miały pojedyncze lub podwójne obramowanie służy właściwość border-collapse. border-collapse: wartość; Wartości: collapse - pojedyncze obramowanie separate - komórki są od siebie odseparowane, obramowanie podwójne

selektor {caption-side: wartość;} Tytuł tabeli selektor {caption-side: wartość;} Wyraz selektor ma zastosowanie do elementu caption – czyli znacznika odpowiadającego za tytuł w tabeli. Wartości: top - tytuł powyżej tabeli bottom - tytuł poniżej tabeli

table-layout: wartość; Szerokość tabeli Za szerokość tabeli odpowiada właściwość table-layout. table-layout: wartość; Wartości: auto - wielkość tabeli dostosowuje się do zawartości komórek (domyślnie) fixed - wielkość tabeli nie dostosowuje się do zawartości komórek

Odstępy między komórkami Odstępy pomiędzy komórkami tabeli określamy za pomocą właściwości border-spacing. border-spacing: wartości; Wartości: jedna wartość określa wszystkie odstępy dwie wartości (rozdzielone spacją) określają kolejno poziomy oraz pionowy odstęp

Odstępy wewnątrz komórki Do określania odstępów pomiędzy elementami komórek a obramowaniem służy właściwość padding. padding: góra prawa dół lewa lub padding: góra_dół lewo_prawo

Obramowania wokół pustych komórek Do określania czy obramowanie wokół pustych komórek tabeli ma zostać pokazane czy ukryte służy właściwość empty-cells. empty-cells: wartość; Wartości: show - pokaż obramowanie wokół pustych komórek hide - schowaj obramowanie wokół pustych komórek

Wyrównanie zawartości komórki w poziomie Do wyrównywania zawartości komórki — czyli elementu <td> lub <th> — służy właściwość text- align, która może przyjmować następujące wartości: left — wyrównanie do lewego marginesu, right — wyrównanie do prawego marginesu, center — wyśrodkowanie, justify — wyrównanie do obu marginesów (justowanie).

Wyrównanie zawartości komórki w pionie Z kolei za wyrównanie zawartości komórki w pionie odpowiada właściwość vertical-align, której można przypisać jedną z następujących wartości: top — wyrównanie do górnego marginesu, bottom — wyrównanie do dolnego marginesu, middle — wyśrodkowanie.