Tabele HTML: colspan i rowspan

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Tabele HTML: colspan i rowspan

W HTML tabela jest tworzona za pomocą znacznika <table>. Wiersze zapisuje się znacznikiem <tr>, a komórki zwykłe znacznikiem <td>. Do łączenia komórek służą atrybuty colspan i rowspan.

colspan - łączenie poziome

Atrybut colspan określa, ile kolumn ma zajmować jedna komórka. Łączy więc komórki w poziomie.

<table border="1">
  <tr>
    <td colspan="2">A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

Komórka A zajmuje szerokość dwóch kolumn.

rowspan - łączenie pionowe

Atrybut rowspan określa, ile wierszy ma zajmować jedna komórka. Łączy więc komórki w pionie.

<table border="1">
  <tr>
    <td rowspan="2">A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
</table>

Komórka A zajmuje dwa wiersze po lewej stronie. W drugim wierszu nie wpisuje się już drugiej komórki w tej kolumnie, ponieważ miejsce jest zajęte przez komórkę z rowspan="2".

Jak analizować tabelę na egzaminie?

  1. Policz wiersze, czyli znaczniki <tr>.
  2. W każdym wierszu sprawdź liczbę znaczników <td>.
  3. Zwróć uwagę na rowspan - taka komórka przechodzi do kolejnego wiersza.
  4. Zwróć uwagę na colspan - taka komórka zajmuje kilka kolumn.

W podanym pytaniu pierwsza komórka ma rowspan="2", więc jest wysoka na dwa wiersze. Obok niej znajdują się dwie oddzielne komórki: jedna w pierwszym wierszu i jedna w drugim. Dlatego poprawny rysunek pokazuje dużą komórkę po lewej i dwie mniejsze po prawej.