Atribut rowspan

Atribut rowspan řídí slučování řádků v HTML tabulce. Používá se na tagy th a td.

Přijímaná hodnota: celé číslo začínající od 1.

Jak používat: přidáme tento atribut k jakékoli buňce td nebo th. Pokud, například, nastavíme rowspan na hodnotu 2 - pak buňka, které jsme to nastavili, zabere dva řádky na výšku tabulky. Přitom buňky z řádku pod ní nezmizí, naše rozšířená buňka je vytlačí a tabulka se rozpadne. Aby k tomu nedošlo, je třeba odstranit jednu z buněk z řádku pod ní. Podívejte se na příklady pro lepší pochopení.

Příklad . Tabulka bez slučování

Podívejme se na tabulku bez slučování, se kterou budeme dále pracovat:

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

Результат:

Příklad . Rozšíříme buňku na dva řádky

A nyní rozšíříme buňku 1 na dva řádky, nastavením atributu rowspan na hodnotu 2. Uvidíme, že vytlačuje buňky z řádku pod ní a tabulka se 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;
}

Результат:

Příklad . Rozšíříme buňku bez rozpadnutí tabulky

Chceme-li opravit problém s rozpadnutím tabulky z předchozího příkladu, zkusme odstranit jednu z buněk z druhého řádku (a není to nutně buňka 4, která se nachází přímo pod naší buňkou 1, lze odstranit jakoukoli, odstraníme buňku s číslem 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;
}

Результат:

Příklad . Rozšíříme buňku na 3 řádky

A zde rozšíříme naši buňku ne na dva řádky, ale na 3, nastavíme jí rowspan na hodnotu 3. Přitom odstraníme jednu z buněk z třetího řádku (buňku 7, 8 nebo 9 - nezáleží na které), aby tabulka neztroskotala:

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

Результат:

Příklad . Rozšíříme ještě na 2 sloupce

Rozšíříme ještě i buňku 2 na 2 sloupce navíc k první buňce. K tomu buňce 2 přidáme colspan na hodnotu 2. Přitom odstraníme buňku 3, aby tabulka neztroskotala:

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

Результат:

Viz také