Scalanie komórek tabeli HTML kilku wierszy

Za pomocą atrybutu rowspan możemy scalić komórki kilku wierszy tabeli HTML w jedną komórkę. Oznacza to, że w ten sposób scalona komórka tabeli HTML może należeć do kilku wierszy tabeli HTML jednocześnie.

Przykład:

<table border>
  <tr>
    <th>Wiersz A</th>
    <td>Komórka 1A</td>
    <td>Komórka 2A</td>
    <td>Komórka 3A</td>
  </tr>

  <tr>
    <th>Wiersz B</th>
    <td>Komórka 1B</td>
    <td>Komórka 2B</td>
    <td>Komórka 3B</td>
  </tr>

  <tr>
    <th>Wiersz C</th>
    <td>Komórka 1C</td>
    <td>Komórka 2C</td>
    <td>Komórka 3C</td>
  </tr>

  <tr>
    <th>Wiersz D</th>
    <td>Komórka 1D</td>
    <td>Komórka 2D</td>
    <td>Komórka 3D</td>
  </tr>

  <tr>
    <th>Wiersz E</th>
    <td>Komórka 1E</td>
    <td>Komórka 2E</td>
    <td>Komórka 3E</td>
  </tr>
</table>

Rezultat:

Nasza przykładowa tabela HTML składa się z pięciu wierszy. Każdy wiersz budujący naszą przykładową tabelę HTML składa się z takiej samej liczby komórek.

Załóżmy, że chcemy, aby komórka, której zawartość reprezentuje treść w postaci ciągu znaków Komórka 2B nie należała tylko do drugiego wiersza budującego naszą przykładową tabelę HTML, lecz należała również do dwóch następnych wierszy budujących naszą przykładową tabelę HTML, czyli do wiersza trzeciego oraz do wiersza czwartego.

Aby osiągnąć nasz cel należy zadać sobie pytanie - Do ilu ostatecznie wierszy budujących naszą przykładową tabelę HTML ma należeć interesująca nas komórka, czyli komórka, której zawartość reprezentuje treść w postaci ciągu znaków Komórka 2B?

Odpowiedzią na to pytanie jest liczba 3, ponieważ wspomniana komórka ostatecznie ma należeć do trzech wierszy budujących naszą przykładową tabelę HTML, czyli do drugiego, trzeciego oraz czwartego wiersza. Dlatego do wspomnianej komórki należy dodać atrybut rowspan wraz z wartością 3.

Ponadto komórka, której zawartością jest treść w postaci ciągu znaków Komórka 2C oraz komórka, której zawartością jest treść w postaci ciągu znaków Komórka 2D musi zostać usunięta przez nas z naszego kodu HTML, ponieważ miejsce wspomnianych komórek od tej pory będzie zajmować komórka, której zawartością jest treść w postaci ciągu znaków Komórka 2B.

Przykład:

<table border>
  <tr>
    <th>Wiersz A</th>
    <td>Komórka 1A</td>
    <td>Komórka 2A</td>
    <td>Komórka 3A</td>
  </tr>

  <tr>
    <th>Wiersz B</th>
    <td>Komórka 1B</td>
    <td rowspan="3">Komórka 2B</td>
    <td>Komórka 3B</td>
  </tr>

  <tr>
    <th>Wiersz C</th>
    <td>Komórka 1C</td>
    <!-- <td>Komórka 2C</td> -->
    <td>Komórka 3C</td>
  </tr>

  <tr>
    <th>Wiersz D</th>
    <td>Komórka 1D</td>
    <!-- <td>Komórka 2D</td> -->
    <td>Komórka 3D</td>
  </tr>

  <tr>
    <th>Wiersz E</th>
    <td>Komórka 1E</td>
    <td>Komórka 2E</td>
    <td>Komórka 3E</td>
  </tr>
</table>

Rezultat:

Przykład:

<table border>
  <tr>
    <th>Wiersz A</th>
    <td>Komórka 1A</td>
    <td>Komórka 2A</td>
    <td>Komórka 3A</td>
  </tr>

  <tr>
    <th>Wiersz B</th>
    <td>Komórka 1B</td>
    <td colspan="2" rowspan="3">Komórka 2B</td>
    <!-- <td>Komórka 3B</td> -->
  </tr>

  <tr>
    <th>Wiersz C</th>
    <td>Komórka 1C</td>
    <!-- <td>Komórka 2C</td> -->
    <!-- <td>Komórka 3C</td> -->
  </tr>

  <tr>
    <th>Wiersz D</th>
    <td>Komórka 1D</td>
    <!-- <td>Komórka 2D</td> -->
    <!-- <td>Komórka 3D</td> -->
  </tr>

  <tr>
    <th>Wiersz E</th>
    <td>Komórka 1E</td>
    <td>Komórka 2E</td>
    <td>Komórka 3E</td>
  </tr>
</table>

Rezultat: