Atribút rowspan

Atribút rowspan riadi zlučovanie riadkov v HTML tabuľke. Aplikuje sa na tagy 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 rowspan na hodnotu 2 - potom bunka, ktorej sme to nastavili, zaberie dva riadky na výšku tabuľky. Pritom bunky z riadku pod ním nezmiznú, naša rozšírená bunka ich vytlačí a tabuľka sa rozpadne. Aby sa to nestalo, je potrebné odstrániť jednu z buniek z riadku pod ním. 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šírme bunku na dva riadky

A teraz rozšírme bunku 1 na dva riadky, nastavením atribútu rowspan na hodnotu 2. Uvidíme, že vytláča bunky z riadku pod ňou a tabuľka sa rozpadá:

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

Результат:

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

Aby sme napravili problém s rozpadnutím tabuľky z predchádzajúceho príkladu, skúsme odstrániť jednu z buniek z druhého riadku (a nie je to nevyhnutne bunka 4, ktorá sa nachádza priamo pod našou bunkou 1, je možné odstrániť ľubovoľnú, odstránime bunku s číslom 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;
}

Результат:

Príklad . Rozšírme bunku na 3 riadky

A tu rozšírme našu bunku nie na dva riadky, ale na 3, nastavíme jej rowspan na hodnotu 3. Pritom odstránime jednu z buniek z tretieho riadku (bunku 7, 8 alebo 9 - bez rozdielu), aby tabuľka sa nerozpadla:

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

Результат:

Príklad . Rozšírme ešte na 2 stĺpce

Rozšírme ešte aj bunku 2 na 2 stĺpce navyše k prvej bunke. Pre to bunke 2 pridáme colspan v hodnote 2. Pritom odstránime bunku 3, aby tabuľka sa nerozpadla:

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

Результат:

Pozri tiež