colspan i rowspan do łączenia komórek
Łączyć komórki w poprzek kolumn i wierszy.
colspan i rowspan do łączenia komórek to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.
Czym jest rozciąganie komórek?
Domyślnie każda komórka tabeli zajmuje jeden wiersz i jedną kolumnę. Rozciąganie pozwala komórce obejmować wiele kolumn lub wierszy:
colspan— obejmowanie wielu kolumn- rowspan — obejmowanie wielu wierszy
colspan
Atrybut colspan sprawia, że komórka obejmuje wiele kolumn:
<table>
<tr>
<th colspan="3">2024 Quarterly Sales</th>
</tr>
<tr>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
</tr>
<tr>
<td>$10k</td>
<td>$12k</td>
<td>$15k</td>
</tr>
</table>rowspan
Atrybut rowspan sprawia, że komórka obejmuje wiele wierszy:
<table>
<tr>
<th rowspan="2">John</th>
<td>HTML</td>
<td>95</td>
</tr>
<tr>
<!-- no th here — John's cell spans this row -->
<td>CSS</td>
<td>88</td>
</tr>
</table>colspan i rowspan razem
Oba atrybuty można połączyć w jednej komórce:
<table>
<tr>
<th colspan="2" rowspan="2">Top-Left Corner</th>
<th>Col 3</th>
</tr>
<tr>
<td>Row 2, Col 3</td>
</tr>
<tr>
<td>Row 3, Col 1</td>
<td>Row 3, Col 2</td>
<td>Row 3, Col 3</td>
</tr>
</table>Uwzględnianie rozciągniętych komórek
Jeśli komórka obejmuje wiele kolumn, pomiń te kolumny w wierszach objętych rozciągnięciem:
<table>
<tr>
<td colspan="2">Spans 2 columns</td>
<!-- This row has: 1 td = 2 columns wide -->
<td>Third column</td>
</tr>
<tr>
<td>Col 1</td> <!-- back to 1 column each -->
<td>Col 2</td>
<td>Col 3</td>
</tr>
</table>Typowe wzorce rozciągania komórek
Przykłady rozciągania komórek w rzeczywistych tabelach:
<!-- Group header spanning all data columns -->
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="3">Test Scores</th>
</tr>
<tr>
<th>Math</th><th>Science</th><th>English</th>
</tr>
</thead>rowspan dla scalonych nagłówków wierszy
Używaj rowspan do tworzenia scalonych etykiet grup wierszy:
<tbody>
<tr>
<th rowspan="3">Frontend</th>
<td>HTML</td>
<td>Structure</td>
</tr>
<tr>
<!-- Frontend spans this row -->
<td>CSS</td>
<td>Presentation</td>
</tr>
<tr>
<td>JavaScript</td>
<td>Behavior</td>
</tr>
</tbody>colspan=0 — komórka na pełną szerokość
Wartość colspan równa 0 sprawia, że komórka obejmuje wszystkie pozostałe kolumny w grupie kolumn (rzadko używane):
<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>Rozciąganie komórek a dostępność
Złożone tabele z rozciągniętymi komórkami wymagają atrybutów scope i headers dla czytników ekranu:
<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->
<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>Debugowanie problemów z rozciąganiem komórek
Typowe błędy związane z rozciąganiem komórek:
- Zbyt wiele lub zbyt mało komórek w wierszu po użyciu rozciągania
- rowspan wykraczający poza liczbę wierszy
- Nakładające się rozciągnięcia (dwie komórki zajmujące tę samą pozycję)
Jeśli coś wygląda nieprawidłowo, użyj narzędzi deweloperskich przeglądarki, aby sprawdzić strukturę tabeli.
CSS dla rozciągniętych komórek
Stylizuj komórki obejmujące wiele kolumn lub wierszy:
[colspan] {
text-align: center;
font-weight: bold;
background-color: #e2e8f0;
}
/* Or use attribute selectors for specific spans: */
[colspan="3"] {
background-color: #dbeafe;
}Drukowanie a rozciąganie komórek
Rozciągnięte komórki są prawidłowo drukowane w nowoczesnych przeglądarkach. Jednak:
- Jeśli wiersze thead obejmują kolumny, są prawidłowo powtarzane na każdej drukowanej stronie
- rowspan w obrębie tbody nie powtarza się po podziale na strony
- Przed wdrożeniem sprawdź złożone tabele w podglądzie wydruku
Szybkie sprawdzenie
Masz komórkę tabeli, która powinna obejmować 3 kolumny. Którego atrybutu użyjesz?
Podsumowanie: colspan i rowspan
Najważniejsze informacje o rozciąganiu komórek:
colspan— komórka obejmuje wiele kolumnrowspan— komórka obejmuje wiele wierszy- Uwzględniaj rozciągnięte komórki: pomijaj komórki objęte rozciągnięciem
- Dodaj
scope="colgroup"dla dostępności nagłówków obejmujących wiele kolumn - Używaj narzędzi deweloperskich do debugowania problemów z układem
Często zadawane pytania
Czy lekcja „colspan i rowspan do łączenia komórek” jest bezpłatna?
Tak — pełny tekst „colspan i rowspan do łączenia komórek” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „colspan i rowspan do łączenia komórek”?
Łączyć komórki w poprzek kolumn i wierszy. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć HTML Academy?
Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „colspan i rowspan do łączenia komórek”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?
Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- table, tr, td i th
- Struktura thead, tbody i tfoot
- colspan i rowspan do łączenia komórek
- Dostępność tabel: scope, summary i caption