Attributo rowspan

L'attributo rowspan controlla l'unione delle righe in una tabella HTML. Si applica ai tag th e td.

Valore accettato: numero intero a partire da 1.

Come usarlo: aggiungi questo attributo a qualsiasi cella td o th. Se, ad esempio, imposti rowspan al valore 2 - la cella a cui è stato assegnato occuperà due righe in altezza della tabella. In questo caso le celle della riga sottostante non scompariranno da nessuna parte, la nostra cella allargata le sposterà e la tabella si romperà. Per evitare che ciò accada, è necessario eliminare una delle celle dalla riga sottostante. Guarda gli esempi per meggiore comprensione.

Esempio . Tabella senza unioni

Diamo un'occhiata a una tabella senza unioni, con cui lavoreremo in seguito:

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

Результат:

Esempio . Espandiamo la cella su due righe

Ora espandiamo la cella 1 su due righe, assegnandole l'attributo rowspan con valore 2. Vedremo che sposta le celle dalla riga sottostante e la tabella si rompe:

html<table>
  <tr>
    <td rowspan="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;
}

Результат:

Esempio . Espandiamo la cella senza rompere la tabella

Per correggere il problema della rottura della tabella dell'esempio precedente, proviamo a eliminare una delle celle dalla seconda riga (e non necessariamente la cella 4 che si trova direttamente sotto la nostra cella 1, puoi eliminare qualsiasi cella, elimineremo la cella numero 5):

html<table>
  <tr>
    <td rowspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

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

Результат:

Esempio . Espandiamo la cella su 3 righe

Qui espandiamo la nostra cella non su due righe, ma su 3, impostiamo rowspan al valore 3. In questo caso eliminiamo una delle celle dalla terza riga (cella 7, 8 o 9 - non importa quale), in modo che la tabella non si rompa:

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>   

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

Результат:

Esempio . Espandiamo ancora di 2 colonne

Espandiamo anche la cella 2 di 2 colonne in aggiunta alla prima cella. Per fare questo, aggiungiamo colspan alla cella 2 con valore 2. In questo caso eliminiamo la cella 3, in modo che la tabella non si rompa:

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td colspan="2">cell2</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>

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

Результат:

Vedi anche