Attributtet colspan

Attributtet colspan styrer sammenslåing av kolonner i en HTML-tabell. Brukes på taggene th og td.

Akseptert verdi: heltall fra 1.

Hvordan bruke: legger til dette attributtet på en hvilken som helst celle td eller th. Hvis du for eksempel setter colspan til verdien 2 - vil cellen dette ble satt på, oppta to kolonner i tabellen. Samtidig vil de tilstøtende cellene til høyre ikke forsvinne, vår utvidede celle vil forskyve dem og tabellen vil falle fra hverandre. For å forhindre dette, må du fjerne en av cellene til høyre. Se eksemplene for bedre forståelse.

Eksempel . Tabell uten sammenslåinger

La oss se på en tabell uten sammenslåinger, som vi skal jobbe videre med:

html<table>
  <tr>
    <td>celle1</td>
    <td>celle2</td>
    <td>celle3</td>
  </tr>
  <tr>
    <td>celle4</td>
    <td>celle5</td>
    <td>celle6</td>
  </tr>
  <tr>
    <td>celle7</td>
    <td>celle8</td>
    <td>celle9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Eksempel . Utvider en celle til to kolonner

La oss prøve å utvide celle 1 til to kolonner, ved å sette dens attributt colspan til verdien 2. Da vil den forskyve cellene til høyre og tabellen vil falle fra hverandre:

html<table>
  <tr>
    <td colspan="2">celle1</td>
    <td>celle2</td>
    <td>celle3</td>
  </tr>
  <tr>
    <td>celle4</td>
    <td>celle5</td>
    <td>celle6</td>
  </tr>
  <tr>
    <td>celle7</td>
    <td>celle8</td>
    <td>celle9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Eksempel . Utvider en celle uten at tabellen faller fra hverandre

La oss nå prøve å fikse problemet med at tabellen faller fra hverandre fra forrige eksempel, vi fjerner en av cellene til høyre for vår (dette er celle 2 eller 3 - spiller ingen rolle):

html<table>
  <tr>
    <td colspan="2">celle1</td>
    <td>celle2</td>
  </tr>
  <tr>
    <td>celle4</td>
    <td>celle5</td>
    <td>celle6</td>
  </tr>
  <tr>
    <td>celle7</td>
    <td>celle8</td>
    <td>celle9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Eksempel . Utvider en celle til tre kolonner

La oss utvide celle 1 til 3 kolonner og sette dens attributt colspan til verdien 3. Samtidig fjerner vi enda en celle til høyre, slik at tabellen ikke faller fra hverandre:

html<table>
  <tr>
    <td colspan="3">celle1</td>
  </tr>
  <tr>
    <td>celle4</td>
    <td>celle5</td>
    <td>celle6</td>
  </tr>
  <tr>
    <td>celle7</td>
    <td>celle8</td>
    <td>celle9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Eksempel . Samtidig colspan og rowspan

La oss prøve å slå sammen celler med nummer 4, 5, 7 og 8, ved å bruke attributtene colspan og rowspan (tidligere sammenslåinger fjerner vi fra tabellen):

html<table>
  <tr>
    <td colspan="3">celle1</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">celle4</td>
    <td>celle6</td>
  </tr>
  <tr>
    <td>celle9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

Se også