1 / 13

Aplikacje internetowe

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.

kaye-moon
Download Presentation

Aplikacje internetowe

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

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

More Related