Tabele HTML

Tabela to struktura danych złożona z wierszy i kolumn, która pozwala na przedstawienie informacji w przejrzysty i uporządkowany sposób.

W formie tabelarycznej często przedstawia się różnego rodzaju harmonogramy, zestawienia, wyniki i wszystkie inne dane, które mają formę powiązanych ze sobą „nagłówków” i „wartości”. Na przykład:

Prawidłowo skonstruowane tabele HTML nie tylko dobrze wyglądają (za sprawą zastosowania odpowiednich reguł CSS) na stronie internetowej, ale także są poprawnie interpretowane przez narzędzia zwiększające dostępność, takie jak czytniki ekranu.

Dlatego do budowy tabel HTML należy używać odpowiednich elementów semantycznych, które ułatwią odbiór informacji wszystkim użytkownikom.

Poniższa tabela zawiera zestawienie elementów HTML służących do tworzenia tabel z krótkimi opisami. Nazwy elementów prowadzą do bardziej szczegółowych opisów każdego z nich.

Tabele nie są skomplikowanymi strukturami, ale ich budowa, zwłaszcza tych bardziej rozbudowanych, wymaga odrobinę pracy.

Poniżej dowiesz się, jak utworzyć prawidłową semantycznie tabelę HTML, która będzie przejrzysta i dostępna nie tylko dla użytkowników wizualnych, ale także dla osób korzystających z technologii pomocniczych, takich jak czytniki ekranu.

Najprostsza tabela HTML

Definicja tabeli zawiera się między znacznikami <table> i </table>. Podstawę jej budowy stanowią wiersze i kolumny, które w najprostszej formie, są reprezentowane odpowiednio przez elementy tr i zawarte w nich elementy td.

Jeśli chcemy utworzyć jeden wiersz tabeli, to między znacznikami <table> i </table> (opuszczone dla uproszczenia) napiszemy:

<tr></tr>

Ta tabela nie zawiera jeszcze żadnych danych, które możemy dodać w elementach td:

<tr>
  <td></td>
</tr>

Ta tabela składa się z jednego wiersza i jednej kolumny, czyli ma jedną komórkę danych, która na razie jest pusta.

Liczbę wierszy i kolumn możemy dowolnie zwiększać, np.:

<tr>
  <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>

Ta tabela ma dwa wiersze i dwie kolumny, czyli w sumie cztery komórki danych.

Poniżej znajduje się kompletna definicja tabeli HTML składającej się z czterech wierszy i czterech kolumn, czyli zawierającej w sumie 16 komórek, z danymi:

<table>
  <tr>
    <td>Zawodnik</td>
    <td>Liczba minut</td>
    <td>Liczba punktów</td>
    <td>Liczba zbiórek</td>
  </tr>
  <tr>
    <td>Kowalski</td>
    <td>39</td>
    <td>25</td>
    <td>6</td>
  </tr>
  <tr>
    <td>Nowak</td>
    <td>28</td>
    <td>12</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Kwiatkowski</td>
    <td>41</td>
    <td>30</td>
    <td>1</td>
  </tr>
</table>

Na tej stronie, na której działają nasze style CSS, ta tabela wyglądałaby tak:

W tej tabeli dane są przedstawione w dość przejrzysty sposób, ale parę rzeczy można w niej poprawić. Na przykład możemy odpowiednio oznaczyć wiersz nagłówka, aby wyróżnić go wizualnie, a także, aby ułatwić jego odczyt przez czytniki ekranu itp. narzędzia.

Wersja z semantycznym nagłówkiem

Komórki nagłówka w tabelach HTML oznaczamy za pomocą elementu th, który podobnie jak element td oznacza komórkę tabeli, ale dodatkowo informuje, że jest to komórka nagłówka. Na przykład:

<table>
  <tr>
    <th>Zawodnik</th>
    ...
  </tr>
  ...

Aby w pełni poinformować wszystkie narzędzia, takie jak czytniki ekranu dla niedowidzących, o strukturze tabeli, możemy zastosować atrybut scope pozwalający określić, czy dana komórka nagłówka odnosi się do kolumny, czy do wiersza. Spójrz na poniższy przykład:

<table>
  <tr>
    <th scope="col">Zawodnik</th>
    <th scope="col">Liczba minut</th>
    <th scope="col">Liczba punktów</th>
    <th scope="col">Liczba zbiórek</th>
  </tr>
  <tr>
    <th scope="row">Kowalski</th>
    <td>39</td>
    <td>25</td>
    <td>6</td>
  </tr>
  <tr>
    <th scope="row">Nowak</th>
    <td>28</td>
    <td>12</td>
    <td>8</td>
  </tr>
  <tr>
    <th scope="row">Kwiatkowski</th>
    <td>41</td>
    <td>30</td>
    <td>1</td>
  </tr>
</table>

W tej tabeli za pomocą atrybutu scope zaznaczyliśmy, że komórki nagłówkowe Zawodnik, Liczba minut, Liczba punktów i Liczba zbiórek odnoszą się do odpowiednich kolumn, a komórki nagłówkowe Kowalski, Nowak i Kwiatkowski — do odpowiednich wierszy.

Na naszej stronie ta tabela wyglądałaby tak:

Scalanie wierszy i kolumn

Czasami trzeba utworzyć bardziej skomplikowaną tabelę, w której wybrane komórki obejmują więcej niż jeden wiersz lub jedną kolumnę. Spójrz na poniższy przykład:

Taką tabelę HTML można utworzyć przy użyciu atrybutów colspan i rowspan. Pierwszy z nich określa liczbę kolumn obejmowanych przez komórkę, a drugi — liczbę wierszy, jaką obejmuje dana komórka.

<table>
  <tr>
    <td rowspan="2"></td>
    <th colspan="3" scope="col">Ceny</th>
  </tr>
  <tr>
    <th scope="col">Min.</th>
    <th scope="col">Maks.</th>
    <th scope="col">Średnia</th>
  </tr>
  <tr>
    <th scope="row">Jabłka</th>
    <td>5 zł</td>
    <td>6 zł</td>
    <td>5,50 zł</td>
  </tr>
  <tr>
    <th scope="row">Gruszki</th>
    <td>7 zł</td>
    <td>8 zł</td>
    <td>7,50 zł</td>
  </tr>
  <tr>
    <th scope="row">Banany</th>
    <td>10 zł</td>
    <td>12 zł</td>
    <td>11 zł</td>
  </tr>
</table>

W pierwszym elemencie tr tej tabeli najpierw definiujemy komórkę, która obejmuje dwa wiersze (<td rowspan="2"></td>), a następnie definiujemy komórkę obejmującą trzy kolumny (<th colspan="3" scope="col">Ceny</th>).

Kolejny element tr zawiera pozostałe „brakujące” trzy komórki nagłówkowe znajdujące się w drugim wierszu obejmowanym przez pierwszą komórkę td:

<tr>
    <th scope="col">Min.  </th>
    <th scope="col">Maks.  </th>
    <th scope="col">Średnia  </th>
</tr>

Dalej znajdują się pozostałe „normalne” wiersze zawierające komórki nagłówkowe i danych.

Formatowanie kolumn – elementy colgroup i col

Szatę wizualną tabel należy definiować za pomocą Kaskadowych arkuszy stylów (CSS), które zawierają wszystkie narzędzia potrzebne do utworzenia efektownej i przejrzystej prezentacji tabelarycznej.

Choć w CSS sądostępne specjalne selektory pozwalające odnieść się do wybranych kolumn tabeli, w języku HTML dodatkowo istnieją specjalne elementy, które to ułatwiają: colgroup i col.

Element colgroup powinien być pierwszym potomkiem tabeli (powinien znajdować się za znacznikiem otwierającym <table>). Jest on kontenerem zawierającym elementy col, które umożliwiają zdefiniowanie formatowania dla kolumn, którym odpowiadają.

Powiedzmy, że chcemy utworzyć tabelę wyglądającą, jak poniższa:

Taki efekt możemy uzyskać na kilka sposobów przy użyciu samych arkuszy stylów CSS, jak również przy pomocy elementów colgroup i col z dodatkiem CSS. Spójrz na poniższy przykład:

<table>
  <colgroup>
    <col style="background-color:  lightblue; width: 200px">
    <col style="background-color:  lightgreen; width: 200px">
  </colgroup>
  <tr>
    <th>Języki skryptowe</th>
    <th>Języki kompilowane</th>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>C++</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>Java</td>
  </tr>
</table>

W tym przypadku utworzyliśmy dwa elementy col reprezentujące poszczególne kolumny tabeli. Zastosowane do nich style odnoszą się do całych kolumn, którym one odpowiadają.

Nagłówek, treść właściwa i stopka – thead, tbody, tfooter

W bardziej rozbudowanych tabelach dodatkowo można użyć specjalnych elementów do oznaczania części nagłówkowej, treści właściwej i stopki tabeli. Służą do tego odpowiednio elementy thead, tbody i tfooter.

Elementy te nic nie zmieniają w zakresie dostępności tabeli dla użytkowników z wadami wzroku. Za to są pomocne przy formatowaniu wizualnym tabeli, ponieważ ułatwiają odnoszenie się do jej poszczególnych części.

Element thead powinien znajdować się bezpośrednio za znacznikiem otwierającym <table>, chyba że został użyty także element colgroup. Jeśli tak, to element thead powinien znajdować się bezpośrednio za nim. Na przykład:

<table>
  <colgroup>
    <col style="background-color: lightblue; width: 200px">
    <col style="background-color: lightgreen; width: 200px">
  </colgroup>
  <thead>
    <tr>
      <th>Języki skryptowe</th>
      <th>Języki kompilowane</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JavaScript</td>
      <td>C++</td>
    </tr>
    <tr>
      <td>PHP</td>
      <td>Java</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Wszystkich</td>
      <td>4</td>
    </tr>
  </tfoot>
</table>

Podpis tabeli

Podpis tabeli należy umieścić w elemencie caption, który powinien być pierwszym elementem znajdującym się za znacznikiem otwierającym <table>. Na przykład:

<table>
  <caption>Języki skryptowe i kompilowane z podsumowaniem</caption>
  <colgroup>
    <col style="background-color: lightblue; width: 200px">
    <col style="background-color: lightgreen; width: 200px">
  </colgroup>
  <thead>
    <tr>
      <th>Języki skryptowe</th>
      <th>Języki kompilowane</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>JavaScript</td>
      <td>C++</td>
    </tr>
    <tr>
      <td>PHP</td>
      <td>Java</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Wszystkich</td>
      <td>4</td>
    </tr>
  </tfoot>
</table>

Teraz nasza tabela wyglądałaby tak:

W tym przypadku można jeszcze pogrubić zawartość komórek stopki, co dzięki elementowi tfooter byłoby bardzo proste. Wystarczyłoby na przykład zastosować prostą regułę CSS tfooter td {font-weight: bold}.