Tabele i Dane

Witaj ponownie.

W poprzedniej lekcji nauczyłeś się dodawać obrazy i media do swoich stron.

Teraz wchodzimy do świata tabel.

Tabele są przydatne.

Tabele są potężne.

Tabele są też często nadużywane, jakby ktoś znalazł młotek i uznał, że każdy problem jest teraz gwoździem.

Więc dzisiaj uczymy się poprawnego sposobu.

Tabele są do danych.

Nie do layoutu.

Nie do wyrównywania przycisków.

Nie do budowania całej strony tak, jakby był rok 1999 i internet nadal pachniał modemem.

Czego Się Nauczysz

W tej lekcji nauczysz się:

• do czego służą tabele HTML;
• jak używać table;
• jak tworzyć wiersze za pomocą tr;
• jak tworzyć komórki nagłówkowe za pomocą th;
• jak tworzyć komórki danych za pomocą td;
• jak dodać caption;
• jak używać thead, tbody i tfoot;
• dlaczego tabel nie używa się do layoutu strony;
• jak robić tabele bardziej czytelne i znaczące.

Czym Jest Tabela?

Tabela służy do pokazywania uporządkowanych danych.

Na przykład:

• ceny;
• harmonogramy;
• statystyki;
• dane porównawcze;
• faktury;
• listy produktów;
• plany lekcji;
• wyniki.

Tabela ma wiersze i kolumny.

Jak arkusz kalkulacyjny.

Ale w HTML.

I bez przerażających formuł ukrytych w komórce F37.

Podstawowa Tabela

Oto prosta tabela:

<table>
  <tr>
    <th>Imię</th>
    <th>Rola</th>
  </tr>
  <tr>
    <td>Viktor</td>
    <td>Web Developer</td>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Designer</td>
  </tr>
</table>

To tworzy tabelę z:

• jednym wierszem nagłówkowym;
• dwoma wierszami danych;
• dwiema kolumnami.

Przeglądarka rozumie to jako dane strukturalne.

A nie przypadkowy tekst udający organizację.

Element table

Cała tabela zaczyna się od:

<table>

I kończy się na:

</table>

Wszystko w środku należy do tabeli.

Wiersze.

Nagłówki.

Komórki.

Caption.

Tabela jest kontenerem.

Dużym pudełkiem.

Walizką na dane.

Wiersze Tabeli z tr

Każdy wiersz tworzymy za pomocą tr.

Przykład:

<tr>
  <td>HTML</td>
  <td>Początkujący</td>
</tr>

tr oznacza table row.

Wiersz idzie poziomo.

Tak:

HTML | Początkujący

Tabelę buduje się wiersz po wierszu.

Nie kolumna po kolumnie.

Na początku to wydaje się dziwne.

Potem mózg to akceptuje.

W końcu.

Komórki Nagłówkowe z th

Komórki nagłówkowe używają th.

Przykład:

<th>Kurs</th>
<th>Poziom</th>

Komórki nagłówkowe opisują, co oznaczają dane.

Przykład:

<tr>
  <th>Kurs</th>
  <th>Poziom</th>
</tr>

To mówi przeglądarce:

Te komórki są nagłówkami dla danych w tabeli.

Przeglądarki zwykle pokazują tekst th pogrubiony i wyśrodkowany.

Ale znowu: znaczenie jest ważniejsze niż styl.

HTML to nie tylko dekoracja.

HTML to znaczenie w nawiasach kątowych.

Komórki Danych z td

Zwykłe komórki tabeli używają td.

Przykład:

<td>HTML</td>
<td>Początkujący</td>

td oznacza table data.

Wiersz z danymi wygląda tak:

<tr>
  <td>HTML</td>
  <td>Początkujący</td>
</tr>

Używaj td dla prawdziwych danych.

Używaj th dla nagłówków.

Nie mieszaj ich losowo jak skarpetki po praniu.

Dodawanie Caption

Tabela może mieć caption.

Przykład:

<table>
  <caption>Poziomy Kursów</caption>
  <tr>
    <th>Kurs</th>
    <th>Poziom</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Początkujący</td>
  </tr>
</table>

caption opisuje tabelę.

Powinno znajdować się zaraz po otwierającym tagu table.

Dobre caption pomaga użytkownikom zrozumieć, o czym jest tabela.

To bardzo przydatne dla dostępności.

I także dla ludzi, którzy nie lubią zgadywanek.

Lepsza Struktura Tabeli

Dla większych tabel HTML daje nam:

• thead;
• tbody;
• tfoot.

Przykład:

<table>
  <caption>Miesięczne Wydatki</caption>

  <thead>
    <tr>
      <th>Pozycja</th>
      <th>Koszt</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Hosting</td>
      <td>€10</td>
    </tr>
    <tr>
      <td>Domena</td>
      <td>€12</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>Razem</th>
      <td>€22</td>
    </tr>
  </tfoot>
</table>

Ta struktura sprawia, że tabela jest jaśniejsza.

Tabela ma:

• obszar nagłówka;
• obszar główny;
• obszar stopki.

Bardzo zorganizowane.

Prawie podejrzanie zorganizowane.

thead

Element thead zawiera sekcję nagłówkową tabeli.

Przykład:

<thead>
  <tr>
    <th>Produkt</th>
    <th>Cena</th>
  </tr>
</thead>

Tutaj zwykle trafiają nagłówki kolumn.

Pomaga to przeglądarkom, czytnikom ekranu i developerom zrozumieć strukturę tabeli.

Pomaga też przyszłemu tobie.

Przyszły ty docenia czysty kod.

Przyszły ty jest zmęczony.

tbody

Element tbody zawiera główne dane tabeli.

Przykład:

<tbody>
  <tr>
    <td>Laptop</td>
    <td>€800</td>
  </tr>
  <tr>
    <td>Mysz</td>
    <td>€20</td>
  </tr>
</tbody>

Tutaj zwykle znajduje się większość wierszy.

Jeśli tabela byłaby kanapką, tbody byłoby nadzieniem.

Użyteczną częścią.

Powodem, dla którego tu jesteśmy.

tfoot

Element tfoot zawiera informacje końcowe.

Przykład:

<tfoot>
  <tr>
    <th>Razem</th>
    <td>€820</td>
  </tr>
</tfoot>

Używaj go dla sum, podsumowań lub informacji końcowych tabeli.

Nie każda tabela potrzebuje tfoot.

Używaj go, kiedy pomaga.

Nie dodawaj tagów tylko dlatego, że wyglądają profesjonalnie.

Tak właśnie strony zmieniają się w zupę.

Stwórz Stronę do Ćwiczeń

Stwórz nowy plik:

touch tables.html

Dodaj:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ćwiczenie Tabel</title>
</head>
<body>
  <h1>Ćwiczenie Tabel</h1>

  <p>Ta strona pokazuje prostą tabelę z informacjami o kursie.</p>

  <table>
    <caption>Plan Kursu</caption>

    <thead>
      <tr>
        <th>Lekcja</th>
        <th>Temat</th>
        <th>Status</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>1</td>
        <td>Pierwsze Kroki</td>
        <td>Gotowe</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Struktura HTML</td>
        <td>Gotowe</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Tekst i Nagłówki</td>
        <td>Gotowe</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Otwórz ją w przeglądarce.

Będzie wyglądać prosto.

To normalne.

HTML tworzy strukturę.

CSS później zrobi ją piękną.

Na razie tabela żyje.

Prosta, ale żyje.

Nie Używaj Tabel do Layoutu

To ważne.

Tabele nie powinny być używane do budowania layoutu strony.

Zły pomysł:

<table>
  <tr>
    <td>Sidebar</td>
    <td>Główna Treść</td>
  </tr>
</table>

Dawno temu było to powszechne.

Ale dzisiaj używamy CSS do layoutu.

Tabele są dla danych.

CSS jest dla layoutu.

Nie każ tabelom nosić mebli.

To nie są ciężarówki przeprowadzkowe.

Kiedy Używać Tabeli

Używaj tabeli, kiedy treść ma jasne wiersze i kolumny.

Dobry przykład użycia tabeli:

Produkt | Cena | Ilość
Laptop  | €800 | 1
Mysz    | €20  | 2

Zły przykład użycia tabeli:

Header | Główna sekcja | Footer

To jest layout.

Użyj CSS później.

Tutaj bądź surowy.

Przyszłe projekty ci podziękują.

Dostępność Tabel

Tabele powinny być jasne dla wszystkich.

Używaj:

• znaczących nagłówków;
• caption;
• prostej struktury;
• logicznej organizacji wierszy i kolumn.

Przykład:

<table>
  <caption>Tygodniowy Plan Treningów</caption>
  <thead>
    <tr>
      <th>Dzień</th>
      <th>Aktywność</th>
      <th>Godzina</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Poniedziałek</td>
      <td>Karate</td>
      <td>19:00</td>
    </tr>
    <tr>
      <td>Środa</td>
      <td>Joga</td>
      <td>18:30</td>
    </tr>
  </tbody>
</table>

To jest czytelne.

To ma znaczenie.

To nie sprawia, że przeglądarka płacze po cichu.

Częste Błędy

Zapomnienie tr

Źle:

<table>
  <td>HTML</td>
  <td>Początkujący</td>
</table>

Dobrze:

<table>
  <tr>
    <td>HTML</td>
    <td>Początkujący</td>
  </tr>
</table>

Komórki muszą być w wierszach.

Wiersze muszą być w tabeli.

Hierarchia ma znaczenie.

HTML to nie sterta prania.

Używanie td dla Nagłówków

Nieidealnie:

<tr>
  <td>Imię</td>
  <td>Email</td>
</tr>

Lepiej:

<tr>
  <th>Imię</th>
  <th>Email</th>
</tr>

Jeśli to nagłówek, użyj th.

Za Dużo Danych

Ogromna tabela może być trudna do czytania.

Nie twórz tabeli z 40 kolumnami, a potem nie dziw się, że użytkownicy cierpią.

Jeśli tabela robi się za duża, pomyśl o podzieleniu jej.

Albo o innym sposobie organizacji danych.

Czasem najlepsza tabela to mniejsza tabela.

Jak pizza.

Mniejsze kawałki łatwiej przeżyć.

Praktyka

Stwórz stronę:

schedule.html

Zbuduj tabelę dla tygodniowego planu.

Powinna zawierać:

• jeden h1;
• jeden akapit wprowadzający;
• jedną tabelę;
• jedną caption;
• thead;
• tbody;
• co najmniej pięć wierszy;
• kolumny dla dnia, aktywności i godziny.

Bez CSS.

Bez JavaScriptu.

Tylko struktura tabeli HTML.

Mini Wyzwanie

Stwórz plik:

price-list.html

Zbuduj tabelę cennika.

Powinna zawierać:

• title strony;
• główny nagłówek;
• krótki akapit;
• caption tabeli;
• kolumny dla usługi, opisu i ceny;
• co najmniej cztery usługi;
• wiersz końcowy z notatką lub sumą.

Przykładowe usługi:

• landing page;
• strona portfolio;
• strona firmowa;
• utrzymanie strony.

Zachowaj czystość.

Bez sztuczek layoutowych.

Tabele są dla danych.

Obserwujemy je uważnie.

Podsumowanie

Dzisiaj nauczyłeś się, że:

• tabele są dla danych strukturalnych;
• table tworzy tabelę;
• tr tworzy wiersz tabeli;
• th tworzy komórkę nagłówkową;
• td tworzy komórkę danych;
• caption opisuje tabelę;
• thead grupuje wiersze nagłówkowe;
• tbody grupuje główne wiersze danych;
• tfoot grupuje wiersze końcowe;
• tabele nie powinny być używane do layoutu;
• dobre tabele są jasne, znaczące i dostępne.

Tabele są użyteczne, kiedy są używane poprawnie.

Ale jeśli używasz ich do layoutu, gdzieś frontend developer rozlewa kawę.

Następna Lekcja

W następnej lekcji poznamy formularze.

Formularze to moment, kiedy użytkownicy wreszcie odpowiadają stronie.

To potężne.

I także miejsce, gdzie chaos lubi wejść w okularach przeciwsłonecznych.