Tabele

Uwaga: nie wszystkie elementy stylów są akceptowane przez przeglądarki, w których rozpoczęto implementację stylów.

Położenie tytułu tabeli

Tytuł tabeli może być położony nad tabelą (caption-side: top), pod nią (caption-side: bottom), na lewo (caption-side: left) lub na prawo od niej (caption-side: right). Polecenie jest interpretowane przez Operę i Mozillę.

<table>
<caption STYLE="caption-side: left">Tytuł tabeli</caption>
...
</table>

Tytuł tabeli
aa bb cc
ee ff gg hh

Ilustracja dla posiadaczy IE.

Rozmiar: 2161 bajtów

Obramowanie pustych komórek

Puste komórki mogą mieć wyświetlane (empty-cells: show) lub chowane (empty-cells: hide) obramowanie. Polecenie jest interpretowane przez Operę i Mozillę.

<table border="1" STYLE="empty-cells: show">
</table>

aa bb cc
ee ff gg hh

Ilustracja dla posiadaczy IE

Rozmiar: 1788 bajtów

<table border="1" STYLE="empty-cells: hide">
</table>

aa bb cc
ee ff gg hh

Ilustracja dla posiadaczy IE

Rozmiar: 1788 bajtów

Generowanie układu tabeli

Tabela może być generowana na ekranie w dwojaki sposób. Albo szybko są wyświetlane kolumny (table-layout:fixed), zaś ich szerokość jest po chwili dopasowywana do zaplanowanych rozmiarów, albo też cała tabela jest generowana we właściwych rozmiarach w pamięci (co trwa dłużej), a dopiero po chwili wyświetlana (table-layout:auto). Oczywiście ma to znaczenie w przypadku bardzo dużych tabel. Polecenie jest interpretowane przez wszystkie nowe wersje przeglądarek.

<table STYLE="table-layout: fixed">
...
</table>

<table STYLE="table-layout: auto">
...
</table>

Odstępy między komórkami

Odstępy między komórkami można ustawiać także za pomocą stylów, definiując osobno odstępy poziome i pionowe. Polecenie interpretują Opera i Mozilla.

Odstępy poziome i pionowe ustalone jednym parametrem.

<table border="1" STYLE="border-spacing: 1cm">

aa bb cc dd
ee ff gg hh

Ilustracja dla posiadaczy IE

Rozmiar: 2605 bajtów

Odstępy poziome i pionowe ustalone oddzielnie.

<table border="1" STYLE="border-spacing: 1cm 0.5cm">

aa bb cc dd
ee ff gg hh

Ilustracja dla posiadaczy IE

Rozmiar: 2605 bajtów

Kondensowanie wewnętrznych obramowań

Grubość wewnętrznych obramowań komórek ustalona w definicji stylu dotyczy każdej komórki z osobna. Powoduje to, że obramowania komórek "dodają się" do siebie. Użycie stylu border-collapse: collapse pozwala je zlać ze sobą, co może poprawić wygląd. Można jednak zachować odstępy między komórkami za pomocą border-collapse: separate. Polecenie jest interpretowane przez nowsze wersje przeglądarek.

<table STYLE="border-collapse: collapse">

aa bb cc dd
ee ff gg hh

<table STYLE="border-collapse: separate">

aa bb cc dd
ee ff gg hh