Tabele#
Tytuł tabeli#
<table> <caption align="ustawienie">Tytuł tabeli</caption> ... </table>
Możliwe jest podanie atrybutu align="ustawienie"
o następujących wartościach:
top
- tytuł górny (domyślnie)bottom
- tytuł dolnyleft
- ustawienie przy lewej krawędzi tabeliright
- ustawienie przy prawej krawędzi tabelicenter
- ustawienie na środku (domyślnie)
Polecenie pozwala nadać tabeli odpowiedni podpis (tytuł) w formie nagłówka nad lub pod tabelą, który wyjaśnia jej treść. Element caption
musi znajdować się zaraz po znaczniku table
i nie może zawierać żadnych elementów blokowych. Niektóre przeglądarki mają problemy z interpretacją atrybutów align="left"
i align="right
".
Obecnie atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.
Domyślne położenie podpisu (center
):
<table border="3">
<caption>Podpis tabeli</caption>
<tr>
<td>komórka1</td><td>komórka2</td><td>komórka3</td>
</tr>
<tr>
<td>komórka4</td><td>komórka5</td><td>komórka6</td>
</tr>
<tr>
<td>komórka7</td><td>komórka8</td><td>komórka9</td>
</tr>
</table>
Efekt:
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
Podpis na górze (top
):
<table border="3">
<caption style="caption-side: top;">Podpis tabeli</caption>
<tr>
<td>komórka1</td><td>komórka2</td><td>komórka3</td>
</tr>
<tr>
<td>komórka4</td><td>komórka5</td><td>komórka6</td>
</tr>
<tr>
<td>komórka7</td><td>komórka8</td><td>komórka9</td>
</tr>
</table>
Efekt:
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
Podpis na dole (bottom
):
<table border="3">
<caption style="caption-side: bottom;">Podpis tabeli</caption>
<tr>
<td>komórka1</td><td>komórka2</td><td>komórka3</td>
</tr>
<tr>
<td>komórka4</td><td>komórka5</td><td>komórka6</td>
</tr>
<tr>
<td>komórka7</td><td>komórka8</td><td>komórka9</td>
</tr>
</table>
Efekt:
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
Podpis przy lewej krawędzi (left
):
<table border="3">
<caption style="caption-side: left;">Podpis tabeli</caption>
<tr>
<td>komórka1</td><td>komórka2</td><td>komórka3</td>
</tr>
<tr>
<td>komórka4</td><td>komórka5</td><td>komórka6</td>
</tr>
<tr>
<td>komórka7</td><td>komórka8</td><td>komórka9</td>
</tr>
</table>
Efekt:
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
Podpis przy prawej krawędzi (right
):
<table border="3">
<caption style="caption-side: right;">Podpis tabeli</caption>
<tr>
<td>komórka1</td><td>komórka2</td><td>komórka3</td>
</tr>
<tr>
<td>komórka4</td><td>komórka5</td><td>komórka6</td>
</tr>
<tr>
<td>komórka7</td><td>komórka8</td><td>komórka9</td>
</tr>
</table>
Efekt:
komórka1 | komórka2 | komórka3 |
komórka4 | komórka5 | komórka6 |
komórka7 | komórka8 | komórka9 |
W powyższych przykładach zaprezentowałem analogiczne polecenia stylów.