Tabele w HTML – opis i wyjaśnienie

W HTML tabelę można stworzyć przy użyciu tagów związanych z tabelami, takich jak <table>, <tr>, <th>, <td> i inne. Tabele są wykorzystywane do prezentowania danych w formie wierszy i kolumn. Oto szczegóły i przykłady:

1. Podstawowa struktura tabeli w HTML

Tag <table> służy do tworzenia tabel w HTML. Oto przykład prostej tabeli z trzema nagłówkami i dwoma wierszami danych:

        <table>
          <tr>
            <th>Nagłówek 1</th>
            <th>Nagłówek 2</th>
            <th>Nagłówek 3</th>
          </tr>
          <tr>
            <td>Wiersz 1, Kolumna 1</td>
            <td>Wiersz 1, Kolumna 2</td>
            <td>Wiersz 1, Kolumna 3</td>
          </tr>
          <tr>
            <td>Wiersz 2, Kolumna 1</td>
            <td>Wiersz 2, Kolumna 2</td>
            <td>Wiersz 2, Kolumna 3</td>
          </tr>
        </table>
            

Wyjaśnienie:

• <table> — tworzy tabelę.
• <tr> — definiuje wiersz tabeli.
• <th> — komórka nagłówka tabeli (pogrubiona i wyśrodkowana domyślnie).
• <td> — komórka tabeli (zawiera dane).

2. Dodawanie obramowania do tabeli

Aby tabela była bardziej widoczna, możemy dodać obramowanie do komórek i całej tabeli:

        <table border="1">
          <tr>
            <th>Nagłówek 1</th>
            <th>Nagłówek 2</th>
            <th>Nagłówek 3</th>
          </tr>
          <tr>
            <td>Wiersz 1, Kolumna 1</td>
            <td>Wiersz 1, Kolumna 2</td>
            <td>Wiersz 1, Kolumna 3</td>
          </tr>
          <tr>
            <td>Wiersz 2, Kolumna 1</td>
            <td>Wiersz 2, Kolumna 2</td>
            <td>Wiersz 2, Kolumna 3</td>
          </tr>
        </table>
            

Wyjaśnienie:

• Atrybut border="1" dodaje cienkie obramowanie do tabeli i komórek.

3. Tabela z nagłówkiem i stopką

Tabele mogą mieć nagłówek i stopkę, które ułatwiają organizację danych:

        <table>
          <thead>
            <tr>
              <th>Imię</th>
              <th>Wiek</th>
              <th>Miasto</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Alicja</td>
              <td>30</td>
              <td>Warszawa</td>
            </tr>
            <tr>
              <td>Jan</td>
              <td>25</td>
              <td>Kraków</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td colspan="3">Tabela zakończona</td>
            </tr>
          </tfoot>
        </table>
            

Wyjaśnienie:

• <thead> — definiuje nagłówek tabeli.
• <tbody> — definiuje główną część tabeli (z danymi).
• <tfoot> — definiuje stopkę tabeli.

4. Tabela z łączeniem komórek (colspan, rowspan)

Czasem potrzebujemy połączyć komórki w tabeli, aby stworzyć szersze lub wyższe komórki. Można to zrobić za pomocą atrybutów colspan (łączących kolumny) i rowspan (łączących wiersze):

        <table border="1">
          <tr>
            <th rowspan="2">Imię</th>
            <th colspan="2">Adres</th>
          </tr>
          <tr>
            <th>Miasto</th>
            <th>Kod</th>
          </tr>
          <tr>
            <td>Anna</td>
            <td>Warszawa</td>
            <td>00-001</td>
          </tr>
          <tr>
            <td>Piotr</td>
            <td>Kraków</td>
            <td>30-002</td>
          </tr>
        </table>
            

Wyjaśnienie:

• rowspan="2" — łączy dwie komórki w kolumnie „Imię” na dwóch wierszach.
• colspan="2" — łączy dwie komórki w wierszu „Adres” na dwie kolumny.

5. Tabela z zastosowaniem CSS wiecej o CSS w dziale CSS

Możesz także stosować stylizację tabel za pomocą CSS, aby dostosować wygląd tabeli i komórek:

        <style>
          table {
            width: 100%;
            border-collapse: collapse;
          }
        
          th, td {
            padding: 10px;
            text-align: left;
            border: 1px solid #ddd;
          }
        
          th {
            background-color: #f2f2f2;
          }
        
          tr:nth-child(even) {
            background-color: #f9f9f9;
          }
        
          tr:hover {
            background-color: #ddd;
          }
        </style>
        
        <table>
          <tr>
            <th>Imię</th>
            <th>Wiek</th>
            <th>Miasto</th>
          </tr>
          <tr>
            <td>Alicja</td>
            <td>30</td>
            <td>Warszawa</td>
          </tr>
          <tr>
            <td>Jan</td>
            <td>25</td>
            <td>Kraków</td>
          </tr>
        </table>
            

Wyjaśnienie:

• Atrybut border-collapse: collapse; sprawia, że obramowania tabeli zlewają się w jedno.
• Atrybut tr:nth-child(even) zmienia tło co drugiego wiersza.

To wszystko, jeśli chodzi o podstawy tabel w HTML! Teraz możesz zacząć tworzyć bardziej zaawansowane tabele, które będą odpowiadać Twoim potrzebom.