Atribut colspan

Atribut colspan ovládá slučování sloupců HTML tabulky. Aplikuje se na tagy th a td.

Přijímaná hodnota: celé číslo počínaje 1.

Jak používat: přidáme tento atribut k libovolné buňce td nebo th. Pokud, kupříkladu, nastavíme colspan na hodnotu 2 - pak buňka, které jsme to nastavili, zabere dva sloupce tabulky. Přitom sousední buňky vpravo nikam 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 vpravo. 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 sloupce

Zkusme rozšířit buňku 1 na dva sloupce, nastavením atributu colspan na hodnotu 2. Přitom vytlačí buňky vpravo a tabulka se 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;
}

Результат:

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

A nyní zkusme opravit problém s rozpadnutím tabulky z předchozího příkladu, odstraníme jednu z buněk vpravo od naší (je to buňka 2 nebo 3 - nezáleží na tom):

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

Результат:

Příklad . Rozšíříme buňku na tři sloupce

Rozšiřme buňku 1 na 3 sloupce a nastavme jí atribut colspan na hodnotu 3. Přitom odstraníme ještě jednu buňku vpravo, aby se tabulka 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;
}

Результат:

Příklad . Současně colspan a rowspan

Zkusme sloučit buňky s číslem 4, 5, 7 a 8, s využitím atributů colspan a rowspan (předchozí sloučení z tabulky odstraníme):

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

Результат:

Viz také