Tabele: przykłady zastosowania.

table, td, th{
	border: solid thin black;
}
th{
	font-size: small;
}
td{
	padding: 3px;
}
caption{
	font-style: italic;
	margin: 3px;
}
.caption1{
	caption-side: bottom;
}
.caption2{
	caption-side: left;
}
.colgrp1{
	background: pink;
}
.table1{
	border-collapse: collapse;
}
.tbody1{
	color: blue;
}
.tfoot1{
	font-weight: bold;
	color: green;
}

Przykład zastosowania elementów: tr, td, th, caption, colspan

Poniżej znajduje się przykład najprostszej tabelki. Złączenie dwóch komórek w jedną osiągnięto dzięki atrybutowi colspan="X" gdzie X oznacza ilość złączonych komórek w poziomie. To samo można osiągnąć w pionie stosując atrybut rowspan="X". Element caption zastosowano do nadania opisu tabeli.

<table summary="Tabelka testowa. Zastosowanie TR, TD, TH, CAPTION, COLSPAN">
<caption>Moja tabelka testowa</caption>
<tr><th>LP.</th><th colspan="2">Imię i nazwisko</th><th>Lubiany napój</th><th>Lubiany posiłek</th></tr>

<tr><td>1</td><td>Jan</td><td>Kowal</td><td>Kawa</td><td>Pizza</td></tr>
<tr><td>2</td><td>Marek</td><td>Koleś</td><td>Cola</td><td>Czekolada</td></tr>
<tr><td>3</td><td>Andrzej</td><td>Nicpoń</td><td>Piwo</td><td>Pizza</td></tr>
<tr><td>4</td><td>Jan</td><td>Nowak</td><td>Kawa</td><td>Frytki</td></tr>
<tr><td>5</td><td>Roman</td><td>Biertych</td><td>Woda</td><td>Pigułki</td></tr>
</table>

Przykład zastosowania elementów: colgroup i col (style przypisywane kolumnom)

Moja tabelka testowa
LP.	Imię i nazwisko	Lubiany napój	Lubiany posiłek
1	Jan	Kowal	Kawa	Pizza
2	Marek	Koleś	Cola	Czekolada
3	Andrzej	Nicpoń	Piwo	Pizza
4	Jan	Nowak	Kawa	Frytki
5	Roman	Biertych	Woda	Pigułki

Poniżej przedstawiam przykłady zastosowania elementów colgroup i col. Oba elementy służą do grupowania komórek znajdujących się w jednej kolumnie. Dzięki temu można np. nadać styl wszystkim komórkom w danej kolumnie, przypisując go tylko jednemu elementowi.

<table summary="Tabelka testowa. Zastosowanie COLGROUP i COL[span]">
<caption>Moja tabelka testowa</caption>
<colgroup>
<col />
<col span="2" class="colgrp1" />
<col />
<col />
</colgroup>
<tr><th>LP.</th><th colspan="2">Imię i nazwisko</th><th>Lubiany napój</th><th>Lubiany posiłek</th></tr>

<tr><td>1</td><td>Jan</td><td>Kowal</td><td>Kawa</td><td>Pizza</td></tr>
<tr><td>2</td><td>Marek</td><td>Koleś</td><td>Cola</td><td>Czekolada</td></tr>
<tr><td>3</td><td>Andrzej</td><td>Nicpoń</td><td>Piwo</td><td>Pizza</td></tr>
<tr><td>4</td><td>Jan</td><td>Nowak</td><td>Kawa</td><td>Frytki</td></tr>
<tr><td>5</td><td>Roman</td><td>Biertych</td><td>Woda</td><td>Pigułki</td></tr>
</table>

Moja tabelka testowa
LP.	Imię i nazwisko	Lubiany napój	Lubiany posiłek
1	Jan	Kowal	Kawa	Pizza
2	Marek	Koleś	Cola	Czekolada
3	Andrzej	Nicpoń	Piwo	Pizza
4	Jan	Nowak	Kawa	Frytki
5	Roman	Biertych	Woda	Pigułki

<table summary="Tabelka testowa. Zastosowanie COLGROUP[span]">
<caption>Moja tabelka testowa</caption>
<colgroup />
<colgroup span="2" class="colgrp1" />
<colgroup span="2" />

<tr><th>LP.</th><th colspan="2">Imię i nazwisko</th><th>Lubiany napój</th><th>Lubiany posiłek</th></tr>

<tr><td>1</td><td>Jan</td><td>Kowal</td><td>Kawa</td><td>Pizza</td></tr>
<tr><td>2</td><td>Marek</td><td>Koleś</td><td>Cola</td><td>Czekolada</td></tr>
<tr><td>3</td><td>Andrzej</td><td>Nicpoń</td><td>Piwo</td><td>Pizza</td></tr>
<tr><td>4</td><td>Jan</td><td>Nowak</td><td>Kawa</td><td>Frytki</td></tr>
<tr><td>5</td><td>Roman</td><td>Biertych</td><td>Woda</td><td>Pigułki</td></tr>
</table>

Moja tabelka testowa
LP.	Imię i nazwisko	Lubiany napój	Lubiany posiłek
1	Jan	Kowal	Kawa	Pizza
2	Marek	Koleś	Cola	Czekolada
3	Andrzej	Nicpoń	Piwo	Pizza
4	Jan	Nowak	Kawa	Frytki
5	Roman	Biertych	Woda	Pigułki

Atrybut span określa ile kolumn obejmuje dana grupa. Należy pamiętać, że suma wartości wszystkich atrybutów span musi równać się ilości kolumn - w przeciwnym wypadku tabelka się rozsypie. Brak atrybutu span w elemencie colgroup lub col jest równoznaczny z podaniem span="1".

Przykład zastosowania elementów: thead, tfoot i tbody (grupowanie ciała tabeli)

Element tbody określa ciało tabeli, czyli obszar w którym znajdują się dane. W ciele tabeli nie powinien znależć się ani nagłówek, ani stopka. W poniższym przykładzie do elementu tbody został przypisany styl formatujący czcionkę. Element thead określa nagłowek tabeli natomiast element tfoot określa stopkę. Elementy thead i tfoot muszą być zadeklarowane przed elementem tbody, przeglądarki mają jednak obowiązek generować te trzy elementy w następującej kolejności: thead, tbody i na końcu tfoot.

<table summary="Tabelka testowa. Zastosowanie THEAD, TFOOT i TBODY">
<caption>Moja tabelka testowa</caption>
<colgroup />
<colgroup span="2" class="colgrp1" />
<colgroup span="2" />
<thead>
<tr><th>LP.</th><th colspan="2">Imię i nazwisko</th><th>Lubiany napój</th><th>Lubiany posiłek</th></tr>
</thead>

<tfoot class="tfoot1">
<tr><td colspan="5">Suma: 5</td></tr>
</tfoot>

<tbody class="tbody1">
<tr><td>1</td><td>Jan</td><td>Kowal</td><td>Kawa</td><td>Pizza</td></tr>
<tr><td>2</td><td>Marek</td><td>Koleś</td><td>Cola</td><td>Czekolada</td></tr>
<tr><td>3</td><td>Andrzej</td><td>Nicpoń</td><td>Piwo</td><td>Pizza</td></tr>
<tr><td>4</td><td>Jan</td><td>Nowak</td><td>Kawa</td><td>Frytki</td></tr>
<tr><td>5</td><td>Roman</td><td>Biertych</td><td>Woda</td><td>Pigułki</td></tr>
</tbody>

</table>

Przykład zastosowania styli: border-collapse i caption-side

Moja tabelka testowa
LP.	Imię i nazwisko	Lubiany napój	Lubiany posiłek
Suma: 5
1	Jan	Kowal	Kawa	Pizza
2	Marek	Koleś	Cola	Czekolada
3	Andrzej	Nicpoń	Piwo	Pizza
4	Jan	Nowak	Kawa	Frytki
5	Roman	Biertych	Woda	Pigułki

Styl border-colapse powoduje następujące zachowania tabeli: przy wartości collapse ramki sąsiadujących komórek łączą się w jedną ramkę, przy wartości separate ramki sąsiadujących komórek nie łączą się w jedną ramkę. Druga opcja, jest ustawieniem domyślnym stylu. Jest to odpowiednik atrybutu cellspacing w HTML. Odległość między sąsiadującymi ramkami określa styl border-spacing.

Styl caption-side określa, po której stronie tabeli zostanie umieszcony element caption.

<table summary="Tabelka testowa. Zastosowanie THEAD, TFOOT i TBODY" class="table1">
<caption class="caption1">Moja tabelka testowa</caption>
<colgroup />
<colgroup span="2" class="colgrp1" />
<colgroup span="2" />
<thead>
<tr><th>LP.</th><th colspan="2">Imię i nazwisko</th><th>Lubiany napój</th><th>Lubiany posiłek</th></tr>
</thead>

<tfoot class="tfoot1">
<tr><td colspan="5">Suma: 5</td></tr>
</tfoot>

<tbody class="tbody1">
<tr><td>1</td><td>Jan</td><td>Kowal</td><td>Kawa</td><td>Pizza</td></tr>
<tr><td>2</td><td>Marek</td><td>Koleś</td><td>Cola</td><td>Czekolada</td></tr>
<tr><td>3</td><td>Andrzej</td><td>Nicpoń</td><td>Piwo</td><td>Pizza</td></tr>
<tr><td>4</td><td>Jan</td><td>Nowak</td><td>Kawa</td><td>Frytki</td></tr>
<tr><td>5</td><td>Roman</td><td>Biertych</td><td>Woda</td><td>Pigułki</td></tr>
</tbody>

</table>