Tworzenie tabel

6.1 Elementy table i tr

Tabele w HTML są używane do organizowania danych w formacie tabeli. Podstawowe tagi używane do tworzenia tabeli to <table>, <tr>, i <td>. Przyjrzyjmy się im bliżej.

<table>

Tag <table> jest kontenerem dla całej tabeli. W jego wnętrzu znajdują się wiersze tabeli, każdy z nich jest zdefiniowany za pomocą tagu <tr>.

Przykład użycia:

    
      <table>
        <!-- wiersze i komórki tabeli będą tutaj dodane -->
      </table>
    
  

Tag <tr> (table row)

Tag <tr> oznacza wiersz tabeli. Wewnątrz tagu <tr> znajdują się komórki tabeli, każda z nich jest zdefiniowana za pomocą tagu <td> lub <th>.

Przykład użycia:

    
      <table>
        <tr>
          <!-- komórki wiersza będą tutaj dodane -->
        </tr>
      </table>
    
  

6.2 Elementy td i th

Tag <td> (table data)

Tag <td> jest używany do zdefiniowania komórki danych w wierszu tabeli. Te komórki zawierają dane tabeli i są umieszczane wewnątrz wiersza oznaczonego tagiem .

Przykład użycia:

    
      <table>
        <tr>
          <td>Komórka 1</td>
          <td>Komórka 2</td>
          <td>Komórka 3</td>
        </tr>
      </table>
    
  

Tag <th> (table head)

Tag <th> jest używany do oznaczenia komórek nagłówka tabeli. Tekst wewnątrz <th> zazwyczaj jest wyświetlany pogrubieniem i wyrównany do środka.

Przykład użycia:

    
      <table>
        <tr>
          <th>Nagłówek 1</th>
          <th>Nagłówek 2</th>
          <th>Nagłówek 3</th>
        </tr>
      </table>
    
  

Przykład tabeli:

    
      <table>
        <tr>
          <th>Imię</th> <th>Wiek</th> <th>Miasto</th>
        </tr>
        <tr>
          <td>Iwan</td> <td>30</td> <td>Toronto</td>
        </tr>
        <tr>
          <td>Maria</td> <td>25</td> <td>Frankfurt</td>
        </tr>
        <tr>
          <td>Nina</td> <td>35</td> <td>Paryż</td>
        </tr>
      </table>
    
  

6.3 Stylizacja tabel

Tabele koniecznie trzeba stylizować przy pomocy CSS — to znacznie poprawia ich czytelność i przejrzystość danych.

Na przykład, jeśli chcesz dodać obramowanie każdej komórki: świetnie, ale ponieważ każda komórka ma swoje obramowanie, teraz każda para komórek jest oddzielona podwójnym obramowaniem — po jednym z każdej z komórek. 🤦‍♂️

Jeśli chcesz, żeby obramowanie wyglądało tak, jak chcesz, musisz połączyć sąsiadujące obramowania za pomocą CSS. Jest do tego specjalna właściwość — border-collapse.

Oto przykład solidnej stylizacji naszej tabeli:

    
      <table>
        <tr>
          <th>Imię</th> <th>Wiek</th> <th>Miasto</th>
        </tr>
        <tr>
          <td>Iwan</td> <td>30</td> <td>Toronto</td>
        </tr>
        <tr>
          <td>Maria</td> <td>25</td> <td>Frankfurt</td>
        </tr>
        <tr>
          <td>Nina</td> <td>35</td> <td>Paryż</td>
        </tr>
      </table>
    
  

    
      table {
        width: 50%; /* Ustawia szerokość tabeli */
        border-collapse: collapse; /* Usuwa podwójne obramowania między komórkami */
      }

      th, td {
        border: 1px solid black; /* Ustawia obramowanie dla komórek */
        padding: 8px; /* Dodaje odstępy wewnątrz komórek */
        text-align: left; /* Wyrównuje tekst do lewej */
      }

      th {
        background-color: #f2f2f2; /* Ustawia kolor tła dla nagłówków */
      }
    
  

Tu widzimy, że:

• Każda komórka ma obramowanie o grubości 1 piksela i czarnym kolorze
• Podwójne obramowania między komórkami zostały usunięte
• Każda komórka ma wewnętrzne odstępy, aby tekst nie przylegał do ram
• Komórki nagłówka mają oddzielny kolor tła

Piękno!