Atrybuty HTML colspan i rowspan służą do scalania komórek tabeli: colspan łączy komórki w poziomie (na wiele kolumn), a rowspan w pionie (na wiele wierszy). Dzięki nim możesz tworzyć komórki rozciągające się przez kilka kolumn lub wierszy, np. nagłówki grupujące kolumny albo etykiety obejmujące wiele wierszy.
Kluczowe informacje i przykłady:
- colspan – ustaw w TD/TH liczbę kolumn, na które ma się rozciągać komórka, np.
Informacje łączy dwie kolumny w jednym wierszu.
- rowspan – ustaw w TD/TH liczbę wierszy, na które ma się rozciągać komórka, np.
A łączy komórkę przez dwa wiersze.
- Gdy scalisz komórkę, usuń z kodu te komórki, które zostały „przykryte” przez scaloną, aby siatka tabeli się zgadzała.
- Możesz łączyć oba atrybuty jednocześnie w jednej komórce (zarówno w poziomie, jak i w pionie), jeśli układ tego wymaga.
Co można tam „załatwić” (zastosowania):
- Nagłówki grupujące kilka kolumn (np. „Dane kontaktowe” nad „Telefon” i „E-mail”) z użyciem colspan.
- Etykiety sekcji obejmujące kilka wierszy (np. nazwa kategorii dla kilku pozycji) z użyciem rowspan.
- Układy raportowe lub harmonogramy, gdzie zdarzenia trwają wiele jednostek czasu (rowspan), albo kolumny są łączone dla przejrzystości (colspan).
- Tworzenie bardziej elastycznych i czytelnych tabel bez powielania treści.
Minimalne przykłady kodu:
- Colspan:
<table border="1"> <tr> <th colspan="2">Informacje o produkcie</th> </tr> <tr> <td>Nazwa</td> <td>Cena</td> </tr> </table> - Rowspan:
<table border="1"> <tr> <td rowspan="2">wiersz 1+2, kolumna 1</td> <td>wiersz 1, kolumna 2</td> </tr> <tr> <td>wiersz 2, kolumna 2</td> </tr> </table> Inne formy kontaktu i adresy (na podstawie serwisów z materiałami o colspan/rowspan):
- KursHTML (kurshtml.edu.pl) — e‑mail: [email protected]; strona: kurshtml.edu.pl.
- WebKOD (webkod.pl) — strona: webkod.pl.
- W3Schools — strona: w3schools.com.
Uwaga: jeżeli w tabeli używasz rowspan/colspan, pilnuj zgodności liczby „komórek logicznych” w każdym wierszu/kolumnie; błędne sumy mogą powodować niestabilny układ i problemy z dostępnością czytników ekranu.
