1 Aplikacje internetoweCSS - Formatowanie tabel

2 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.

3 Atrybuty tabeli i właściwości CSSPoniż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

4 border: grubość rodzaj kolorWł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.

5 Rodzaje obramowań dotted - obramowanie w postaci kropekdashed - 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

6 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

7 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

8 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

9 Odstępy między komórkamiOdstę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

10 Odstępy wewnątrz komórkiDo 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

11 Obramowania wokół pustych komórekDo 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

12 Wyrównanie zawartości komórki w poziomieDo wyrównywania zawartości komórki — czyli elementu lub — 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).

13 Wyrównanie zawartości komórki w pionieZ 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.