Aplikacje internetowe

Prezentacja na temat: "Aplikacje internetowe"— Zapis prezentacji:

1 Aplikacje internetowe
CSS - 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 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

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

5 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

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ó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

10 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

11 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

12 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).

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