Tabele w HTML

Artykuł  | Mirosław Zelent

Tabele (z ang. table) nadają się fantastycznie do czytelnego, dwuwymiarowego przedstawiania danych. Cały obszar tabeli ograniczony jest – rzecz jasna – znacznikami <table></table>. Pojedynczy wiersz tabeli definiowany jest tagami <tr></tr> (od ang. table row), zaś wewnątrz wierszy definiować będziemy komórki tabeli <td></td> (ang. table drawer). I tak przypatrzmy się tabeli zawierającej 3 wiersze, a w każdym z nich po 3 komórki:

<style> td { border: 1px solid black; } </style>
<!-- ustawienie czarnego obramowania komórek tabeli w CSS -->

<table>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
<td>4</td> <td>5</td> <td>6</td>
</tr>
<tr>
<td>7</td> <td>8</td> <td>9</td>
</tr>
</table>

Rezultat w przeglądarce:

1 2 3
4 5 6
7 8 9

Kolejna ważna umiejętność w kontekście budowania tabel to scalanie komórek. Scalanie to łączenie dwóch lub więcej komórek w jedną. Czasami trzeba wykonać takie złączenie w tabeli, chociażby dla przejrzystości pokazywania danych. Służą do tego dwa atrybuty: rowspan, jeśli scalaniu ulegają wiersze oraz colspan, jeżeli scalaniu ulegają kolumny. Zobaczmy to jednak na konkretnych przykładach!

Scalanie z użyciem atrybutu colspan:

<style> td { border: 1px solid black; } </style>
<!-- ustawienie czarnego obramowania komórek tabeli w CSS -->

<table>
<tr>
<td colspan="2">1</td> <td>3</td>
</tr>
<tr>
<td>4</td> <td>5</td> <td>6</td>
</tr>
<tr>
<td>7</td> <td>8</td> <td>9</td>
</tr>
</table>

Rezultat w przeglądarce:

1 3
4 5 6
7 8 9

Scalanie z użyciem atrybutu rowspan:

<style> td { border: 1px solid black; } </style>
<!-- ustawienie czarnego obramowania komórek tabeli w CSS -->

<table>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
<td rowspan="2">4</td> <td>5</td> <td>6</td>
</tr>
<tr>
<td>7</td> <td>8</td>
</tr>
</table>

Rezultat w przeglądarce:

1 2 3
4 5 6
7 8

Możemy także rozbudować tabelę o znaczniki <thead> (ang. table head), oraz <tbody> (ang. table body). Tak samo jak dokument HTML posiada sekcję <head> i <body>, tak tabela posiada swoją głowę i ciało – jest to ta sama tradycja, wywodząca się z budowy funkcji w programowaniu. Oczywiście ktoś zapyta - a po co w ogóle określać ten podział na głowę i ciało tabeli? No, idea jest taka, że w tabelach często mamy do czynienia ze słownym opisem, co znajduje się w danych kolumnach – i do tego celu można wykorzystać głowę <thead>. Do tworzenia takich "opisowych komórek nagłówkowych" stosujemy znacznik <th> (ang. table header):

<style> td, th { border: 1px solid black; } </style>
<!-- ustawienie czarnego obramowania tabeli w CSS -->

<table>
<thead>
<tr>
<th>Przedmiot</th> <th>Nazwisko</th> <th>Ocena</th>
</tr>
</thead>
<tbody>
<tr>
<th>Historia</th> <td>Nowak</td> <td>4+</td>
</tr>
<tr>
<th>Historia</th> <td>Mazur</td> <td>3-</td>
</tr>
<tr>
<th>Fizyka</th> <td>Nowak</td> <td>2</td>
</tr>
<tr>
<th>Fizyka</th> <td>Mazur</td> <td>4</td>
</tr>
</tbody>
</table>

Rezultat w przeglądarce:

Przedmiot Nazwisko Ocena
Historia Nowak 4+
Historia Mazur 3-
Fizyka Nowak 2
Fizyka Mazur 4

W uproszczeniu można powiedzieć, że takie komórki <th>, zastępują nam klasyczne szufladki <td> wszędzie tam, gdzie zamiast wartości komórki, mamy jej opis – logiczne. W praktyce znaczniki <th> mogą pojawić się nie tylko w głowie tabeli <thead>, ale także w sekcji <tbody>, jako że opisy czasem znajdą się także w innym wierszu niż pierwszy – podział na głowę i ciało wykazuje więc charakter umowny.

I ostatnia, ważna sprawa przy tabelach - otóż dozwolone jest, w ściśle określonych przypadkach, pomijanie zamykających tagów. W HTML5 można je pominąć, co znacząco może odchudzić ilość kodu potrzebną do zapisania wielkich tabel:

<style> td, th { border: 1px solid black; } </style>
<!-- ustawienie czarnego obramowania tabeli w CSS -->

<table>
<thead>
<tr> <th> Przedmiot <th>Nazwisko <th> Ocena
<tbody>
<tr> <th> Historia <td> Nowak <td> 4+
<tr> <th> Historia <td> Mazur <td> 3-
<tr> <th> Fizyka <td> Nowak <td> 2
<tr> <th> Fizyka <td> Mazur <td> 4
</table>

Rezultat w przeglądarce jest identyczny:

Przedmiot Nazwisko Ocena
Historia Nowak 4+
Historia Mazur 3-
Fizyka Nowak 2
Fizyka Mazur 4

Komentarze

Czy macie jakieś uwagi, pytania, sugestie? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach. Dziękujemy Wam za poświęcony czas!