Attributten colspan

Attributten colspan styrer sammenlægningen af kolonner i en HTML tabel. Anvendes på tagsene th og td.

Accepteret værdi: et helt tal startende fra 1.

Hvordan man bruger det: tilføj denne attribut til enhver celle td eller th. Hvis man for eksempel sætter colspan til værdien 2 - vil cellen, som den er tildelt, optage to kolonner i tabellen. De tilstødende celler til højre forsvinder ikke, vores udvidede celle vil fortrænge dem, og tabellen vil gå i stykker. For at forhindre dette, skal man fjerne en af cellerne til højre. Se eksemplerne for en bedre forståelse.

Eksempel . Tabel uden sammenlægninger

Lad os se på en tabel uden sammenlægninger, som vi vil arbejde videre med:

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

Результат:

Eksempel . Udvider cellen til to kolonner

Lad os prøve at udvide celle 1 til to kolonner ved at give den attributten colspan med værdien 2. Den vil derved fortrænge cellerne til højre, og tabellen går i stykker:

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

Результат:

Eksempel . Udvider cellen uden at tabellen går i stykker

Lad os nu prøve at rette problemet med at tabellen går i stykker fra det forrige eksempel ved at fjerne en af cellerne til højre for vores (det er celle 2 eller 3 - det gør ikke noget):

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

Результат:

Eksempel . Udvider cellen til tre kolonner

Lad os udvide celle 1 til 3 kolonner og give den attributten colspan med værdien 3. Vi fjerner også endnu en celle til højre, så tabellen ikke går i stykker:

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

Результат:

Eksempel . Samtidig colspan og rowspan

Lad os prøve at sammenlægge celler med nummer 4, 5, 7 og 8, ved at bruge attributterne colspan og rowspan (tidligere sammenlægninger fjerner vi fra tabellen):

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

Результат:

Se også