A rowspan attribútum

A rowspan attribútum az sorok egyesítését vezérli a HTML táblázatban. A th és a td címkékre alkalmazható.

Elfogadott érték: egész szám, kezdve 1-től.

Használata: adja hozzá ezt az attribútumot bármely td vagy th cellához. Ha például a rowspan értékét 2-re állítja, akkor az a cella, amelyre ezt alkalmazta, két sort fog elfoglalni a táblázat magasságában. Eközben az alatta lévő sor cellái nem fognak eltűnni, a kitágult cellánk kiszorítja őket, és a táblázat szétesik. Ennek elkerülése érdekében törölni kell egy a cellák közül az alatta lévő sorból. Az alábbi példák a jobb megértés érdekében.

Példa . Táblázat egyesítések nélkül

Nézzünk meg egy táblázatot egyesítések nélkül, amelyen tovább fogunk dolgozni:

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élda . Bővítsük ki a cellát két sorra

Most pedig bővítsük ki az 1 számú cellát két sorra, beállítva a rowspan attribútumot 2 értékre. Látni fogjuk, hogy kiszorítja a cellákat az alatta lévő sorból, és a táblázat szétesik:

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élda . Bővítsük ki a cellát a táblázat szétesése nélkül

Az előző példában látott táblázat szétesésének problémájának javításához próbáljunk meg törölni egy cellát a második sorból (és nem feltétlenül az 4 számú cellát kell törölni, amely közvetlenül az 1 számú cellánk alatt van, bármelyiket törölhetjük, most az 5 számú cellát töröljük):

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élda . Bővítsük ki a cellát 3 sorra

Itt most ne két sorra, hanem 3 sorra bővítsük ki a cellánkat, állítsuk be a rowspan attribútumot 3 értékre. Eközben töröljünk egy cellát a harmadik sorból (az 7, 8 vagy 9 számú cellát - mindegy), hogy a táblázat ne essen szét:

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élda . Bővítsük ki további 2 oszloppal

Bővítsük ki az 2 számú cellát további 2 oszlopra az első cella mellett. Ehhez adjuk hozzá az 2 számú cellához a colspan attribútumot 2 értékre. Eközben töröljük az 3 számú cellát, hogy a táblázat ne essen szét:

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

Результат:

Lásd még