28. 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

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 tabeli

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 tfoot.

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 tfoot byłoby bardzo proste. Wystarczyłoby na przykład zastosować prostą regułę CSS tfoot td {font-weight: bold}.

Znasz już wszystkie elementy HTML służące do tworzenia tabel. Aby sformatować ich wygląd, można używać wszystkich „normalnych własności CSS”, ale istnieje też kilka takich, które są przeznaczone specjalnie do pracy z tabelami. Poniżej znajdziesz ich opis.

Stylizacja tabel za pomocą CSS

W jednej z wcześniejszych uwag w tym rozdziale pokazałem, jak wyglądałaby tabela pozbawiona formatowania za pomocą arkuszy stylów. Do stylizacji tabel można używać wielu własności CSS odnoszących się do różnych elementów, ale istnieje także grupa własności specjalnie przeznaczonych do pracy z tabelami. W poniższej tabeli znajduje się ich zestawienie:

Przyjrzymy się tym własnościom po kolei, a zaczniemy od układu tabeli.

Określanie układu tabeli

Do określania układu tabeli służy własność table-layout, która przyjmuje dwie wartości: auto i fixed.

W większości przeglądarek wartość auto jest stosowana domyślnie i powoduje ona włączenie algorytmu automatycznego dostosowywania rozmiaru komórek do ich zawartości.

Natomiast wartość fixed określa szerokość kolumn tabeli i całej tabeli na podstawie szerokości elementów table i col lub szerokości pierwszego wiersza komórek (dalsze wiersze nie są brane pod uwagę w tej kwestii).

W poniższym oknie możesz wypróbować różne ustawienia własności table-layout – zmień jej wartość na karcie CSS z auto na fixed, aby sprawdzić, co się stanie.

See the Pen Test table-layout by Łukasz Piwko (@shebangpl) on CodePen.

Stylizacja obramowania komórek

Dwie specjalne własności CSS odnoszące się do krawędzi obramowania komórek tabeli to border-collapse i border-spacing.

Własność border-collapse określa, czy krawędzie sąsiadujących komórek mają być scalone, czy rozdzielone. Przyjmuje ona dwie wartości: collapse i separate. Wartość collapse oznacza scalanie krawędzi, a separate – ich rozdzielanie.

Powiedzmy, że mamy następującą prostą tabelę HTML:

<table>
  <tr>
    <td>JavaScript</td>
    <td>C++</td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>Java</td>
  </tr>
  <tr>
    <td>Suma</td>
    <td>4</td>
  </tr>
</table>

Zastosujemy do niej poniższy arkusz stylów:

td {
  border: 5px solid lightpink;
}

Teraz nasza tabela wygląda tak:

Przy domyślnych ustawieniach CSS krawędzie są rozdzielone (odpowiada za to domyślne ustawienie własności border-collapse, którym jest separate) i odsunięte od siebie (za ten odstęp między nimi odpowiada domyślne ustawienie własności border-spacing).

A teraz zmienimy ustawienie własności border-collapse na collapse (zwróć uwagę, że stosuje się ją do elementu table):

table {
  border-collapse: collapse;
}

Po wprowadzeniu tej reguły nasza tabela wygląda inaczej:

Krawędzie obramowania komórek są scalone, co można poznać po ich grubości – gdyby nie były scalone, a tylko złączone ze sobą przez likwidację odstępu między nimi, to tworzyłyby grubszą linię.

Ponadto zmiana ustawienia własności border-collapse na collapse spowodowała zniknięcie odstępu między komórkami, ponieważ własność border-spacing (także jej domyślne ustawienie) działa tylko wtedy, gdy własność border-collapse jest ustawiona na separate.

Własność border-spacing także odnosi się do elementu table i może przyjmować jedną lub dwie wartości w dowolnej jednostce długości. Jeśli zostanie podana tylko jedna wartość, to dotyczy ona wszystkich czterech stron. Jeśli zostaną podane dwie wartości, to pierwsza dotyczy lewej i prawej strony, a druga – góry i dołu.

Należy pamiętać, że ta własność działa tylko wtedy, gdy własność border-collapse jest ustawiona na collapse.

Gdybyśmy na przykład w regule odnoszącej się do naszej tabeli zmienili ustawienie własności border-collapse na separate oraz dodali deklarację border-spacing: 10px 20px:

table {
  border-collapse: separate;
  border-spacing: 10px 20px;
}

…nasza tabela wyglądałaby tak, jak na poniższym zrzucie ekranu:

Położenie podpisu

Za pomocą własności caption-side można określić, czy podpis tabeli ma się znajdować na górze, czy na dole. Przyjmuje ona dwie wartości: top (góra, ustawienie domyślne) i bottom (dół). Powiedzmy na przykład, że dodaliśmy do powyższej tabeli element caption:

<table>
  <caption>Podpis tabeli</caption>
  <tr>
    <td>JavaScript</td>
    <td></td>
  </tr>
  <tr>
    <td>PHP</td>
    <td>Java</td>
  </tr>
  <tr>
    <td>Suma</td>
    <td>4</td>
  </tr>
</table>

Następnie definiujemy dwie następujące reguły:

td {
  border: 5px solid lightpink;
}
caption {
  caption-side: bottom
}

Pierwsza reguła ma tylko znaczenie kosmetyczne. Natomiast druga umieszcza podpis tabeli pod tabelą, mimo że zawierający go element znajduje się na samym początku w kodzie HTML:

Pokazywanie i ukrywanie pustych komórek

Aby określić, czy puste komórki tabeli mają być widoczne, czy ukryte, należy użyć własności empty-cells. Przyjmuje ona dwie wartości: show (pokazuj, ustawienie domyślne) i hide (ukrywaj). Gdybyśmy do tabeli z poprzedniej sekcji zastosowali poniższą deklarację CSS:

empty-cells: hidden;

…to tabela ta wyglądałaby tak, jak na poniższym zrzucie ekranu:

To była ostatnia własność CSS przeznaczona specjalnie do stylizowania elementów tabel, ale poniżej znajduje się jeszcze opis typowego zastosowania selektora n-tego dziecka do tabel.

Tabele w naprzemienne paski

Za pomocą pseudoklasy CSS :nth-child można w łatwy sposób utworzyć tabelę o wyglądzie podobnym do tabeli pokazanej na początku tego rozdziału.

Pseudoklasa ta może przyjmować jako wartość słowa kluczowe odd i even, które odpowiednio oznaczają „nieparzysty” i „parzysty”. Na przykład:

tr:nth-child(odd) {
  background-color: gray;
}
tr:nth-child(even) {
  background-color: lightgray;
}

Teraz wszystkie nieparzyste wiersze tabeli (pierwszy, trzeci itd.) będą miały kolor szary, a wszystkie parzyste – kolor jasnoszary.

Znasz już wszystkie elementy tabel HTML i umiesz je stylizować za pomocą CSS. Tak naprawdę, jeśli uważnie czytasz ten kurs od samego początku, to znasz już zdecydowaną większość elementów HTML5. W następnym rozdziale poznasz pozostałe. Nie wszystkie są często używane, więc ich opis jest bardzo zwięzły. W razie potrzeby łatwo znajdziesz dodatkowe informacje, klikając ich nazwy, które są odnośnikami do stron zawierających bardziej szczegółowe opisy.

Podsumowanie

• Tabele HTML tworzymy przy użyciu elementu table.
• Element tbody oznacza treść główną tabeli.
• Wiersze tabeli HTML tworzymy za pomocą elementu tr.
• Komórki tabel tworzymy za pomocą elementu td.
• Komórkę nagłówka tabeli oznacza element th.
• Nagłówek tabeli oznacza element thead.
• Stopkę tabeli oznacza element tfoot.
• Element colgroup definiuje grupę kolumn tabeli.
• Element col określa właściwości kolumn w grupie tabeli.
• Element caption oznacza podpis tabeli.
• Własność CSS border-collapse określa, czy obramowania komórek tabeli mają być scalane, czy nie.
• Własność CSS border-spacing określa odstęp między krawędziami obramowania komórek tabeli.
• Własność CSS caption-side określa położenie podpisu tabeli.
• Własność CSS empty-cells określa czy puste komórki tabeli mają być widoczne, czy ukryte.
• Własność CSS table-layout określa sposób definiowania układu tabeli.
• Pseudoklasa CSS :nth-child umożliwia odnoszenie się do wybranych numerycznie elementów potomnych innego elementu. Wartość odd pozwala odnieść się do nieparzystych elementów potomnych, a wartość even – do parzystych.