Łączenie komórek tabeli w HTML

8.1 Łączenie komórek w poziomie

Łączenie komórek w tabeli pozwala tworzyć bardziej elastyczne i informacyjne przedstawienia danych. To szczególnie przydatne, gdy chcesz połączyć kilka komórek, by stworzyć nagłówki lub dane zbiorcze. W HTML do łączenia komórek używamy atrybutów colspan i rowspan.

Atrybut colspan

Atrybut colspan łączy komórki w poziomie. Określa, ile kolumn powinna zajmować jedna komórka. Na przykład, jeśli masz komórkę z colspan="2", zajmie ona miejsce dwóch zwykłych komórek w wierszu.

Przykład użycia:

Wyobraź sobie, że masz tabelę z trzema kolumnami i chcesz, aby pierwsza komórka w wierszu zajmowała dwie kolumny. Używasz colspan="2", aby połączyć te dwie komórki. To przydatne przy tworzeniu nagłówków, które obejmują kilka kolumn lub dla połączenia danych, które odnoszą się do kilku kategorii.

    
      <table border="1">
        <tr>
          <th>Imię</th>
          <th>Wiek</th>
          <th>Miasto</th>
        </tr>
        <tr>
          <td>Alicja</td>
          <td>25</td>
          <td>Londyn</td>
        </tr>
        <tr>
          <td colspan="2">Suma</td>
          <td>2 wpisy</td>
        </tr>
      </table>
    
  

8.2 Łączenie komórek w pionie

Atrybut rowspan łączy komórki w pionie. Określa, ile wierszy powinna zajmować jedna komórka. Na przykład, jeśli masz komórkę z rowspan="2", zajmie ona miejsce dwóch zwykłych komórek w kolumnie.

Przykład użycia:

Wyobraź sobie, że masz tabelę z trzema wierszami i chcesz, aby pierwsza komórka w kolumnie zajmowała dwa wiersze. Używasz rowspan="2", aby połączyć te dwie komórki. To przydatne przy tworzeniu tabel, gdzie jedna kategoria danych odnosi się do kilku wierszy, jak złączone nagłówki lub dane zbiorcze.

    
      <table border="1">
        <tr>
          <th>Imię</th>
          <th>Projekt</th>
          <th>Miasto</th>
        </tr>
        <tr>
          <td rowspan="2">Alicja</td>
          <td>Projekt A</td>
          <td>Londyn</td>
        </tr>
        <tr>

          <td>Projekt B</td>
          <td>Batumi</td>
        </tr>
      </table>
    
  

8.3 Wyjaśnienie działania

Jak działają colspan i rowspan

Łączenie poziome (colspan): wyobraź sobie, że tworzysz tabelę planu zajęć, gdzie jeden kurs odbywa się w kilku salach. Możesz połączyć komórki przy pomocy colspan, aby wskazać, że jeden kurs zajmuje dwa terminy.

Łączenie pionowe (rowspan): wyobraź sobie, że tworzysz tabelę wyników zawodów, gdzie jeden uczestnik bierze udział w kilku etapach. Możesz połączyć komórki przy pomocy rowspan, aby wskazać, że jeden uczestnik obejmuje dwa etapy.

Praktyczne przykłady

Tworzenie nagłówków obejmujących kilka kolumn: jeśli masz tabelę z różnymi kategoriami danych i chcesz stworzyć nagłówek, który obejmuje kilka kolumn, użyj colspan. Na przykład, nagłówek "Informacje o pracownikach" może obejmować kolumny "Imię", "Wiek" i "Dział".

Łączenie danych w pionie: jeśli masz dane, które trzeba połączyć w pionie, na przykład, kilka wpisów dla tej samej osoby lub obiektu, użyj rowspan. Na przykład, jeśli masz informacje o projekcie, i jeden projekt zajmuje kilka wierszy (na przykład fazy projektu), połącz wiersze za pomocą rowspan.

8.4 Przykłady

Wyobraź sobie, że masz tabelę pokazującą pracowników i ich udział w różnych projektach:

• Pracownicy: Jan, Maria, Piotr.
• Projekty: Projekt A, Projekt B.

Chcesz połączyć komórki, aby pokazać, że Jan i Maria pracują nad dwoma projektami jednocześnie:

    
<table border="1">
    <tr>
        <th>Imię</th>
        <th>Projekt A</th>
        <th>Projekt B</th>
        <th>Miasto</th>
    </tr>
    <tr>
        <td>Jan</td>
        <td colspan="2">Tak</td>
        <td>Londyn</td>
    </tr>
    <tr>
        <td>Maria</td>
        <td colspan="2">Tak</td>
        <td>Londyn</td>
    </tr>
    <tr>
        <td>Piotr</td>
        <td>Tak</td>
        <th>Nie</th>
        <td>Rzym</td>
    </tr>
</table>
    
  

Lub, jeśli chcesz pokazać, że Jan pracuje nad dwoma projektami:

    
      <table border="1">
        <tr>
          <th>Imię</th>
          <th>Projekt</th>
          <th>Miasto</th>
        </tr>
        <tr>
          <td rowspan="2">Jan</td>
          <td>Projekt A</td>
          <td>Londyn</td>
        </tr>
        <tr>
          <!-- empty -->
          <td>Projekt B</td>
          <td>Londyn</td>
        </tr>
        <tr>
          <td>Siergiej</td>
          <td>Projekt C</td>
          <td>Rzym</td>
        </tr>
      </table>
    
  

Specjalnie umieściłem komentarz w miejscu komórki, którą "pożarło" rozszerzenie sąsiedniej. To lepiej pokazuje, gdzie będą wyświetlane pozostałe.