Atribút colspan

Atribút colspan riadi zlučovanie stĺpcov HTML tabuľky. Aplikuje sa na značky th a td.

Akceptovaná hodnota: celé číslo začínajúce od 1.

Ako používať: pridáme tento atribút k ľubovoľnej bunke td alebo th. Ak, napríklad, nastavíme colspan na hodnotu 2 - bunka, ktorej sme to nastavili, zaberie dva stĺpce tabuľky. Pri tom susedné bunky vpravo nezmiznú, naša rozšírená bunka ich vytlačí a tabuľka sa rozpadne. Aby sa tak nestalo, je potrebné odstrániť jednu z buniek vpravo. Pozrite si príklady pre lepšie pochopenie.

Príklad . Tabuľka bez zlučovania

Pozrime sa na tabuľku bez zlučovania, s ktorou budeme pracovať ďalej:

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;
}

Результат:

Príklad . Rozšírime bunku na dva stĺpce

Skúsme rozšíriť bunku 1 na dva stĺpce, nastavením atribútu colspan na hodnotu 2. Pri tom vytlačí bunky vpravo a tabuľka sa rozpadne:

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;
}

Результат:

Príklad . Rozšírime bunku bez rozpadnutia tabuľky

A teraz skúsme opraviť problém s rozpadnutím tabuľky z predchádzajúceho príkladu, odstránime jednu z buniek vpravo od našej (je to bunka 2 alebo 3 - bez rozdielu):

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;
}

Результат:

Príklad . Rozšírime bunku na tri stĺpce

Rozšírme bunku 1 na 3 stĺpce a nastavme jej atribút colspan na hodnotu 3. Pri tom odstránime ešte jednu bunku vpravo, aby sa tabuľka nerozpadla:

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;
}

Результат:

Príklad . Súčasne colspan a rowspan

Skúsme zlúčiť bunky s číslom 4, 5, 7 a 8, použitím atribútov colspan a rowspan (predchádzajúce zlúčenia odstránime z tabuľky):

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;
}

Результат:

Pozrite tiež