HTML / Tabele
Łączenie komórek <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).
Przykład:
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>