Ostatnio edytowany:

Scalanie komórek tabeli HTML kilku kolumn

Autor: Virtual Patriot

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

Przykład:

<table border>
  <tr>
    <th>Kolumna A</th>
    <th>Kolumna B</th>
    <th>Kolumna C</th>
    <th>Kolumna D</th>
    <th>Kolumna E</th>
  </tr>

  <tr>
    <td>Komórka 1A</td>
    <td>Komórka 1B</td>
    <td>Komórka 1C</td>
    <td>Komórka 1D</td>
    <td>Komórka 1E</td>
  </tr>

  <tr>
    <td>Komórka 2A</td>
    <td>Komórka 2B</td>
    <td>Komórka 2C</td>
    <td>Komórka 2D</td>
    <td>Komórka 2E</td>
  </tr>

  <tr>
    <td>Komórka 3A</td>
    <td>Komórka 3B</td>
    <td>Komórka 3C</td>
    <td>Komórka 3D</td>
    <td>Komórka 3E</td>
  </tr>
</table>

Rezultat:

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

Nasza przykładowa tabela HTML składa się z pięciu kolumn. Każda kolumna budująca 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 drugiej kolumny budującej naszą przykładową tabelę HTML, lecz należała również do dwóch następnych kolumn budujących naszą przykładową tabelę HTML, czyli do kolumny trzeciej oraz do kolumny czwartej.

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

Aby osiągnąć nasz cel należy zadać sobie pytanie - Do ilu ostatecznie kolumn 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 kolumn budujących naszą przykładową tabelę HTML, czyli do drugiej, trzeciej oraz czwartej kolumny. Dlatego do wspomnianej komórki należy dodać atrybut colspan 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>Kolumna A</th>
    <th>Kolumna B</th>
    <th>Kolumna C</th>
    <th>Kolumna D</th>
    <th>Kolumna E</th>
  </tr>

  <tr>
    <td>Komórka 1A</td>
    <td>Komórka 1B</td>
    <td>Komórka 1C</td>
    <td>Komórka 1D</td>
    <td>Komórka 1E</td>
  </tr>

  <tr>
    <td>Komórka 2A</td>
    <td colspan="3">Komórka 2B</td>
    <!-- <td>Komórka 2C</td> -->
    <!-- <td>Komórka 2D</td> -->
    <td>Komórka 2E</td>
  </tr>

  <tr>
    <td>Komórka 3A</td>
    <td>Komórka 3B</td>
    <td>Komórka 3C</td>
    <td>Komórka 3D</td>
    <td>Komórka 3E</td>
  </tr>
</table>

Rezultat:

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