Tabele w HTML5

By /

Html

Tabele w HTML5 to niezwykle użyteczne narzędzie do organizacji i prezentacji danych w uporządkowany sposób. Umożliwiają one wyświetlanie informacji w rzędach i kolumnach, co jest szczególnie przydatne przy przedstawianiu liczbowych zestawień danych, harmonogramów, porównań i innych struktur, które wymagają klarownego układu.

Budowa tabeli

Podstawowa tabela w HTML5 składa się z kilku kluczowych elementów:

  • <table>: Główny kontener tabeli.
  • <tr>: Wiersz tabeli (Table Row).
  • <td>: Komórka tabeli (Table Data), używana do wyświetlania danych.
  • <th>: Komórka nagłówka (Table Header), służy do oznaczenia nagłówków kolumn lub wierszy.

Przykład tabeli HTML5

Poniżej znajduje się przykład prostej tabeli HTML5, prezentującej dane na temat różnych modeli samochodów, wraz z komentarzami wyjaśniającymi poszczególne części kodu.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Tabela Samochodów</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
        }
    </style>
</head>
<body>
    <!-- Komentarz: Główny kontener tabeli -->
    <table>
        <!-- Komentarz: Nagłówek tabeli -->
        <tr>
            <th>Marka</th>
            <th>Model</th>
            <th>Rok</th>
        </tr>
        <!-- Komentarz: Wiersze z danymi -->
        <tr>
            <td>Ford</td>
            <td>Mustang</td>
            <td>1969</td>
        </tr>
        <tr>
            <td>Toyota</td>
            <td>Corolla</td>
            <td>2020</td>
        </tr>
        <tr>
            <td>Volvo</td>
            <td>XC60</td>
            <td>2018</td>
        </tr>
    </table>
</body>
</html>

Dodatkowe elementy tabel

HTML5 oferuje również dodatkowe znaczniki do bardziej zaawansowanej strukturyzacji tabel, takie jak:

  • <thead>: Sekcja zawierająca wiersze z nagłówkami kolumn.
  • <tbody>: Główna sekcja tabeli, zawierająca dane.
  • <tfoot>: Sekcja z podsumowaniem lub dodatkowymi informacjami na końcu tabeli.
  • <caption>: Tytuł lub opis tabeli.

Użycie tych elementów pomaga w lepszej organizacji tabeli oraz ułatwia nawigację i dostępność treści.

Podsumowanie

Tabele w HTML5 są potężnym narzędziem do prezentacji danych w czytelnej i uporządkowanej formie. Dzięki ich zastosowaniu, informacje mogą być łatwo dostępne i zrozumiałe dla użytkowników. Pamiętaj o używaniu tabel w sposób przemyślany, aby zapewnić najlepsze doświadczenie użytkownika, oraz o stosowaniu dodatkowych elementów tabeli, które pomagają w organizacji i semantyce prezentowanych danych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDevelopera w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

 

 

Powiązane artykuły

Scroll to Top