Атрибут rowspan

Атрибутът rowspan управлява обединяването редове в HTML таблица. Прилага се към таговете th и td.

Приемана стойност: цяло число започващо от 1.

Как се използва: добавяме този атрибут към която и да е клетка td или th. Ако, например, зададем rowspan със стойност 2 - тогава клетката, към която е зададено, ще заеме два реда във височина на таблицата. В този случай клетките от реда по-долу няма да изчезнат, нашата разширена клетка ще ги изтласка и таблицата ще се разпадне. За да не се случи това, трябва да се премахне една от клетките от реда по-долу. Вижте примерите за по-добро разбиране.

Пример . Таблица без обединявания

Нека разгледаме таблица без обединявания, с която ще работим по-нататък:

html<table>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Пример . Разширяваме клетка на два реда

А сега нека разширим клетка 1 на два реда, като й зададем атрибут rowspan със стойност 2. Ще видим, че тя изтласква клетките от реда под нея и таблицата се разпада:

html<table>
  <tr>
    <td rowspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Пример . Разширяваме клетка без разпадане на таблицата

За да поправим проблема с разпадането на таблицата от предишния пример, нека опитаме да премахнем една от клетките от втория ред (и това не е задължително клетка 4, която се намира непосредствено под нашата клетка 1, може да се премахне всяка, ние ще премахнем клетка с номер 5):

html<table>
  <tr>
    <td rowspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Пример . Разширяваме клетка на 3 реда

А тук нека разширим нашата клетка не на два реда, а на 3, задаваме й rowspan със стойност 3. В този случай премахваме една от клетките от третия ред (клетка 7, 8 или 9 - без значение), за да таблицата не се разпадне:

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>   

csstable, td, th {
  border: 1px solid black;
}

Результат:

Пример . Разширяваме още на 2 колони

Нека разширим и клетка 2 на 2 колони в допълнение към първата клетка. За това на клетка 2 добавяме colspan със стойност 2. В този случай премахваме клетка 3, за да таблицата не се разпадне:

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td colspan="2">cell2</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Вижте също