Download
1 / 13
130 likes | 270 Views
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 C SS.
E N D
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.
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
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
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
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.
