Атрибут colspan

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

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

Как се използва: добавяме този атрибут към която и да е клетка td или th. Ако, например, зададем colspan със стойност 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 в две колони, като ѝ зададем атрибут colspan със стойност 2. В този случай тя ще изтисне клетките отдясно и таблицата ще се разпадне:

html<table>
  <tr>
    <td colspan="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;
}

Результат:

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

А сега нека се опитаме да поправим проблема с разпадането на таблицата от предишния пример, като премахнем една от клетките отдясно на нашата (това е клетка 2 или 3 - без значение):

html<table>
  <tr>
    <td colspan="2">cell1</td>
    <td>cell2</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 в 3 колони и ѝ зададем атрибут colspan със стойност 3. В този случай ще премахнем още една клетка отдясно, за да не се разпадне таблицата:

html<table>
  <tr>
    <td colspan="3">cell1</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;
}

Результат:

Пример . Едновременно colspan и rowspan

Нека опитаме да обединим клетки с номер 4, 5, 7 и 8, като използваме атрибутите colspan и rowspan (предишните обединявания ще премахнем от таблицата):

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

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

Результат:

Вижте също