Tworzenie tabel w HTML
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 |
Komentarze
Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać: kontakt@pasja-informatyki.pl. Dziękujemy za poświęcony czas - to dzięki Wam serwis staje się coraz lepszy!