Scalanie komórek colspan i rowspan

Scalanie komórek: colspan i rowspan

Podczas tworzenia bardziej złożonych tabel często potrzebujesz połączyć kilka komórek w poziomie (na szerokość) lub w pionie (na wysokość). W HTML możesz to zrobić za pomocą atrybutów colspan i rowspan. Dzięki nim tabela staje się czytelniejsza i lepiej dopasowana do prezentowanych danych.

1. Atrybut colspan – łączenie komórek w poziomie

Atrybut colspan pozwala scalić komórki w poziomie, czyli na szerokość. Używasz go w znaczniku <td> lub <th>, aby połączyć kilka kolumn w jedną komórkę.

Podstawowa składnia:

<td colspan="liczba_kolumn">Treść komórki</td>

Przykład tabeli z colspan:

<table>
  <tr>
    <th colspan="2">Produkt</th>
    <th>Cena</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>Dell</td>
    <td>3000 zł</td>
  </tr>
  <tr>
    <td>Smartfon</td>
    <td>Samsung</td>
    <td>2500 zł</td>
  </tr>
</table>

Efekt działania:

W powyższym przykładzie nagłówek „Produkt” zajmuje dwa miejsca w poziomie (dwie kolumny). Bez colspan nie dałoby się tego osiągnąć.

2. Atrybut rowspan – łączenie komórek w pionie

Atrybut rowspan pozwala scalić komórki w pionie, czyli na wysokość. Dzięki temu jedna komórka może zajmować miejsce kilku wierszy.

Podstawowa składnia:

<td rowspan="liczba_wierszy">Treść komórki</td>

Przykład tabeli z rowspan:

<table>
  <tr>
    <th>Produkt</th>
    <th>Część</th>
    <th>Cena</th>
  </tr>
  <tr>
    <td rowspan="2">Laptop</td>
    <td>Ekran</td>
    <td>1000 zł</td>
  </tr>
  <tr>
    <td>Klawiatura</td>
    <td>500 zł</td>
  </tr>
</table>

Efekt działania:

W tym przykładzie nazwa „Laptop” pojawia się tylko raz, ale obejmuje dwa wiersze dzięki atrybutowi rowspan="2".

3. Łączenie colspan i rowspan w jednej tabeli

Możesz również łączyć oba atrybuty w jednej tabeli, aby uzyskać bardziej zaawansowany układ danych.

Przykład z colspan i rowspan jednocześnie:

<table>
  <tr>
    <th rowspan="2">Kategoria</th>
    <th colspan="2">Szczegóły</th>
  </tr>
  <tr>
    <th>Produkt</th>
    <th>Cena</th>
  </tr>
  <tr>
    <td>Elektronika</td>
    <td>Laptop</td>
    <td>3000 zł</td>
  </tr>
  <tr>
    <td>Elektronika</td>
    <td>Smartfon</td>
    <td>2500 zł</td>
  </tr>
</table>

Efekt działania:

4. Najważniejsze zasady

• Zawsze dokładnie sprawdzaj liczbę kolumn i wierszy – struktura tabeli musi być spójna, aby przeglądarka poprawnie wyświetliła dane.
• Używaj colspan i rowspan, aby zwiększyć czytelność tabeli, a nie dla „sztucznego” ukrywania danych.
• Pamiętaj o stylizacji tabeli za pomocą CSS, aby tabela była czytelna i estetyczna.

✅ Podsumowanie

• colspan – scala komórki w poziomie (kolumny).
• rowspan – scala komórki w pionie (wiersze).
• Możesz łączyć oba atrybuty w jednej tabeli, aby tworzyć zaawansowane układy danych.

🎯 Ćwiczenie w JSFiddle

Przejdź do JSFiddle i wklej poniższy kod w sekcji HTML.
Zobacz, jak działa scalanie komórek przy pomocy colspan i rowspan.

<table border="1">
  <tr>
    <th rowspan="2">Dzień</th>
    <th colspan="2">Zajęcia</th>
  </tr>
  <tr>
    <th>Przedmiot</th>
    <th>Godzina</th>
  </tr>
  <tr>
    <td rowspan="2">Poniedziałek</td>
    <td>Matematyka</td>
    <td>8:00 - 9:30</td>
  </tr>
  <tr>
    <td>Informatyka</td>
    <td>9:45 - 11:15</td>
  </tr>
</table>

Kliknij Run, aby zobaczyć efekt działania!