Scalanie komórek w tabelach HTML (colspan, rowspan)

Scalanie komórek w tabelach HTML pozwala na tworzenie bardziej elastycznych i czytelnych układów danych. Dzięki atrybutom colspan i rowspan możemy rozciągać komórki na wiele kolumn lub wierszy, co jest przydatne, gdy chcemy wyróżnić lub grupować pewne informacje. W tym artykule dowiesz się, jak używać tych atrybutów do tworzenia bardziej zaawansowanych tabel.

Co to jest colspan?

Atrybut colspan służy do scalania komórek w poziomie – łączy komórki w jednym wierszu, tworząc większą komórkę rozciągającą się na określoną liczbę kolumn.

Przykład użycia colspan:

<table border="1">
    <tr>
        <th colspan="2">Informacje o produkcie</th>
    </tr>
    <tr>
        <td>Nazwa</td>
        <td>Cena</td>
    </tr>
    <tr>
        <td>Chleb</td>
        <td>2.50 PLN</td>
    </tr>
</table>

   See the Pen    Untitled by EE-Informatyk.pl (@eeinformatyk)   on CodePen. 
 

Co to jest rowspan?

Atrybut rowspan służy do scalania komórek w pionie – łączy komórki w jednej kolumnie, tworząc większą komórkę rozciągającą się na określoną liczbę wierszy.

<table border="1">
    <tr>
        <th rowspan="2">Produkt</th>
        <th>Cena</th>
    </tr>
    <tr>
        <td>2.50 PLN</td>
    </tr>
    <tr>
        <td>Masło</td>
        <td>5.00 PLN</td>
    </tr>
</table>

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Łączenie colspan i rowspan w jednej tabeli

Można jednocześnie korzystać z colspan i rowspan, aby tworzyć jeszcze bardziej zaawansowane układy tabel.

Przykład tabeli z colspan i rowspan:

<table border="1">
    <tr>
        <th rowspan="2">Produkt</th>
        <th colspan="2">Szczegóły</th>
    </tr>
    <tr>
        <th>Cena</th>
        <th>Ilość</th>
    </tr>
    <tr>
        <td>Chleb</td>
        <td>2.50 PLN</td>
        <td>1</td>
    </tr>
    <tr>
        <td>Masło</td>
        <td>5.00 PLN</td>
        <td>2</td>
    </tr>
</table>

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Zastosowanie colspan i rowspan w praktyce

Scalanie komórek jest szczególnie przydatne, gdy chcemy:

• Tworzyć bardziej czytelne nagłówki grupujące dane.
• Organizować dane, które wymagają większej elastyczności układu.
• Zmniejszać powtarzalność danych w tabelach.

Podsumowanie

Scalanie komórek za pomocą colspan i rowspan pozwala na większą elastyczność i lepszą organizację tabel w HTML. Te atrybuty ułatwiają tworzenie bardziej skomplikowanych układów, poprawiając czytelność i strukturę danych prezentowanych na stronach internetowych.