Unire righe e colonne
Fa parte della sezione Fondamenti del percorso HTML di Coddy. Lezione 50 di 60.
In HTML, puoi fare in modo che le celle di una tabella si estendano su più righe o colonne usando gli attributi rowspan e colspan. Questi attributi ti consentono di creare layout di tabella più complessi unendo le celle.
L'attributo colspan viene utilizzato per specificare il numero di colonne su cui deve estendersi una cella. Viene aggiunto al tag <td> o <th> della cella che vuoi espandere.
Ecco un esempio di come usare colspan:
<table border="1">
<tr>
<th colspan="2">Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>In questo esempio, la cella di intestazione con il testo "Name" si estende su due colonne. Questo è utile per creare un'intestazione che copra più colonne. Ecco come appare:
L'attributo rowspan viene usato per specificare il numero di righe che una cella deve occupare. Viene aggiunto anche al tag <td> o <th> della cella che vuoi espandere.
Ecco un esempio di come usare rowspan:
<table border="1">
<tr>
<th>Employee</th>
<th>Shift</th>
</tr>
<tr>
<td rowspan="2">Alex</td>
<td>Morning</td>
</tr>
<tr>
<td>Evening</td>
</tr>
</table>Qui, rowspan viene usato per mostrare che Alex lavora sia al turno del mattino sia a quello della sera senza ripetere il nome.
Puoi usare sia colspan sia rowspan nella stessa tabella per creare layout complessi. Ricorda solo di regolare di conseguenza il numero di celle in ogni riga per tenere conto delle celle estese.
Sfida
FacileCrea un documento HTML che includa una tabella con celle che si estendono su più righe e colonne. La tabella deve avere la seguente struttura:
- Una riga della tabella (
<tr>) con una cella di intestazione (<th>) che si estende su tre colonne e contiene il testo"Student Report". - Un'altra riga della tabella (
<tr>) con una cella di intestazione (<th>) che dice"Name", una cella di intestazione (<th>) che dice"Subject"e una cella di intestazione (<th>) che dice"Grade". - Un'altra riga della tabella (
<tr>) con una cella di dati (<td>) che dice"John Doe", una cella di dati (<td>) che dice"Math"e una cella di dati (<td>) che dice"A". - Un'altra riga della tabella (
<tr>) con una cella di dati (<td>) che si estende su due righe e contiene il testo"Jane Smith", una cella di dati (<td>) che dice"Science"e una cella di dati (<td>) che dice"B". - Una riga finale della tabella (
<tr>) con una cella di dati (<td>) che dice"History"e una cella di dati (<td>) che dice"A".
Provalo tu
<!DOCTYPE html>
<html>
<body>
<table border="1">
<!-- Scrivi il codice qui -->
</table>
</body>
</html>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Fondamenti
1Fondamenti di HTML
Che cos’è HTML?Struttura di base di un documento HTMLTag ed elementiAnnidamento e tag di chiusuraCommenti in HTML7Pagina del profilo personale
Panoramica del progettoSezione intestazione
Immagine del profiloSezione Chi sonoLink ai social2Testo e formattazione
IntestazioniParagrafiInterruzioni di rigaTesto in grassetto e corsivoAncora grassetto e corsivoRiepilogo - formattazione5Aggiungere contenuti
Attributi HTMLCollegamentiCollegamenti a nuove pagineImmaginiAttributi delle immagini8Moduli e campi di input - Parte 1
Nozioni di base sui moduliCampi di testoAttributi degli inputCampo passwordEtichette per gli inputRiepilogo - modulo di base11Pagina di registrazione all'evento
Panoramica del progettoSezione intestazioneSezione dettagli dell'eventoModulo di registrazioneSezione piè di paginaEsercitati da solo: Playground Web