Listy, tabele i linki w HTML

Po co się tego uczymy?

Listy i tabele to naturalny sposób prezentowania wielu podobnych elementów — a to jest dokładnie to, co za chwilę (dział PHP) będziesz wyświetlać po pobraniu danych z bazy: listy produktów, tabele wyników zapytań SELECT. Linki z kolei łączą pojedyncze strony w spójny serwis.

Teoria

Trzy kolejne znaczniki, których używa się praktycznie na każdej stronie internetowej: listy, tabele i linki.

Listy: <ul> (lista nieuporządkowana, wypunktowana) i <ol> (lista uporządkowana, numerowana) — obie zawierają elementy <li> (list item).

Tabele: <table> to cała tabela, <tr> (table row) to wiersz, <th> (table header) to nagłówek kolumny, <td> (table data) to zwykła komórka. Tabel używa się do prezentowania DANYCH tabelarycznych (np. cennik, wyniki wyszukiwania z bazy danych) — nie do układania całej strony (do tego służy CSS, Lekcja 6).

Linki: <a href="adres">tekst linku</a> — atrybut href określa, dokąd link prowadzi. Może to być inna strona (https://...), inny plik na tym samym serwerze (katalog.html) albo miejsce na tej samej stronie (#sekcja).

Obrazy: <img src="adres-obrazka" alt="opis"> — atrybut alt jest ważny: to tekst zastępczy dla czytników ekranu i wyświetlany, gdy obraz się nie załaduje.

Przykład z życia

Kiedy w Lekcji 11 działu PHP nauczysz się pobierać dane z bazy przez SELECT, właśnie w takiej tabeli HTML wyświetlisz wynik — pętla PHP wygeneruje jeden wiersz <tr> dla każdego filmu z bazy danych.

Kod (HTML)

<h2>Katalog filmów — najpopularniejsze</h2>
<table>
    <tr>
        <th>Tytuł</th>
        <th>Rok</th>
        <th>Cena wypożyczenia</th>
    </tr>
    <tr>
        <td>Podróż w czasie</td>
        <td>2021</td>
        <td>9.99 zł</td>
    </tr>
    <tr>
        <td>Ostatni bastion</td>
        <td>2019</td>
        <td>7.99 zł</td>
    </tr>
</table>

<h2>Menu strony</h2>
<ul>
    <li><a href="index.html">Strona główna</a></li>
    <li><a href="katalog.html">Katalog filmów</a></li>
    <li><a href="logowanie.html">Logowanie</a></li>
</ul>

Komentarz i wyjaśnienie kodu

Zwróć uwagę, że pierwszy wiersz tabeli używa <th> zamiast <td> — to semantycznie mówi przeglądarce (i czytnikom ekranu), że to nagłówek kolumny, a nie zwykłe dane, dzięki czemu domyślnie wyświetla się pogrubiony i wyśrodkowany. Link href="katalog.html" to ścieżka WZGLĘDNA — zakłada, że plik katalog.html leży w tym samym folderze co bieżąca strona.

Ćwiczenie samodzielne

Zbuduj listę nawigacyjną (<ul>) z trzema linkami do różnych (jeszcze nieistniejących) podstron swojej strony.

Zadania do pracy własnej

Stwórz listę numerowaną (<ol>) z pięcioma krokami dowolnej instrukcji (np. "jak zaparzyć herbatę").
Zbuduj tabelę cennika z co najmniej 4 wierszami danych i nagłówkiem kolumn (nazwa usługi, cena, czas trwania).
Rozbuduj szkielet serwisu filmowego z Lekcji 1 o: menu nawigacyjne (lista linków do Strona główna/Katalog/Logowanie/Koszyk) oraz tabelę z co najmniej 5 filmami (tytuł, rok, gatunek, cena) — to jest dokładnie ta struktura, którą w dziale PHP wypełnisz prawdziwymi danymi z bazy.

Typowe błędy

Częsty błąd to zapomnienie zamknięcia znacznika <li> lub <tr>/<td> — przeglądarki są tu dość wyrozumiałe, ale błąd utrudnia dalsze modyfikacje. Drugi błąd: używanie tabel do układania CAŁEJ strony (menu, stopka, kolumny) zamiast tylko rzeczywistych danych tabelarycznych — to dawna, przestarzała praktyka, dziś do układu służy CSS (Lekcja 6). Trzeci: brak atrybutu alt w obrazkach.

Nawiązanie do egzaminu zawodowego

Umiejętność budowy list i tabel jest fundamentem pod efekt INF.03.5.3.6 ("korzysta z funkcji modelu DOM", dział JavaScript) oraz pod wyświetlanie wyników zapytań SQL w PHP (Lekcja 11 działu Aplikacje internetowe PHP) — to jedno z najczęstszych zastosowań tabel HTML w praktyce.