Ostatnio edytowany:

Scalanie komórek tabeli HTML kilku wierszy

Autor: Virtual Patriot

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:

Wiersz A Komórka 1A Komórka 2A Komórka 3A
Wiersz B Komórka 1B Komórka 2B Komórka 3B
Wiersz C Komórka 1C Komórka 2C Komórka 3C
Wiersz D Komórka 1D Komórka 2D Komórka 3D
Wiersz E Komórka 1E Komórka 2E Komórka 3E

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.

Wiersz A Komórka 1A Komórka 2A Komórka 3A
Wiersz B Komórka 1B Komórka 2B Komórka 3B
Wiersz C Komórka 1C Komórka 2C Komórka 3C
Wiersz D Komórka 1D Komórka 2D Komórka 3D
Wiersz E Komórka 1E Komórka 2E Komórka 3E

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:

Wiersz A Komórka 1A Komórka 2A Komórka 3A
Wiersz B Komórka 1B Komórka 2B Komórka 3B
Wiersz C Komórka 1C Komórka 3C
Wiersz D Komórka 1D Komórka 3D
Wiersz E Komórka 1E Komórka 2E Komórka 3E

Element HTML reprezentujący komórkę tabeli HTML, czyli element "td" lub element "th", może posiadać atrybut "colspan" oraz atrybut "rowspan" jednocześnie, oznacza to, że interesująca nas komórka tabeli HTML może zostać scalona względem kolumn oraz względem wierszy 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 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:

Wiersz A Komórka 1A Komórka 2A Komórka 3A
Wiersz B Komórka 1B Komórka 2B
Wiersz C Komórka 1C
Wiersz D Komórka 1D
Wiersz E Komórka 1E Komórka 2E Komórka 3E

Tylko komórki wierszy znajdujących się w tej samej grupie wierszy mogą ulec scaleniu względem siebie. W praktyce oznacza to, że komórki wierszy znajdujących się w dwóch osobnych elementach "tbody" nie mogą ulec scaleniu względem siebie. Wspomniana reguła tyczy się również elementu "thead" oraz elementu "tfoot".