Łączenie komórek (colspan, rowspan)

Lekcja 7.3: Łączenie komórek (colspan, rowspan)

Strona główna > Rozdział 7: Tabele > Łączenie komórek (colspan, rowspan)

Tworzenie bardziej złożonych tabel

Standardowa struktura tabeli zakłada, że każda komórka zajmuje dokładnie jedną kolumnę i jeden wiersz. Czasami jednak potrzebujemy stworzyć tabelę, w której niektóre komórki rozciągają się na więcej niż jedną kolumnę lub więcej niż jeden wiersz. Do tego celu służą atrybuty colspan i rowspan.

Atrybuty te można dodawać zarówno do komórek nagłówkowych (<th>), jak i komórek danych (<td>).

Atrybut `colspan` (Column Span)

Atrybut colspan pozwala komórce rozciągnąć się w poziomie na określoną liczbę kolumn. Wartością atrybutu jest liczba całkowita większa od 0, wskazująca, ile kolumn ma zająć dana komórka.

Przykład użycia `colspan`:

Załóżmy, że chcemy stworzyć tabelę z nagłówkiem obejmującym dwie kolumny.

<table class="basic-table">
  <tr>
    <th colspan="2">Dane Osobowe</th> <!-- Ta komórka zajmuje 2 kolumny -->
  </tr>
  <tr>
    <th>Imię</th>
    <td>Jan</td>
  </tr>
  <tr>
    <th>Nazwisko</th>
    <td>Kowalski</td>
  </tr>
</table>

Dane Osobowe
Imię	Jan
Nazwisko	Kowalski

W powyższym przykładzie pierwsza komórka nagłówkowa (<th>) w pierwszym wierszu ma colspan="2", co oznacza, że rozciąga się ona na dwie kolumny. Dlatego kolejne wiersze mają już po dwie komórki (jedną nagłówkową <th> i jedną danych <td>), aby dopasować się do szerokości zdefiniowanej przez nagłówek.

Ważne: Kiedy używasz colspan, musisz pamiętać, aby w tym samym wierszu (<tr>) umieścić odpowiednio mniej komórek, ponieważ jedna z nich zajmuje już miejsce kilku kolumn.

Atrybut `rowspan` (Row Span)

Atrybut rowspan pozwala komórce rozciągnąć się w pionie na określoną liczbę wierszy. Wartością atrybutu jest liczba całkowita większa od 0, wskazująca, ile wierszy ma zająć dana komórka.

Przykład użycia `rowspan`:

Załóżmy, że chcemy stworzyć tabelę, w której jedna kategoria obejmuje kilka podkategorii.

<table class="basic-table">
  <tr>
    <th>Kategoria</th>
    <th>Podkategoria</th>
    <th>Ilość</th>
  </tr>
  <tr>
    <td rowspan="2">Owoce</td> <!-- Ta komórka zajmuje 2 wiersze -->
    <td>Jabłka</td>
    <td>10</td>
  </tr>
  <tr>
    <!-- Brak pierwszej komórki, bo zajmuje ją komórka 'Owoce' z poprzedniego wiersza -->
    <td>Banany</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Warzywa</td>
    <td>Marchew</td>
    <td>15</td>
  </tr>
</table>

Kategoria	Podkategoria	Ilość
Owoce	Jabłka	10
Owoce	Banany	5
Warzywa	Marchew	15

W tym przykładzie komórka "Owoce" w drugim wierszu ma rowspan="2", co oznacza, że rozciąga się na bieżący i następny wiersz. Dlatego w trzecim wierszu nie ma już pierwszej komórki - jej miejsce zajmuje komórka "Owoce" z wiersza powyżej.

Ważne: Kiedy używasz rowspan, musisz pamiętać, aby w kolejnych wierszach (objętych przez rowspan) pominąć komórkę w odpowiedniej kolumnie.

Łączenie `colspan` i `rowspan`

Można również używać obu atrybutów jednocześnie w tej samej komórce, aby rozciągnąć ją zarówno w poziomie, jak i w pionie.

<table class="basic-table">
  <tr>
    <th>Nagłówek 1</th>
    <th>Nagłówek 2</th>
    <th>Nagłówek 3</th>
  </tr>
  <tr>
    <td rowspan="2" colspan="2">Komórka 1 (2 wiersze, 2 kolumny)</td>
    <td>Komórka 2</td>
  </tr>
  <tr>
    <!-- Brak pierwszych dwóch komórek -->
    <td>Komórka 3</td>
  </tr>
  <tr>
    <td>Komórka 4</td>
    <td>Komórka 5</td>
    <td>Komórka 6</td>
  </tr>
</table>

Nagłówek 1	Nagłówek 2	Nagłówek 3
Komórka 1 (2 wiersze, 2 kolumny)		Komórka 2
Komórka 1 (2 wiersze, 2 kolumny)		Komórka 3
Komórka 4	Komórka 5	Komórka 6

Dostępność a łączenie komórek

Łączenie komórek może utrudnić zrozumienie struktury tabeli przez technologie wspomagające, takie jak czytniki ekranu. Jeśli to możliwe, staraj się unikać zbyt skomplikowanych struktur z wieloma połączonymi komórkami.

Jeśli musisz użyć colspan lub rowspan, upewnij się, że:

Struktura tabeli pozostaje logiczna.
Używasz poprawnie znaczników <th>.
Rozważ użycie atrybutów scope (w <th>) oraz headers (w <td>), aby jawnie powiązać komórki danych z odpowiednimi nagłówkami, zwłaszcza w bardzo złożonych tabelach (omówimy to w lekcji o dostępności tabel).

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz tabelę przedstawiającą prosty plan lekcji na dwa dni (poniedziałek, wtorek) i dwie godziny (8:00, 9:00). Użyj colspan dla nagłówka dnia i rowspan, jeśli jakaś lekcja trwa dwie godziny.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Plan Lekcji</title>
    <style>
        table, th, td {
            border: 1px solid #ccc;
            border-collapse: collapse;
            padding: 8px;
            text-align: center;
        }
        thead { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h1>Plan Lekcji</h1>
    <table>
        <thead>
            <tr>
                <th>Godzina</th>
                <th>Poniedziałek</th>
                <th>Wtorek</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>8:00 - 8:45</td>
                <td rowspan="2">Matematyka</td> <!-- Matematyka trwa 2 godziny -->
                <td>Język Polski</td>
            </tr>
            <tr>
                <td>9:00 - 9:45</td>
                <!-- Brak komórki dla poniedziałku -->
                <td>Historia</td>
            </tr>
             <tr>
                <td colspan="3">Przerwa</td> <!-- Przerwa zajmuje całą szerokość -->
            </tr>
            <!-- Można dodać kolejne godziny -->
        </tbody>
    </table>
</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Stwórz tabelę z wynikami sprzedaży dla różnych produktów w różnych kwartałach, używając colspan do grupowania kwartałów lub rowspan do grupowania produktów.
Spróbuj stworzyć bardziej złożoną tabelę, łącząc komórki zarówno w pionie, jak i w poziomie w różnych miejscach.
Zmodyfikuj tabelę z planem lekcji, dodając więcej dni i godzin, i wykorzystaj colspan oraz rowspan do oznaczenia dłuższych zajęć lub okienek.

Najczęściej zadawane pytania

Jak połączyć dwie komórki tabeli w poziomie?

Aby połączyć komórki w poziomie (wzdłuż wiersza), użyj atrybutu colspan="liczba_kolumn" w znaczniku <th> lub <td>. Na przykład colspan="2" połączy bieżącą komórkę z następną po prawej.

Jak połączyć dwie komórki tabeli w pionie?

Aby połączyć komórki w pionie (wzdłuż kolumny), użyj atrybutu rowspan="liczba_wierszy" w znaczniku <th> lub <td>. Na przykład rowspan="2" połączy bieżącą komórkę z komórką znajdującą się pod nią w następnym wierszu.

Co trzeba pamiętać przy używaniu colspan?

Gdy komórka używa colspan="N", musisz pamiętać, aby w tym samym wierszu (<tr>) umieścić o N-1 mniej komórek niż normalnie, ponieważ jedna komórka zajmuje już miejsce N kolumn.

Co trzeba pamiętać przy używaniu rowspan?

Gdy komórka używa rowspan="N", musisz pamiętać, aby w kolejnych N-1 wierszach pominąć komórkę w tej samej kolumnie, ponieważ jej miejsce jest już zajęte przez komórkę rozciągniętą z góry.

Czy łączenie komórek wpływa na dostępność?

Tak, złożone struktury z wieloma połączonymi komórkami mogą utrudniać zrozumienie tabeli przez czytniki ekranu. Należy ich używać rozważnie i dbać o poprawną semantykę nagłówków (<th>) oraz ewentualnie używać atrybutów scope/headers.