A colspan attribútum

A colspan attribútum a HTML táblázat oszlopainak egyesítését vezérli. A th és a td címkékre alkalmazható.

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

Használata: hozzáadjuk ezt az attribútumot bármely td vagy th cellához. Ha például a colspan értékét 2-re állítjuk, akkor az a cella, amelyikre ezt alkalmaztuk, két oszlopot fog elfoglalni a táblázatban. Eközben a jobb oldali szomszédos cellák nem fognak eltűnni, hanem a kitágult cella kiszorítja őket, és a táblázat szerkezeti integritása megsérül. Ennek elkerülése érdekében el kell távolítani egy a jobb oldali cellák közül. A jobb megértésért tekintse meg a példákat.

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 oszlopra

Próbáljuk meg kibővíteni az 1 számú cellát két oszlopra, beállítva a colspan attribútumot 2 értékre. Eközben kiszorítja a jobb oldali cellákat, és a táblázat szerkezete megsérül:

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élda . Bővítsük ki a cellát a táblázat szerkezetének megtartásával

Most próbáljuk meg kijavítani az előző példából származó, a táblázat szerkezetének megsérülésével járó problémát, távolítsunk el egyet a kibővített cellánktól jobbra lévő cellák közül (ez az 2 vagy 3 számú cella - mindegy, melyik):

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

Bővítsük ki az 1 számú cellát 3 oszlopra és állítsuk be a colspan attribútumát 3 értékre. Eközben távolítsunk el még egy cellát a jobb oldalon, hogy a táblázat szerkezete ne sérüljön meg:

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élda . Egyszerre colspan és rowspan

Próbáljuk meg egyesíteni az 4, 5, 7 és 8 számú cellákat, felhasználva a colspan és a rowspan attribútumokat (az előző egyesítéseket távolítsuk el a táblázatból):

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

Результат:

Lásd még