Kategorie
Kurs HTML

Tabele HTML

Z pewnością jednym z istotnych elementów, które można tworzyć w HTML, są tabele HTML. Przede wszystkim tabele pozwalają na przejrzyste przedstawienie danych w postaci wierszy i kolumn. W tym artykule omówimy, jak tworzyć tabele w HTML, wraz z przykładami.

Podstawowa Struktura Tabeli

Tabele w HTML tworzymy za pomocą elementu <table>. Składa się ona z kilku podstawowych tagów:

  • <table>: Główny tag definiujący tabelę
  • <tr> (table row): Definiuje wiersz tabeli
  • <th> (table header): Definiuje nagłówek kolumny
  • <td> (table data): Definiuje komórkę tabeli
<table>
    <tr>
        <th>Imię</th>
        <th>Nazwisko</th>
        <th>Wiek</th>
    </tr>
    <tr>
        <td>Jan</td>
        <td>Kowalski</td>
        <td>28</td>
    </tr>
    <tr>
        <td>Anna</td>
        <td>Nowak</td>
        <td>22</td>
    </tr>
</table>

Przykład

Imię Nazwisko Wiek
Jan Kowalski 28
Joanna Nowak 22

W powyższym przykładzie mamy tabelę z trzema kolumnami: „Imię”, „Nazwisko” i „Wiek”. Pierwszy wiersz zawiera nagłówki kolumn (<th>), a kolejne wiersze zawierają dane (<td>).

Atrybuty Tabeli

HTML oferuje różne atrybuty, które pomagają w stylizacji i zarządzaniu tabelami. Oto kilka z nich:

  • border: Ustawia grubość ramki wokół tabeli
  • cellpadding: Ustawia odstęp między zawartością komórki a jej krawędzią
  • cellspacing: Ustawia odstęp między komórkami

Przykład z Atrybutami

<table border="1" cellpadding="10" cellspacing="5">
    <tr>
        <th>Imię</th>
        <th>Nazwisko</th>
        <th>Wiek</th>
    </tr>
    <tr>
        <td>Jan</td>
        <td>Kowalski</td>
        <td>28</td>
    </tr>
    <tr>
        <td>Joanna</td>
        <td>Nowak</td>
        <td>22</td>
    </tr>
</table>
Imię Nazwisko Wiek
Jan Kowalski 28
Joanna Nowak 22

W powyższym przykładzie użyliśmy atrybutów cellpadding i cellspacing, aby zwiększyć odstępy wewnątrz komórek oraz między nimi.

Przykład Zagnieżdżonej Tabeli

Zagnieżdżone tabele HTML

Tabele mogą być zagnieżdżane wewnątrz innych tabel, co pozwala na tworzenie bardziej skomplikowanych struktur danych.

<table border="1">
    <tr>
        <th>Imię</th>
        <th>Nazwisko</th>
        <th>Adres</th>
    </tr>
    <tr>
        <td>Jan</td>
        <td>Kowalski</td>
        <td>
            <table border="1">
                <tr>
                    <th>Ulica</th>
                    <th>Miasto</th>
                </tr>
                <tr>
                    <td>Wiosenna 5</td>
                    <td>Warszawa</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>Joanna</td>
        <td>Nowak</td>
        <td>
            <table border="1">
                <tr>
                    <th>Ulica</th>
                    <th>Miasto</th>
                </tr>
                <tr>
                    <td>Letnia 8</td>
                    <td>Kraków</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
Imię Nazwisko Adres
Jan Kowalski
Ulica Miasto
Wiosenna 5 Warszawa
Joanna Nowak
Ulica Miasto
Letnia 8 Kraków

W tym przykładzie w kolumnie „Adres” dla każdej osoby znajduje się zagnieżdżona tabela zawierająca informacje o ulicy i mieście.

Kolspan i Rowspan

Atrybuty colspan i rowspan pozwalają na scalanie komórek w tabeli.

  • colspan: Łączy komórki w poziomie (kolumny)
  • rowspan: Łączy komórki w pionie (wiersze)

Przykład z Colspan i Rowspan

<table border="1">
    <tr>
        <th colspan="2">Nagłówek Kolumny 1 i 2</th>
        <th>Nagłówek Kolumny 3</th>
    </tr>
    <tr>
        <td rowspan="2">Scalona Komórka 1</td>
        <td>Komórka 2</td>
        <td>Komórka 3</td>
    </tr>
    <tr>
        <td>Komórka 4</td>
        <td>Komórka 5</td>
    </tr>
</table>
Nagłówek Kolumny 1 i 2 Nagłówek Kolumny 3
Scalona Komórka 1 Komórka 2 Komórka 3
Komórka 4 Komórka 5

W powyższym przykładzie pierwsza komórka pierwszego wiersza łączy dwie kolumny dzięki colspan="2", a pierwsza komórka drugiego wiersza łączy dwa wiersze dzięki rowspan="2".

Stylizacja Tabeli za pomocą CSS

Aby bardziej zaawansowanie stylizować tabele, warto użyć CSS (Cascading Style Sheets).

Kolor tabeli HTML

Aby ustawić kolor tła dla całej tabeli, możesz użyć właściwości background-color w stylach CSS.

table { background-color: #eee; }

Poniżej bardziej rozbudowany pomysł na nadawanie koloru tła tabeli HTML.

table {
    width: 100%;
    border-collapse: collapse;
    background-color: #f0f8ff; /* Kolor tła całej tabeli */
    }
th, td {
    border: 1px solid #00bfff;
    padding: 8px;
    text-align: left;
    color: #0000cd;
    }
th {
    background: linear-gradient(to bottom, #00f, #00BFFF); /* Gradient dla nagłówków */
    color: white; /* Kolor tekstu nagłówków */
    }
    tr:nth-child(even) {
    background-color: #e0ffff; /* Kolor tła dla parzystych wierszy */
    }
    tr:nth-child(odd) {
    background-color: #ffffff; /* Kolor tła dla nieparzystych wierszy */
    }

W tym przykładzie:

  • background-color: #f0f8ff; ustawia kolor tła całej tabeli
  • background: linear-gradient(to bottom, #00f, #00bfff); ustawia pionowy gradient niebiesko-turkusowy dla nagłówków
  • color: white; ustawia kolor tekstu w nagłówkach na biały
  • color: #0000cd; ustawia kolor tekstu w komórkach
  • border: 1px solid #00bfff; ustawia kolor obramowania
  • tr:nth-child(even) { background-color: #e0ffff; } ustawia kolor tła dla parzystych wierszy na jasnoniebieski
  • tr:nth-child(odd) { background-color: #ffffff; } ustawia kolor tła dla nieparzystych wierszy na biały
Imię Nazwisko Wiek
Jan Kowalski 15
Jonna Nowak 14
Adam Wiśniewski 25

Obramowanie tabeli HTML

Aby dodać obramowanie do tabeli, można użyć właściwości border w CSS. Można ustawić obramowanie dla całej tabeli, nagłówków i komórek danych.

table { border: 1px dotted black; }

Poniżej pomysł na dodanie obramowania dla tabeli HTML.

table {
    width: 100%;
    border-collapse: collapse; /* Usuwa odstępy między komórkami */
    }
th, td {
    border: 1px dashed green; /* Obramowanie dla komórek nagłówków i danych */
    padding: 8px;
    text-align: left;
    }

W tym przykładzie:

  • border: 1px dashed green; dodaje cienkie, czarne obramowanie do każdej komórki w tabeli
  • border-collapse: collapse; usuwa odstępy między komórkami, łącząc ich obramowania w jedno
Imię Nazwisko Wiek
Jan Kowalski 28
Joanna Nowak 22
Adam Wiśniewski 25

Gotowa tabela HTML – kod

Przykład ze stylem w CSS.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Stylizowana Tabela</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #eee;
            font-weight: bold;
        }
        tr:nth-child(even) {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Imię</th>
            <th>Nazwisko</th>
            <th>Wiek</th>
        </tr>
        <tr>
            <td>Jan</td>
            <td>Kowalski</td>
            <td>28</td>
        </tr>
        <tr>
            <td>Joanna</td>
            <td>Nowak</td>
            <td>22</td>
        </tr>
        <tr>
            <td>Adam</td>
            <td>Wiśniewski</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>
Imię Nazwisko Wiek
Jan Kowalski 28
Joanna Nowak 22
Adam Wiśniewski 25

W tym przykładzie zastosowałem stylizację za pomocą CSS, aby tabela była bardziej estetyczna. Dodatkowo użyłem border-collapse do zlikwidowania odstępów między komórkami oraz nth-child do naprzemiennego kolorowania wierszy.

Tabele HTML – podsumowanie

Bez wątpienia tabele w HTML są potężnym narzędziem do organizowania i prezentowania danych. Po pierwsze poczynajac od podstawowych tabel z nagłówkami i komórkami, przez bardziej zaawansowane struktury z zagnieżdżonymi tabelami, aż po zaawansowaną stylizację za pomocą CSS – możliwości są niemal nieograniczone. Dzięki temu przewodnikowi masz solidne podstawy do tworzenia własnych tabel w HTML.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *