Programowanie webowe | 03. Przegląd znaczników HTML

Tabele <table>

Mirosław Zelent

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

Poprzedni wpis

Następny wpis