Tabele: tworzenie i formatowanie danych tabelarycznych

Darmowy Kurs HTML + CSS Online

Darmowy Kurs HTML + CSS Online

Temat: 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

    1. Utwórz tabelę przedstawiającą wyniki zawodów sportowych.
    2. Dodaj nagłówek tabeli z nazwami kolumn: Miejsce, Imię i nazwisko, Wynik.
    3. 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

    1. Stwórz tabelę z planem lekcji, uwzględniając przerwy.
    2. 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

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

    2. Przygotuj harmonogram wydarzeń:

      • Uwzględnij datę, godzinę, nazwę wydarzenia i miejsce.
      • Dodaj tytuł tabeli za pomocą znacznika <caption>.

    3. 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?