Atrybuty colspan i rowspan w HTML

Atrybuty colspan i rowspan służą do scalania komórek w tabelach HTML. Stosuje się je najczęściej w elementach <td> oraz <th>.

colspan — scalanie w poziomie

Atrybut colspan określa, ile kolumn ma zajmować dana komórka. Oznacza to połączenie komórek w jednym wierszu.

Przykład:

<tr>
  <td colspan="3">tekst</td>
</tr>

Taka komórka zajmie szerokość trzech zwykłych komórek w tym samym wierszu.

rowspan — scalanie w pionie

Atrybut rowspan określa, ile wierszy ma zajmować dana komórka. Oznacza to połączenie komórek znajdujących się jedna pod drugą.

Przykład:

<tr>
  <td rowspan="2">tekst</td>
</tr>

Taka komórka będzie rozciągnięta pionowo na dwa wiersze.

Przykład tabeli z oboma atrybutami

<table border="1">
  <tr>
    <td>tekst</td>
    <td>tekst</td>
    <td>tekst</td>
  </tr>
  <tr>
    <td colspan="3">tekst</td>
  </tr>
  <tr>
    <td>tekst</td>
    <td>tekst</td>
    <td rowspan="2">tekst</td>
  </tr>
  <tr>
    <td>tekst</td>
    <td>tekst</td>
  </tr>
</table>

Jak rozpoznać atrybut na ilustracji?

• komórka szeroka na kilka kolumn: użyto colspan,
• komórka wysoka na kilka wierszy: użyto rowspan,
• wartość atrybutu oznacza liczbę scalonych kolumn lub wierszy, np. colspan="3" albo rowspan="2".

W pytaniach egzaminacyjnych należy zwracać uwagę na położenie scalonej komórki: numer wiersza, numer komórki oraz kierunek scalenia.