Tabele: tworzenie i formatowanie danych tabelarycznych

Tabele są nieocenione, gdy chcemy uporządkować informacje w wierszach i kolumnach, takie jak harmonogramy, wyniki badań czy zestawienia produktów. W tej lekcji dowiesz się, jak tworzyć i formatować tabele w HTML, jak łączyć komórki oraz poznasz dobre praktyki związane z ich użyciem.

Czym są tabele w HTML?

Tabele w HTML służą do prezentowania danych w układzie wierszy i kolumn. Pozwalają na czytelne i logiczne przedstawienie informacji, które w inny sposób byłyby trudne do zrozumienia.

Uwaga: W przeszłości tabele były również używane do tworzenia układów stron, jednak obecnie, dzięki CSS, nie jest to zalecane. Tabele powinny być stosowane wyłącznie do prezentacji danych tabelarycznych.

Struktura tabeli w HTML

Podstawowe znaczniki tabeli

<table> – znacznik otaczający całą tabelę.
<tr> – oznacza wiersz tabeli (od ang. table row).
<th> – komórka nagłówkowa (od ang. table header), zwykle wyświetlana pogrubioną czcionką i wyśrodkowana.
<td> – komórka tabeli (od ang. table data), zawiera dane.

Przykład podstawowej struktury tabeli

<table>
  <tr>
    <th>Nagłówek 1</th>
    <th>Nagłówek 2</th>
  </tr>
  <tr>
    <td>Dane 1</td>
    <td>Dane 2</td>
  </tr>
  <tr>
    <td>Dane 3</td>
    <td>Dane 4</td>
  </tr>
</table>

Wyjaśnienie:

Pierwszy wiersz (<tr>) zawiera komórki nagłówkowe (<th>).
Kolejne wiersze zawierają komórki danych (<td>).

Tworzenie prostej tabeli

Przykład: Harmonogram zajęć

Stwórzmy tabelę przedstawiającą harmonogram zajęć.

<h2>Harmonogram zajęć</h2>
<table>
  <tr>
    <th>Godzina</th>
    <th>Poniedziałek</th>
    <th>Wtorek</th>
    <th>Środa</th>
    <th>Czwartek</th>
    <th>Piątek</th>
  </tr>
  <tr>
    <td>8:00 - 9:30</td>
    <td>Matematyka</td>
    <td>Język polski</td>
    <td>Fizyka</td>
    <td>Historia</td>
    <td>Biologia</td>
  </tr>
  <tr>
    <td>9:45 - 11:15</td>
    <td>Chemia</td>
    <td>Geografia</td>
    <td>Język angielski</td>
    <td>Matematyka</td>
    <td>Wychowanie fizyczne</td>
  </tr>
  <!-- Dodaj kolejne wiersze według potrzeb -->
</table>

Wyświetlenie tabeli

Po zapisaniu i otwarciu strony w przeglądarce zobaczysz tabelę z danymi. Może ona jednak wyglądać nieco "płasko", ponieważ domyślnie przeglądarka nie dodaje obramowań ani stylów do tabeli.

Dodawanie obramowania i stylów

Atrybut `border`

Chociaż atrybut border w znaczniku <table> jest przestarzały i niezalecany w nowoczesnym HTML, możemy go użyć do szybkiego dodania obramowania w celach edukacyjnych.

<table border="1">
  <!-- Zawartość tabeli -->
</table>

Uwaga: Zaleca się stosowanie CSS do stylowania tabel.

Stylowanie tabel za pomocą CSS

Dodajmy style CSS, aby poprawić wygląd tabeli.

Metoda 1: Style wbudowane (wewnątrz dokumentu)

Dodaj w sekcji <head> następujący kod:

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #333;
    text-align: center;
    padding: 8px;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

Wyjaśnienie:

border-collapse: collapse; – łączy sąsiadujące obramowania komórek w jedno.
border: 1px solid #333; – dodaje obramowanie o grubości 1px, koloru #333 (ciemnoszary).
text-align: center; – wyśrodkowuje tekst w komórkach.
padding: 8px; – dodaje odstęp wewnątrz komórek.
background-color: #f2f2f2; – ustawia kolor tła dla nagłówków.

Metoda 2: Zewnętrzny arkusz stylów

Utwórz plik style.css i umieść w nim powyższe style. Następnie dołącz arkusz stylów w sekcji <head>:

<link rel="stylesheet" href="style.css">

Łączenie komórek

Czasami potrzebujemy, aby komórka tabeli zajmowała więcej niż jedną kolumnę lub wiersz. Do tego służą atrybuty colspan i rowspan.

Atrybut `colspan`

Łączy komórki w poziomie (rozszerza komórkę na kilka kolumn).

Przykład:

<tr>
  <th colspan="2">Nagłówek obejmujący dwie kolumny</th>
</tr>

Atrybut `rowspan`

Łączy komórki w pionie (rozszerza komórkę na kilka wierszy).

Przykład:

<tr>
  <td rowspan="2">Komórka obejmująca dwa wiersze</td>
  <td>Dane 1</td>
</tr>
<tr>
  <td>Dane 2</td>
</tr>

Praktyczny przykład z łączeniem komórek

Plan lekcji z zajęciami blokowymi:

<table>
  <tr>
    <th>Dzień</th>
    <th>Godzina</th>
    <th>Przedmiot</th>
  </tr>
  <tr>
    <td rowspan="2">Poniedziałek</td>
    <td>8:00 - 9:30</td>
    <td>Matematyka</td>
  </tr>
  <tr>
    <td>9:45 - 11:15</td>
    <td>Język polski</td>
  </tr>
  <tr>
    <td>Wtorek</td>
    <td colspan="2">Wycieczka szkolna</td>
  </tr>
  <!-- Dodaj kolejne wiersze według potrzeb -->
</table>

Wyjaśnienie:

W pierwszym wierszu td z atrybutem rowspan="2" powoduje, że komórka "Poniedziałek" zajmuje dwa wiersze.
W wierszu dla "Wtorku" td z atrybutem colspan="2" łączy dwie komórki w jedną, obejmującą całą szerokość pozostałych kolumn.

Nagłówek i stopka tabeli

HTML umożliwia zdefiniowanie nagłówka (<thead>), ciała (<tbody>) i stopki (<tfoot>) tabeli.

Struktura z użyciem `<thead>`, `<tbody>`, `<tfoot>`

<table>
  <thead>
    <tr>
      <th>Kolumna 1</th>
      <th>Kolumna 2</th>
      <th>Kolumna 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dane 1</td>
      <td>Dane 2</td>
      <td>Dane 3</td>
    </tr>
    <!-- Kolejne wiersze danych -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Podsumowanie</td>
    </tr>
  </tfoot>
</table>

Korzyści:

Ułatwia organizację i czytelność kodu.
Przydatne przy drukowaniu tabel – nagłówek i stopka mogą być powtarzane na każdej stronie.
Umożliwia bardziej zaawansowane stylowanie.

Dostępność tabel

Aby tabela była dostępna dla wszystkich użytkowników, w tym osób korzystających z czytników ekranu, warto dodać następujące elementy:

Atrybut `scope` w komórkach nagłówkowych

Określa, do jakiej części tabeli odnosi się nagłówek.

scope="col" – nagłówek kolumny.
scope="row" – nagłówek wiersza.

Przykład:

<tr>
  <th scope="col">Imię</th>
  <th scope="col">Nazwisko</th>
  <th scope="col">Wiek</th>
</tr>

Atrybut `caption`

Dodaje tytuł tabeli.

Przykład:

<table>
  <caption>Lista uczniów w klasie</caption>
  <!-- Zawartość tabeli -->
</table>

Praktyczne ćwiczenie

Ćwiczenie 1: Stwórz tabelę z wynikami sportowymi

Utwórz tabelę przedstawiającą wyniki zawodów sportowych.
Dodaj nagłówek tabeli z nazwami kolumn: Miejsce, Imię i nazwisko, Wynik.
Wypełnij tabelę danymi dla co najmniej 5 zawodników.

Przykład:

<h2>Wyniki zawodów lekkoatletycznych</h2>
<table>
  <thead>
    <tr>
      <th scope="col">Miejsce</th>
      <th scope="col">Imię i nazwisko</th>
      <th scope="col">Wynik</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Anna Nowak</td>
      <td>12.34 s</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jan Kowalski</td>
      <td>12.56 s</td>
    </tr>
    <!-- Dodaj kolejne wiersze -->
  </tbody>
</table>

Ćwiczenie 2: Użyj łączenia komórek

Stwórz tabelę z planem lekcji, uwzględniając przerwy.
Wykorzystaj rowspan lub colspan, aby połączyć komórki dla przerw lub zajęć blokowych.

Dobre praktyki

Używaj tabel tylko do prezentacji danych tabelarycznych: Nie stosuj tabel do tworzenia układów stron.
Stosuj semantyczne znaczniki: Używaj <thead>, <tbody>, <tfoot>, <th>, <td> zgodnie z ich przeznaczeniem.
Dodawaj atrybuty dostępności: Wspieraj użytkowników korzystających z technologii asystujących.
Styluj tabele za pomocą CSS: Unikaj przestarzałych atrybutów HTML, takich jak border, cellpadding, cellspacing.

Częste błędy i jak ich unikać

Brak zamykających znaczników: Upewnij się, że każdy znacznik otwierający ma swój odpowiednik zamykający.
Nieprawidłowa struktura: Pamiętaj o prawidłowym zagnieżdżaniu znaczników – np. <tr> wewnątrz <table>, <td> wewnątrz <tr>.
Nadmierne używanie atrybutów: Unikaj stosowania przestarzałych atrybutów HTML, zastępując je stylami CSS.
Nieczytelny kod: Dobrze formatuj kod, stosując wcięcia, aby ułatwić sobie i innym jego zrozumienie.

Podsumowanie

W tej lekcji nauczyliśmy się:

Jak tworzyć tabele w HTML za pomocą znaczników <table>, <tr>, <th>, <td>.
Jak stylować tabele za pomocą CSS, poprawiając ich wygląd i czytelność.
Jak łączyć komórki przy użyciu atrybutów colspan i rowspan.
Jak poprawić dostępność tabel poprzez stosowanie atrybutów scope i caption.
Dobre praktyki związane z tworzeniem i formatowaniem tabel.

Tabele są potężnym narzędziem do prezentowania danych, a umiejętność ich poprawnego stosowania jest niezbędna dla każdego twórcy stron internetowych.

Zadania do samodzielnego wykonania

Stwórz tabelę z cennikiem produktów:
- Dodaj kolumny: Nazwa produktu, Opis, Cena.
- Użyj stylów CSS do wyróżnienia nagłówków i naprzemiennych wierszy.
Przygotuj harmonogram wydarzeń:
- Uwzględnij datę, godzinę, nazwę wydarzenia i miejsce.
- Dodaj tytuł tabeli za pomocą znacznika <caption>.
Eksperymentuj z łączeniem komórek:
- Stwórz tabelę przedstawiającą plan konferencji z sesjami trwającymi przez kilka slotów czasowych.
- Wykorzystaj rowspan i colspan, aby odzwierciedlić czas trwania sesji.

Ciekawostka

Czy wiesz, że pierwsze strony internetowe były tworzone bez tabel? Tabele zostały wprowadzone w HTML 3.2 w 1997 roku. Wówczas stały się popularnym narzędziem do tworzenia układów stron, zanim powszechnie zaczęto stosować CSS. Obecnie, dzięki rozwojowi CSS, tabele są wykorzystywane zgodnie z ich pierwotnym przeznaczeniem – do prezentacji danych tabelarycznych.

Testy przypięte do lekcji
Aby uzyskać dostęp do testów i ćwiczeń interaktywnych - Zaloguj się

Aby widzieć ocenę lekcji - Zaloguj się

Następna lekcja: Formularze: elementy wejściowe, etykiety, walidacja danych →

← Poprzednia lekcja: Czym jest strona internetowa i jak działa?