Атрибут 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;
}

Результат:

Погледнете ги исто така