Jedenaste przykazanie: Nie bądź obojętny!

Tabele w HTML

Szczegóły
Kategoria: Czaty z AI

Jedna tabela

Tabelę w HTML tworzy się za pomocą znacznika , wewnątrz którego umieszcza się wiersze, nagłówki oraz komórki z danymi. [1, 2]
Podstawowa struktura tabeli
Do zbudowania prostej tabeli używa się następujących znaczników: [1, 2]
– otwiera i zamyka całą tabelę.
– grupa nagłówkowa tabeli (opcjonalna, ale polecana).
– główna treść (dane) tabeli.
– pojedynczy wiersz tabeli (table row).
– komórka nagłówka (table header, domyślnie pogrubiona).
– zwykła komórka z danymi (table data).
Przykład kodu
Oto prosty przykład tabeli zawierającej nagłówek oraz dwa wiersze danych:
html
<table>
  <thead>
    <tr>
      <th>Imię</th>
      <th>Nazwisko</th>
      <th>Wiek</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Anna</td>
      <td>Kowalska</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Jan</td>
      <td>Nowak</td>
      <td>30</td>
    </tr>
  </tbody>
</table>
Używaj kodu z rozwagą.
Stylizowanie tabeli
Współczesny HTML nie używa już atrybutów takich jak border czy width wewnątrz znaczników – do wyglądu tabeli stosuje się CSS. Najprostsze obramowanie dodasz w stylach: [1]
css
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 8px;
}
Używaj kodu z rozwagą.
 

Dwie tabele

Aby umieścić dwie tabele obok siebie w HTML i nadać im określoną szerokość, najlepiej użyć nowoczesnego CSS Flexbox lub CSS Grid. Najwygodniejszym rozwiązaniem jest utworzenie kontenera, który przechowa obie tabele.
Oto gotowy i najprostszy kod:
html
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Dwie tabele obok siebie</title>
    <style>
        /* Kontener dla tabel */
        .tabel-kontener {
            display: flex;       /* Ustawia elementy obok siebie */
            gap: 20px;           /* Odstęp między tabelami */
            width: 100%;         /* Szerokość całego kontenera */
        }

        /* Styl dla każdej z tabel */
        .moja-tabela {
            width: 45%;          /* Określona szerokość każdej tabeli */
            border-collapse: collapse; /* Łączenie obramowania */
        }

        /* Dodatkowe formatowanie tabeli dla czytelności */
        .moja-tabela th, .moja-tabela td {
            border: 1px solid #ccc;
            padding: 8px;
            text-align: left;
        }
        .moja-tabela th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>

    <div class="tabel-kontener">
        <!-- Tabela 1 -->
        <table class="moja-tabela">
            <thead>
                <tr>
                    <th>Nagłówek A1</th>
                    <th>Nagłówek A2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Dane 1</td>
                    <td>Dane 2</td>
                </tr>
            </tbody>
        </table>

        <!-- Tabela 2 -->
        <table class="moja-tabela">
            <thead>
                <tr>
                    <th>Nagłówek B1</th>
                    <th>Nagłówek B2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Dane 3</td>
                    <td>Dane 4</td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
</html>
Używaj kodu z rozwagą.
Jak możesz dostosować szerokość?
Wartości procentowe (width: 45%): Sprawiają, że tabele są elastyczne i dopasowują się do ekranu (np. telefonu). Pamiętaj, aby suma szerokości obu tabel i odstępu (gap) nie przekraczała 100%.
Stałe wartości w pikselach (width: 400px): Jeśli w klasie .moja-tabela wpiszesz np. width: 400px, obie tabele będą miały zawsze dokładnie taką szerokość, niezależnie od rozmiaru ekranu.
Jeśli chcesz dopasować ten kod do konkretnego projektu, daj mi znać:
  • Czy tabele mają mieć równe szerokości, czy jedna powinna być większa od drugiej?
  • Czy układ ma być responsywny (czyli na telefonach tabele powinny wskakiwać jedna pod drugą)?
 

Main Menu