0Pricing
HTML Academy · Lezione

colspan e rowspan per unire celle

Unire celle su più colonne e righe

colspan e rowspan per unire celle è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Che cos'è l'estensione delle celle?

Per impostazione predefinita, ogni cella della tabella occupa una riga e una colonna. L'estensione consente a una cella di occupare più colonne o righe:

  • colspan — estende la cella su più colonne
  • rowspan — estende la cella su più righe

colspan

L'attributo colspan fa sì che una cella si estenda su più colonne:

<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

L'attributo rowspan fa sì che una cella si estenda su più righe:

<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 e rowspan insieme

Può combinare entrambi gli attributi nella stessa cella:

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

Gestire le celle estese

Quando una cella si estende su più colonne, ometta tali colonne nelle righe interessate:

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

Schemi comuni di estensione

Esempi di estensione delle celle nelle tabelle reali:

<!-- 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 per intestazioni di riga unite

Utilizzi rowspan per creare etichette unite per i gruppi di righe:

<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 — cella a larghezza completa

Un valore colspan pari a 0 estende la cella su tutte le colonne rimanenti di un gruppo di colonne (è usato raramente):

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

Estensione delle celle e accessibilità

Le tabelle con estensioni complesse richiedono gli attributi scope e headers per i lettori di schermo:

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

Debug dei problemi di estensione

Errori comuni nell'estensione delle celle:

  • Troppe o troppo poche celle in una riga dopo l'estensione
  • rowspan che si estende oltre il numero di righe
  • Estensioni sovrapposte (due celle che dichiarano la stessa posizione)

Se qualcosa non appare corretto, utilizzi gli Strumenti per sviluppatori del browser per esaminare la struttura della tabella.

CSS per le celle estese

Applichi uno stile alle celle che si estendono su più colonne o righe:

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

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

Stampa ed estensione delle celle

Nei browser moderni, le celle estese vengono stampate correttamente. Tuttavia:

  • Se le righe di thead si estendono su più colonne, vengono ripetute correttamente su ogni pagina stampata
  • Un rowspan all'interno di tbody non viene ripetuto quando la tabella si interrompe tra due pagine
  • Verifichi le tabelle complesse nell'anteprima di stampa prima di pubblicarle

Verifica rapida

Ha una cella della tabella che deve coprire 3 colonne. Quale attributo deve utilizzare?

Riepilogo: colspan e rowspan

Concetti essenziali sull'estensione delle celle:

  • colspan — la cella si estende su più colonne
  • rowspan — la cella si estende su più righe
  • Gestisca le celle estese: ometta le celle coperte dall'estensione
  • Aggiunga scope="colgroup" per l'accessibilità delle intestazioni estese
  • Utilizzi gli Strumenti per sviluppatori per eseguire il debug dei problemi di layout

Domande Frequenti

La lezione «colspan e rowspan per unire celle» è gratuita?

Sì — il testo completo di «colspan e rowspan per unire celle» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «colspan e rowspan per unire celle»?

Unire celle su più colonne e righe Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «colspan e rowspan per unire celle»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. table, tr, td e th
  2. Struttura di thead, tbody e tfoot
  3. colspan e rowspan per unire celle
  4. Accessibilità delle tabelle: scope, summary e caption
← Torna a HTML Academy