Tabele

Tabele HTML są jednym z podstawowych narzędzi służących do organizacji i prezentacji danych w formie siatki na stronach internetowych. Pozwalają one na uporządkowane wyświetlanie informacji w wierszach i kolumnach, co ułatwia ich czytanie i analizę. Od czasów pierwszych wersji HTML, tabele ewoluowały, oferując coraz więcej możliwości formatowania i stylizacji za pomocą CSS, jednak ich podstawowa struktura pozostała niezmieniona.

Podstawowa struktura tabeli

Przyjrzyjmy się prostemu przykładowi kodu, który pokazuje, jak utworzyć tabelę w HTML zawierającą dane o samochodach.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prosta tabela HTML</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: left;
        }
    </style>
</head>
<body>

    <h3>Przykład tabeli: Dane o samochodach</h3>
    <table>
        <!-- Nagłówek tabeli -->
        <tr>
            <th>Marka</th>
            <th>Model</th>
            <th>Rok produkcji</th>
        </tr>
        <!-- Dane tabeli -->
        <tr>
            <td>Ford</td>
            <td>Mustang</td>
            <td>1969</td>
        </tr>
        <tr>
            <td>Toyota</td>
            <td>Corolla</td>
            <td>2020</td>
        </tr>
        <tr>
            <td>BMW</td>
            <td>3 Series</td>
            <td>2022</td>
        </tr>
    </table>

</body>
</html>

  • <table> – Ten znacznik służy do tworzenia tabeli.
  • <tr> – Stoi za “table row” i reprezentuje wiersz w tabeli.
  • <th> – Oznacza “table header” i używany jest do definiowania komórek nagłówka tabeli. Komórki te domyślnie są wyświetlane pogrubione i wyśrodkowane.
  • <td> – Oznacza “table data” i służy do definiowania standardowych komórek tabeli, które zawierają dane.

Formatowanie i stylizacja

W przykładzie użyto również prostego CSS do stylizacji tabeli:

  • border: Ustawia obramowanie wokół tabeli, nagłówków i komórek danych.
  • border-collapse: Łączy obramowania tabeli i komórek w jedną ciągłą linię.
  • padding: Dodaje odstępy wewnątrz komórek, między krawędziami komórek a ich zawartością.
  • text-align: Wyrównuje tekst w komórkach do lewej strony.

Podsumowanie

Tabele HTML są niezwykle użytecznym narzędziem do organizacji danych na stronach internetowych. Dzięki prostocie w implementacji oraz możliwościom rozszerzenia za pomocą CSS, pozwalają na tworzenie zarówno prostych, jak i zaawansowanych layoutów danych. Pamiętając o odpowiedniej semantyce i dostępności, tabele można wykorzystać do poprawy czytelności i użytkowości każdej strony internetowej.

Poprzedni
Następny
Scroll to Top