Tabela w HTML służy do prezentacji danych w formie właśnie tabeli. Dawniej tabel używano również do projektowania układu strony internetowej. Było to dosyć męczące jeżeli należało przenieść dane np. z prawej strony na lewą.
Do tworzenia tabel używa się znaczników:
|
Znacznik |
Opis |
|
<table> |
Określa rozpoczęcie tabeli. |
|
<thead> |
Określa głowę tabeli. |
|
<tbody> |
Określa ciało tabeli. |
|
<tfooter> |
Określa stopkę tabeli. |
|
<tr> |
Określa wiersz tabeli |
|
<th> |
Określa komórkę nagłówkową. |
|
<td> |
Określa komórkę „zwykłą” komórkę. |
|
<caption> |
Określa podpis tabeli. |
|
<colgroup> |
Określa grupę jednej lub kilku kolumn. |
|
<col> |
Określa kolumnę w <colgroup>. |
Podstawowa składnia tabeli:
<table>
<tr>
<td>komórka 1
<td>komórka 2
<td>komórka 3
</table>
Tabela z przykładu powyżej posiada 1 wiersz i 3 kolumny. W HTML 5 zamykanie znaczników <tr>, <td>, <th> nie jest wymagane.
Przykład opisu tabeli:
<table>
<caption>Przykładowa tabela</caption>
<thead>
<tr>
<th>komórka 1
<th>komórka 2
<th>komórka 3
</thead>
<tbody>
<tr>
<td>komórka 1
<td>komórka 2
<td>komórka 3
</tbody>
<tfoot>
<tr>
<td>komórka 1
<td>komórka 2
<td>komórka 3
</tfoot>
</table>
Znaczniki <thead>, <tbody>, <tfoot> nie są wymagane. Przeglądarki mogą te elementy wyświetlać w specjalny sposób np. nie pozwolą nagłówkowi tabeli „schować się” poza stronę.
Atrybuty tabeli
|
Atrybut |
Wartość |
Opis |
|
align |
left | center | right |
Określa pozycję tabeli względem innych elementów na stronie |
|
bgcolor |
rgb(x,x,x) |#xxxxxx | colorname |
Określa kolor tła tabeli |
|
border |
0 | 1 |
Określa czy tabela będzie posiadała obramowanie |
|
cellpadding |
pixele |
Określa odstęp między zawartością komórki, a jej brzegiem |
|
cellspacing |
pixele |
Określa odstępy pomiędzy komórkami |
|
frame |
void | above | below | hsides | lhs | rhs | vsides | box | border |
Określa która część zewnętrznej ramki będzie widoczna |
|
rules |
none | groups | rows | cols | all |
Określa która część wewnętrznej ramki będzie widoczna |
|
summary |
tekst |
Określa podsumowanie zawartości tabeli |
|
width |
pixele | % |
Określa szerokość tabeli w pikselach lub procentach szerokości strony |
Wszystkie atrybuty tabeli są przestarzałe w HTML 5. Należy używać CSS.