Tabele w HTML

Trzy pytania z poprzedniej lekcji

1. Który atrybut znacznika <img> mówi przeglądarce, skąd wziąć plik z obrazem?
2. Po co jest atrybut alt i kto z niego korzysta?
3. Czy <img> ma znacznik zamykający?

Tabela jest do danych, nie do układu strony

Cztery znaczniki: table, tr, th, td

• table to pudełko na całość, tr to jeden wiersz (table row), a w wierszu leżą komórki.
• th to komórka nagłówka (table header), td to komórka z danymi (table data). Przeglądarka sama pogrubia th.
• Kolumn nie piszecie osobno: powstają same z komórek stojących pod sobą.

Ten sam plan lekcji w kodzie

<table>
  <tr>
    <th>Godzina</th><th>Poniedziałek</th><th>Wtorek</th>
  </tr>
  <tr>
    <td>8:00</td><td>Sieci</td><td>Strony</td>
  </tr>
  <tr>
    <td>8:50</td><td>Matematyka</td><td>Angielski</td>
  </tr>
</table>

Podpis i trzy części: caption, thead, tbody, tfoot

scope: dla kogo ten nagłówek?

<thead>
  <tr>
    <th scope="col">Godzina</th>
    <th scope="col">Poniedziałek</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">8:00</th>
    <td>Sieci komputerowe</td>
  </tr>
</tbody>

Łączenie komórek: colspan i rowspan

<td colspan="2">Pracownia aplikacji</td>      <!-- liczba = ile kolumn zajmuje -->
<td rowspan="2">Pracownia aplikacji</td>      <!-- liczba = ile wierszy zajmuje -->

Ciekawostka z MDN: colspan i rowspan mają domyślną wartość 1, więc zwykła komórka td bez tych atrybutów i tak zajmuje jedną kolumnę i jeden wiersz. Specyfikacja ogranicza też górną granicę: colspan może mieć najwyżej 1000, a rowspan najwyżej 65534.

Tak pytają na egzaminie

Ćwiczenie 1: plan lekcji i tabela ocen

Nowy plik tables.html w Twoim folderze. W body dwie tabele:

1. Plan lekcji na trzy dni: caption „Mój plan lekcji”; thead: Godzina, Poniedziałek, Wtorek, Środa (th scope="col"); tbody: godziny 1–4, numer godziny jako th scope="row"; jeden blok dwugodzinny jako jedna komórka rowspan="2"; po godzinie 2 wiersz przerwy: th „Przerwa” i jedna komórka colspan="3".
2. Tabela ocen: caption „Moje oceny”; thead: Przedmiot, Ocena 1, Ocena 2, Ocena 3; tbody: trzy przedmioty; tfoot: wiersz „Średnia” ze średnią każdej kolumny.
3. Zapisz, sprawdź w przeglądarce.

<table>
  <caption>Mój plan lekcji</caption>
  <thead>
    <tr>
      <th scope="col">Godzina</th><th scope="col">Poniedziałek</th>
      <th scope="col">Wtorek</th><th scope="col">Środa</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td rowspan="2">Pracownia aplikacji</td><td>Matematyka</td><td>Polski</td></tr>
    <tr><th scope="row">2</th><td>Angielski</td><td>Sieci</td></tr>
    <tr><th scope="row">Przerwa</th><td colspan="3">Przerwa obiadowa</td></tr>
    <!-- godziny 3 i 4 jak godzina 1, ale bez rowspan: th i trzy td -->
  </tbody>
</table>

Ćwiczenie 2: z rysunku do kodu

Trzy pytania na koniec

1. Chcecie ustawić menu z lewej strony, a artykuł z prawej. Tabela czy nie? Dlaczego?
2. Czym różni się th od td i po co przy th jest scope?
3. Komórka ma zająć trzy kolumny obok siebie. Jaki atrybut i z jaką liczbą?

A jak to wygląda w produkcji?