Tabele na stronie WWW

1. Ogólne ramy tabeli tworzy się za pomocą znaczników:
   <TABLE> </TABLE>
   Definicja tabeli musi być umieszczona między tymi dwoma znacznikami.

2. Wiersz tabeli tworzy ramy dla komórek z danymi. W ramach <TABLE> </TABLE> można umieścić wiele kolejnych definicji wierszy <TR> </TR>, dla przykładu:
   <TABLE>
   <TR> </TR>
   <TR> </TR>
   <TR> </TR>
   </TABLE>

3. Komórka tabeli (komórka to przecięcie wiersza i kolumny) <TD> </TD> - komórka zawiera konkretne dane. Między jej znacznikami można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego rzędu, na przykład:
   

   Wiersz 1 Komórka 1	Wiersz 1 Komórka 2	Wiersz 1 Komórka 3
   Wiersz 2 Komórka 1	Wiersz 2 Komórka 2	Wiersz 2 Komórka 3

   <TABLE>
   <TR><TD></TD><TD></TD><TD></TD></TR>
   <TR><TD></TD><TD></TD><TD></TD></TR>
   </TABLE>

4. Scalanie komórek wykonuje się za pomocą atrybutu COLSPAN (scalanie komórek w poziomie) lub ROWSPAN (scalanie komórek w pionie) umieszczonego w znaczniku <TD> pierwszej ze scalanych komórek, np.:
   

   Wiersz 1 Komórka 1
   Wiersz 2 Komórka 1	Wiersz 2 Komórka 2	Wiersz 2 Komórka 3

   <TABLE>
   <TR><TD COLSPAN="3"></TD></TR>
   <TR><TD></TD><TD></TD><TD></TD></TR>
   </TABLE>

Samouczek

TYTUŁ

<TABLE>
<CAPTION style="caption-side: wartość; text-align: wartość">Tytuł tabeli</CAPTION>
(...)
</TABLE>

Dopuszczalne wartości:
- CAPTION-SIDE:
  - top - tytuł górny (domyślnie)
  - bottom - tytuł dolny
- TEXT-ALIGN:
  - left - ustawienie przy lewej krawędzi tabeli (domyślnie)
  - right - przy prawej krawędzi
  - center - na środku

OBRAMOWANIE

Atrybuty obramowania ustawiamy za pomocą stylów:
- globalnie (w nagłówku strony) dla tabeli i komórki:
<STYLE>
TABLE {border-width: wartość; border-style: wartość (wartości); border-color: wartość}
TD {border-width: wartość; border-style: wartość (wartości); border-color: wartość}
</STYLE>
- lokalnie dla tabeli, np.:
<TABLE style="border-width: wartość; border-style: wartość (wartości); border-color: wartość">Zawartość tabeli</TABLE>
- lokalnie dla wybranej komórki, np.:
<TD style="border-width: wartość; border-style: wartość (wartości); border-color: wartość">Zawartość komórki</TD>

Styl obramowania określa się zgodnie z ruchem wskazówek zegara począwszy od krawędzi górnej.

Cecha BORDER-COLLAPSE określa model wyświetlania obramowania tabeli pomiędzy komórkami. Umieszcza się ją w znaczniku <TABLE>. Możliwe jest użycie obramowania w postaci pojedynczej linii (collapse) albo obramowania dla każdej komórki osobno, które będą od siebie odseparowane (separate), np.:

border-collapse: collapse

border-collapse: separate

TŁO

Tło tabeli lub poszczególnych komórek definiuje się za pomocą cechy BACKGROUND, np.:
- lokalnie dla tabeli:
<TABLE STYLE="background: kolor url(katalog/nazwa_pliku_tła)">
- lokalnie dla wybranej komórki:
<TD STYLE="background: kolor url(katalog/nazwa_pliku_tła)">

Więcej infomacji na temat formatowania tła znajdziesz na stronie "Tło na stronie WWW".

ODSTĘPY POMIĘDZY KOMÓRKAMI

Cecha BORDER-SPACING pozwala zdefiniować odstępy między komórkami tabeli.
Umieszcza się ją w znaczniku <TABLE> w następujący sposób:
<TABLE style="border-spacing: wartość (wartości)">Zawartość tabeli</TABLE>.

Wybrane (przykładowe) wartości BORDER-SPACING:

border-spacing: 0px

- odstęp poziomy	0px
- odstęp pionowy	0px

border-spacing: 10px 3px

- odstęp poziomy	10px
- odstęp pionowy	3px

ODSTĘPY WEWNĄTRZ KOMÓREK

Cecha PADDING określa pustą przestrzeń wokół danego elementu (np. wokół zawartości komórki tabeli). Przykładowe wartości:

padding: 1cm

padding: 5mm

padding: 5pt

padding: 0px

WYRÓWNANIE ZAWARTOŚCI KOMÓREK

Cecha VERTICAL-ALIGN umożliwia wyrównanie zawartości komórki w pionie. Przykładowe wartości:
- top - wyrównuje szczyt elementu do górnej krawędzi komórki,
- middle - ustawia element po środku wysokości komórki,
- bottom - wyrównuje podstawę elementu do dolnej krawędzi komórki.

Do wyrównania zawartości komórki w poziomie stosuje się cechę TEXT-ALIGN (patrz: Tekst na stronie WWW).

POZYCJONOWANIE TABELI

Odpowiednie wartości cechy MARGIN pozwalają umieścić tabelę po lewej lub prawej stronie, a także po środku strony internetowej, np.:
- margin-right: auto - pozwala wyrównać tabelę do lewej (wartość domyślna),
- margin-left: auto - pozwala wyrównać tabelę prawej,
- margin: auto - umieszcza tabelę po środku,
- margin-left: 50px - przesunie tabelę o 50px w lewo.

Tabelę można również otoczyć tekstem (podobnie jak w przypadku grafiki). W tym celu wykorzystać należy cechę FLOAT (patrz: Grafika na stronie WWW).