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

Результат:

Сондай-ақ қараңыз