PricingLoginStart free
HTML Academy · Lektion

colspan og rowspan til celleudspænding

Sammenflet celler på tværs af kolonner og rækker.

Lektion 3 af 414 trin

colspan og rowspan til celleudspænding er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.

Hvad er cellesammenfletning?

Som standard fylder hver tabelcelle én række og én kolonne. Sammenfletning gør det muligt for en celle at strække sig over flere kolonner eller rækker:

  • colspan — stræk over flere kolonner
  • rowspan — stræk over flere rækker

colspan

Attributten colspan får en celle til at strække sig over flere kolonner:

<table>
  <tr>
    <th colspan="3">2024 Quarterly Sales</th>
  </tr>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>$10k</td>
    <td>$12k</td>
    <td>$15k</td>
  </tr>
</table>

rowspan

Attributten rowspan får en celle til at strække sig over flere rækker:

<table>
  <tr>
    <th rowspan="2">John</th>
    <td>HTML</td>
    <td>95</td>
  </tr>
  <tr>
    <!-- no th here — John's cell spans this row -->
    <td>CSS</td>
    <td>88</td>
  </tr>
</table>

colspan og rowspan sammen

Du kan kombinere begge attributter i én celle:

<table>
  <tr>
    <th colspan="2" rowspan="2">Top-Left Corner</th>
    <th>Col 3</th>
  </tr>
  <tr>
    <td>Row 2, Col 3</td>
  </tr>
  <tr>
    <td>Row 3, Col 1</td>
    <td>Row 3, Col 2</td>
    <td>Row 3, Col 3</td>
  </tr>
</table>

Håndtering af sammenflettede celler

Når en celle strækker sig over flere kolonner, skal du udelade disse kolonner i de rækker, den strækker sig over:

<table>
  <tr>
    <td colspan="2">Spans 2 columns</td>
    <!-- This row has: 1 td = 2 columns wide -->
    <td>Third column</td>
  </tr>
  <tr>
    <td>Col 1</td>   <!-- back to 1 column each -->
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

Almindelige mønstre for cellesammenfletning

Eksempler på cellesammenfletning fra virkeligheden:

<!-- Group header spanning all data columns -->
<thead>
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="3">Test Scores</th>
  </tr>
  <tr>
    <th>Math</th><th>Science</th><th>English</th>
  </tr>
</thead>

rowspan til sammenflettede rækkeoverskrifter

Brug rowspan til at oprette sammenflettede etiketter for rækkegrupper:

<tbody>
  <tr>
    <th rowspan="3">Frontend</th>
    <td>HTML</td>
    <td>Structure</td>
  </tr>
  <tr>
    <!-- Frontend spans this row -->
    <td>CSS</td>
    <td>Presentation</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Behavior</td>
  </tr>
</tbody>

colspan=0 — celle i fuld bredde

En colspan på 0 strækker sig over alle resterende kolonner i en kolonnegruppe (bruges sjældent):

<!-- colspan="0" spans the entire colgroup -->
<td colspan="0">Full width row</td>

Sammenfletning og tilgængelighed

Komplekse tabeller med cellesammenfletning kræver attributterne scope og headers til skærmlæsere:

<th scope="colgroup" colspan="3">2024 Scores</th>
<!-- scope="colgroup" applies to a spanning header -->

<!-- For complex tables, use headers attribute on td: -->
<td headers="col-q1 row-alice">95</td>

Fejlfinding af problemer med cellesammenfletning

Almindelige fejl ved cellesammenfletning:

  • For mange eller for få celler i en række efter sammenfletning
  • rowspan strækker sig ud over antallet af rækker
  • Overlappende sammenfletninger (to celler gør krav på samme position)

Brug browserens DevTools til at undersøge tabelstrukturen, hvis noget ser forkert ud.

CSS til sammenflettede celler

Style celler, der strækker sig over flere kolonner eller rækker:

[colspan] {
  text-align: center;
  font-weight: bold;
  background-color: #e2e8f0;
}

/* Or use attribute selectors for specific spans: */
[colspan="3"] {
  background-color: #dbeafe;
}

Udskrivning og cellesammenfletning

Sammenflettede celler udskrives korrekt i moderne browsere. Der er dog følgende undtagelser:

  • Hvis thead-rækker strækker sig over kolonner, gentages de korrekt på hver udskrevne side
  • Rowspan i tbody gentages ikke på tværs af sideskift
  • Test komplekse tabeller i forhåndsvisningen før udgivelse

Hurtigt tjek

Du har en tabelcelle, der skal dække 3 kolonner. Hvilken attribut bruger du?

Besvar den i den interaktive lektion

Opsamling: colspan og rowspan

Det vigtigste om cellesammenfletning:

  • colspan — cellen strækker sig over flere kolonner
  • rowspan — cellen strækker sig over flere rækker
  • Tag højde for sammenflettede celler: udelad de celler, som sammenfletningen dækker
  • Tilføj scope="colgroup" for at gøre sammenflettede overskrifter tilgængelige
  • Brug DevTools til at finde layoutproblemer
Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
40
Lektioner
159
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “colspan og rowspan til celleudspænding” gratis?

Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “colspan og rowspan til celleudspænding”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “colspan og rowspan til celleudspænding”?

Sammenflet celler på tværs af kolonner og rækker. Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på HTML Academy?

Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “colspan og rowspan til celleudspænding”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne HTML Academy-lektion?

Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. table, tr, td og th
  2. Strukturen i thead, tbody og tfoot
  3. colspan og rowspan til celleudspænding
  4. Tilgængelighed i tabeller: scope, summary og caption
← Tilbage til HTML Academy