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

Результат:

Глядзіце таксама