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

Результат:

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