Tworzenie tabel w HTML

MZ | 29-06-2017 | 16:08:32

Tabele (ang. table) nadają się fantastycznie do czytelnego, dwuwymiarowego przedstawiania danych. Cały obszar tabeli ograniczony jest – rzecz jasna – znacznikami <table></table>. Pojedynczy wiersz tabeli tworzymy tagami <tr></tr> (ang. table row), zaś wewnątrz wierszy definiować będziemy komórki tabeli <td></td> (ang. table drawer). Jako przykład, przyjrzyjmy 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

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z całego archiwum bloga:

Komentarze

Disqus
Facebook
Pasja informatyki