L’attributo colspan è una funzionalità HTML che consente a una cella di tabella in una pagina Web di estendersi su più colonne. L’HTML è uno dei principali modi in cui vengono create le pagine web. Un modo per portare la struttura in una pagina web HTML è il concetto di tabella. Una tabella ha più righe e colonne. Le informazioni nelle singole celle della tabella appaiono organizzate verticalmente e orizzontalmente.
Spesso, quando si visualizza una tabella HTML, si desidera che alcune informazioni vengano applicate o distribuite su più colonne. Quando tale informazione è limitata a una riga, l’attributo colspan torna utile. Pertanto colspan=N, dove N è un numero come 2, 3, ecc., indica che la cella si estende o si estende su quel numero di colonne.
Considera un esempio in cui i dati sulle vendite vengono mostrati come una tabella con tre intestazioni di colonna: la regione di vendita, la persona che dirige la regione e l’importo delle vendite. Quando viene visualizzato il totale, interessa solo l’importo totale delle vendite. La cella della persona sarà vuota in quella riga. Piuttosto che mostrare una cella vuota, è bello invece portare l’attenzione sul totale. Il seguente codice ottiene questo.
In questo esempio viene creata una tabella e vengono specificate tre intestazioni, Regione, Responsabile vendite e Vendite, seguite da tre righe di dati. Ogni cella della tabella è indicata dall’attributo td, per “dati della tabella”. Nella quarta riga, viene fornita la frase Total Sales insieme all’importo totale. Notare che la frase “Vendite totali” è enfatizzata dalla sua cella che si estende su due colonne: la colonna Regione e la colonna Testa; questo si ottiene specificando colspan=2. Questa cella si estende su due colonne, quindi questa riga ha solo due attributi td e non tre come nelle altre righe.
È possibile copiare questo codice in un file di testo e visualizzarlo in un browser per visualizzare l’effetto. Una pagina Web potrebbe non richiedere spesso la visualizzazione dei dati all’interno delle celle della tabella come nell’esempio precedente. Tuttavia, il concetto di tabella è molto utile per organizzare le informazioni su una pagina web.
Una pagina web è spesso costituita da un’intestazione in alto, come il nome e il logo dell’azienda, uno o più menu in alto o ai lati, le informazioni principali al centro e le informazioni di riepilogo in basso. Per ottenere ciò, è possibile utilizzare una struttura di tabella sottostante senza che il lettore ne sia consapevole. Abbastanza spesso alcune informazioni si diffondono su più colonne utilizzando l’attributo colspan, impedendo alla pagina web di apparire goffa.
Ad esempio, si potrebbe volere una pagina personale con tre colonne: Famiglia, Carriera e Comunità. Sarebbe un bell’effetto spezzare le colonne monotone con una foto, da qualche parte in fondo alla pagina, in cui si diffonde su tutte le colonne. Il codice seguente ottiene questo risultato con un valore span di 3.