HTML5 - tabele

Poniżej przedstawiono większość znaczników języka html dotyczących tabel. Elementy przedstawione w szarych wierszach tabeli nie powinny być stosowane na stronie - część z nich nie działa - wskazane używanie arkusza stylów. Szukaj wtedy w zakładce selektory

W określeniach przedstawiono informacje dotyczące znaczników zamykających. Literki O, W, Z oznaczają:

O - opcjonalny - możemy ale nie musimy go wstawiać;
W - wymagany - musi być.
Z - zabroniony - nie wolno wstawiać - dotyczy znaczników zamknięcia.
np. O - znacznik zamknięcia opcjonalny (nie musisz go wstawiać).

Jeśli nie działają podane określenia w html-u, stosuj style.
Tabele
Określenie Znacznik Przykład/Uwagi Efekt
Tabela

W table <table> <tr> <th>11</th> <th>12</th> <th>13</th> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> <table>
11 12 13
21 22 23
31 32 33
Wersja z obramowaniem – w <table> dopisujemy border: <table border> lub <table border="5"> gdy chcemy określić grubość obramowania tabeli (nie komórek).
11 12 13
21 22 23
31 32 33
Wiersz tabeli

O tr
Komórka nagłówkowa tabeli

O th
Komórka tabeli

O td
PARAMETRY Polecenia do formatowania tabel mają szereg parametrów. Poniżej zestawiłem kilka z nich wraz z parametrami. O ile to możliwe zalecane jest formatowanie za pomocą arkusza stylów.
Tytuł tabeli caption <table border> <caption>Tytuł tabeli</caption> <tr> <td>kom 1</td> <td>kom 2</td> </tr> </table>

Tytuł tabeli
kom 1 kom 2
Obramowanie tabeli border <table> <tr> <td>k1</td> <td>k2</td> </tr> </table>

<table border=""> <tr> <td>k1</td> <td>k2</td> </tr> </table>
k1 k2

k1 k2
Border lub border="" służy do pokazania obramowania tabeli (i komórek). Ponieważ obramowanie dotyczy komórek, widzimy podwójne obramowania komórek. Możemy to zmienić za pomocą arkusza stylów.
Szerokość obramowania border <table border="3"> <tr> <td>k1</td> <td>k2</td> </tr> </table>

<table border="8"> <tr> <td>k1</td> <td>k2</td> </tr> </table>
k1 k2

k1 k2
Odległości między komórkami

Odstępy w komórkach cellspacing

cellpadding <table border cellspacing="4"> <caption>1. Cellspacing = 4</caption> <tr> <td>11</td> <td>12</td> </tr> <tr> <td>21</td> <td>22</td> </tr> </table>
1. Cellspacing = 4
11 12
21 22

2. Cellspacing = 12
11 12
21 22

3. Cellpadding = 4
11 12
21 22

4. Cellpadding = 16
11 12
21 22
Szerokość tabeli width <table border width="120"> <tr> <td>k1</td> <td>k2</td> </tr> </table>

<table border="" width="200"> <tr> <td>k1</td> <td>k2</td> </tr> </table>

<table border="" width="90%"> <tr> <td>k1</td> <td>k2</td> </tr> </table>
k1 k2

k1 k2

k1 k2
Szerokość komórki width <table border> <tr> <td width="100">k1</td> <td width="50">k2</td> </tr> </table>

<table border="" width="200"> <tr> <td width="60%">k1</td> <td width="40%">k2</td> </tr> </table>
k1 k2

k1 k2
Wysokość komórek (wiersza tabeli) height <table border > <tr height="80"> <td>k1</td> <td>k2</td> </tr> <tr height="50"> <td>k3</td> <td>k4</td> </tr> </table>
k1 k2
k3 k4
Łączenie komórek colspan

rowspan <table border> <tr> <th>ng1</th> <th>ng2</th> <th>ng3</th> </tr> <tr> <td colspan="2">aa i ab</td> <td>ac</td> </tr> <tr> < td>ba</td> <td>bb</td> <td rowspan="2">bc i cc</td> </tr> <tr> <td>ca</td> <td>cb</td> </tr> <table>
ng1 ng2 ng3
aa i ab ac
ba bb bc i cc
ca cb
W tabeli określono dodatkowo kolor tła łączonych komórek.
Krawędzie tabeli zewnętrzne frame <table frame="void" rules="none"> <tr> <th>11</th><th>12</th><th>13</th> </tr> <tr> <td>21</td><td>22</td><td>23</td> </tr> <tr> <td>31</td><td>32</td><td>33</td> </tr> <table>
frame="none" rules="none"
11 12 13
21 22 23
31 32 33

frame="above" rules="none"
11 12 13
21 22 23
31 32 33

frame="below" rules="none"
11 12 13
21 22 23
31 32 33

frame="vsides" rules="none"
11 12 13
21 22 23
31 32 33

frame="hsides" rules="none"
11 12 13
21 22 23
31 32 33

frame="lhs" rules="none"
11 12 13
21 22 23
31 32 33

frame="rhs" rules="none"
11 12 13
21 22 23
31 32 33

frame="box" rules="none"
11 12 13
21 22 23
31 32 33
Krawędzie tabeli wewnętrzne rules <table frame="void" rules="rows"> <tr> <th>11</th><th>12</th><th>13</th> </tr> <tr> <td>21</td><td>22</td><td>23</td> </tr> <tr> <td>31</td><td>32</td><td>33</td> </tr> <table>
frame="void" rules="rows"
11 12 13
21 22 23
31 32 33

frame="void" rules="cols"
11 12 13
21 22 23
31 32 33

frame="void" rules="all"
11 12 13
21 22 23
31 32 33

frame="vsides" rules="all"
11 12 13
21 22 23
31 32 33

frame="hsides" rules="all"
11 12 13
21 22 23
31 32 33
Poziome wyrównanie danych w komórkach align
<table border> <tr> <th>11</th> <th>12</th> <th>13</th> </tr> <tr> <td align="right">21</td> <td align="right">22</td> <td align="right">23</td> </tr> <tr> <td align="center">31</td> <td align="center">32</td> <td align="center">33</td> </tr> <tr> <td align="left">41</td> <td align="left">42</td> <td align="left">43</td> </tr> <table>
11 12 13
21 22 23
31 32 33
41 42 43
Pionowe wyrównanie danych w komórkach valign <table border> <tr height="80"> <td valign="top">k1</td> <td valign="bottom">k2</td> </tr> <tr height="50"> <td valign="top" align="center">k3</td> <td valign="middle" align="right">k4</td> </tr> </table>
k1 k2
k3 k4
Część nagłówkowa tabeli

O thead
Dla tabel często również podaje się tzw. nagłówek i stopkę. Nagłówek pojawi się na szczycie tabeli, a stopka - na dole.
Łączenie wierszy w grupy umożliwia później odnoszenie się do takiej grupy jako do całości. Dzięki temu możemy nadać od razu całej grupie
Określony rodzaj formatowania - ustawienie tekstu w komórkach
Kolor tła
Usunąć część krawędzi wewnętrznych w tabeli
Ciało tabeli

O/O tbody
Stopka tabeli

O tfoot
<table width="200" border> <thead> <tr> <td colspan="2">Nagłówek</td> </tr> </thead> <tfoot> <tr> <td colspan="2">Stopka</td> </tr> </tfoot> <tbody> <tr> <td>kom 11</td> <td>kom 21</td> </tr> <tr> <td>kom 12</td> <td>kom 22</td> </tr> </tbody> </table>
Część nagłówkowa
Stopka
kom 11 kom 21
kom 12 kom 22
Grupa kolumn tabeli colgroup
<table frame="void" rules="groups"> <colgroup span="2" bgcolor="lightblue"> <colgroup span="1"> <colgroup span="2" bgcolor="pink"> <tr> <th>11</th> <th>12</th> <th>13</th> <th>14</th> <th>15</th> </tr> <tr> <td align="center">21</td> <td align="center">22</td> <td align="center">23</td> <td align="center">24</td> <td align="center">25</td> </tr> <tr> <td align="center">31</td> <td align="center">32</td> <td align="center">33</td> <td align="center">34</td> <td align="center">35</td> </tr> <tr> <td align="center">41</td> <td align="center">42</td> <td align="center">43</td> <td align="center">44</td> <td align="center">45</td> </tr> <table>
11 12 13 14 15
21 22 23 24 25
31 32 33 34 35
41 42 43 44 45
Po zastosowaniu parametrów: frame="void" rules="groups", możemy graficznie rozdzielić dane w pewnych typach tabel.