Łączenie komórek tabeli <td colspan rowspan>

W jaki sposób połączyć kilka komórek tabeli w jedną dużą?

Poziome łączenie komórek
```
<table>
<tr>
	<td colspan="x">...</td>
</tr>
</table>
```
gdzie "x" oznacza liczbę komórek do połączenia w poziomie.
Pionowe łączenie komórek
```
<table>
<tr>
	<td rowspan="y">...</td>
</tr>
</table>
```
gdzie "y" oznacza liczbę komórek do połączenia w pionie.

Polecenie to pozwala na poziome lub pionowe łączenie komórek w tabeli, dzięki czemu jedna komórka (połączona) może się rozciągać na kilka komórek pojedynczych.

Tabela z połączonymi komórkami zawiera mniej znaczników <td>...</td>, ponieważ komórka połączona rozciąga się na kilka zwykłych pojedynczych komórek, tym samym eliminując je. Każdy atrybut colspan="x" lub rowspan="y" eleminuje n-1 komórek pojedynczych (w przyległych kolumnach lub wierszach).

Potrzebujesz pomocy?
Przy tworzeniu tabel HTML możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. Dzięki niemu w kilka minut skonfigurujesz dowolny, nawet najbardziej skomplikowany układ wierszy i kolumn, a także zdefiniujesz estetyczny wygląd poprawiający prezentację treści.

Przykład <td colspan rowspan>

Poziome łączenie komórek:
Dla pierwszej komórki <td colspan="2">
(druga komórka nie istnieje, ponieważ została połączona z pierwszą)

komórka1+2
komórka3	komórka4

Aby otrzymać powyższą tabelę, należy wpisać:

<table>
<tr>
	<td colspan="2">komórka1+2</td>
</tr>
<tr>
	<td>komórka3</td>  <td>komórka4</td>
</tr>
</table>

Pionowe łączenie komórek:
Dla pierwszej komórki <td rowspan="2">
(trzecia komórka nie istnieje, ponieważ została połączona z pierwszą)

komórka1+3	komórka2
	komórka4

Aby otrzymać powyższą tabelę, należy wpisać:

<table>
<tr>
	<td rowspan="2">komórka1+3</td> <td>komórka2</td>
</tr>
<tr>
	<td>komórka4</td>
</tr>
</table>

Pytania i odpowiedzi <td colspan>

Co robi COLSPAN?

Jest to atrybut, który możemy dodać do znaczników TD lub TH, aby połączyć (scalić) w poziomie kilka sąsiadujących ze sobą komórek tabeli.

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

Aby scalić w poziomie kilka sąsiadujących ze sobą komórek tabeli, zamiast nich umieszczamy tylko jeden znacznik TD lub TH, ale dodajemy do niego atrybut colspan="..." o wartości odpowiadającej liczbie scalanych komórek. Na przykład, aby utworzyć tabelę składająca się z dwóch kolumn, gdzie w pierwszym wierszu komórki są scalone, można się posłużyć następującym kodem: <table> <tr> <td colspan="2">wiersz 1, kolumna 1+2</td> </tr> <tr> <td>wiersz 2, kolumna 1</td> <td>wiersz 2, kolumna 2</td> </tr> </table>.

Co robi ROWSPAN?

Jest to atrybut, który możemy dodać do znaczników TD lub TH, aby połączyć (scalić) w pionie kilka sąsiadujących ze sobą komórek tabeli.

Jak połączyć wiersze w tabeli HTML?

Aby scalić w pionie kilka sąsiadujących ze sobą komórek tabeli, zamiast nich umieszczamy tylko jeden znacznik TD lub TH, ale dodajemy do niego atrybut rowspan="..." o wartości odpowiadającej liczbie scalanych komórek. Na przykład, aby utworzyć tabelę składająca się z dwóch wierszy, gdzie w pierwszej kolumnie komórki są scalone, można się posłużyć następującym kodem: <table> <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>.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
`<td colspan>`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23
`<td rowspan>`	1 2008-12-11	1 2004-11-09	12 2015-07-29	15 2013-07-02	1 2003-06-23

Komentarze

Zobacz więcej komentarzy