PricingLoginStart free
HTML Academy · Lektion

colspan och rowspan för cellöverspänning

Slå samman celler över kolumner och rader.

Lektion 3 av 414 steg

colspan och rowspan för cellöverspänning är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.

Vad innebär cellöverspänning?

Som standard upptar varje tabellcell en rad och en kolumn. Överspänning gör att en cell kan sträcka sig över flera kolumner eller rader:

  • colspan — sträcker sig över flera kolumner
  • rowspan — sträcker sig över flera rader

colspan

Attributet colspan gör att en cell sträcker sig över flera kolumner:

<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

Attributet rowspan gör att en cell sträcker sig över flera rader:

<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 och rowspan tillsammans

Du kan kombinera båda attributen i en och samma cell:

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

Hantera celler som sträcker sig över flera kolumner

När en cell sträcker sig över flera kolumner ska du utelämna dessa kolumner i de rader som cellen sträcker sig över:

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

Vanliga mönster för överspänning

Exempel på överspänning i verkliga tabeller:

<!-- 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 för sammanslagna radhuvuden

Använd rowspan för att skapa sammanslagna etiketter för radgrupper:

<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 — cell över hela bredden

Ett colspan på 0 sträcker sig över alla återstående kolumner i en kolumngrupp (används sällan):

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

Överspänning och tillgänglighet

Komplexa tabeller med överspänning behöver attributen scope och headers för skärmläsare:

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

Felsökning av problem med överspänning

Vanliga misstag med överspänning:

  • För många eller för få celler i en rad efter överspänning
  • rowspan sträcker sig längre än antalet rader
  • Överlappande överspänningar (två celler gör anspråk på samma position)

Använd webbläsarens DevTools för att granska tabellstrukturen om något ser fel ut.

CSS för celler med överspänning

Formatera celler som sträcker sig över flera kolumner eller rader:

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

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

Utskrift och överspänning

Celler med överspänning skrivs ut korrekt i moderna webbläsare. Observera dock:

  • Om thead-rader sträcker sig över kolumner upprepas de korrekt på varje utskriven sida
  • rowspan i tbody upprepas inte över sidbrytningar
  • Testa komplexa tabeller i förhandsgranskningen före publicering

Snabbkontroll

Du har en tabellcell som ska täcka tre kolumner. Vilket attribut använder du?

Besvara frågan i den interaktiva lektionen

Sammanfattning: colspan och rowspan

Grunderna i cellöverspänning:

  • colspan — cellen sträcker sig över flera kolumner
  • rowspan — cellen sträcker sig över flera rader
  • Ta hänsyn till celler som redan täcks: utelämna cellerna som överspänningen täcker
  • Lägg till scope="colgroup" för tillgänglighet hos rubriker som sträcker sig över flera kolumner
  • Använd DevTools för att felsöka layoutproblem
Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
40
Lektioner
159
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”colspan och rowspan för cellöverspänning” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”colspan och rowspan för cellöverspänning”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”colspan och rowspan för cellöverspänning”?

Slå samman celler över kolumner och rader. Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig HTML Academy?

Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”colspan och rowspan för cellöverspänning”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här HTML Academy-lektionen?

Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. table, tr, td och th
  2. Strukturen thead, tbody och tfoot
  3. colspan och rowspan för cellöverspänning
  4. Tabelltillgänglighet: scope, summary och caption
← Tillbaka till HTML Academy