Atribut colspan je funkcija HTML, ki omogoča, da se celica tabele na spletni strani razširi na več stolpcev. HTML je eden od glavnih načinov ustvarjanja spletnih strani. Eden od načinov za vnos strukture v spletno stran HTML je koncept tabele. Tabela ima več vrstic in stolpcev. Informacije v posameznih celicah tabele so prikazane navpično in vodoravno organizirane.
Pogosto bi pri prikazovanju tabele HTML želeli, da se nekatere informacije uporabijo ali razširijo na več stolpcev. Ko je takšen podatek omejen na eno vrstico, potem pride prav atribut colspan. Zato colspan=N, kjer je N neka številka, kot je 2, 3 itd., Nakazuje, da se celica razprostira ali obsega toliko stolpcev.
Razmislite o primeru, kjer so podatki o prodaji prikazani kot tabela s tremi naslovi stolpcev: prodajna regija, oseba, ki vodi regijo, in znesek prodaje. Ko je prikazana vsota, je zanimiv samo skupni znesek prodaje. Celica osebe bo v tej vrstici prazna. Namesto da prikažete prazno celico, je lepo, da opozorite na skupno. Naslednja koda to doseže.
V tem primeru je ustvarjena tabela in podani so trije naslovi – Regija, Vodja prodaje in Prodaja –, ki jim sledijo tri vrstice podatkov. Vsaka celica v tabeli je označena z atributom td za “podatke tabele”. V četrti vrstici je navedena besedna zveza Skupna prodaja skupaj s skupnim zneskom. Upoštevajte, da je izraz »Skupna prodaja« poudarjen s svojo celico, ki obsega dva stolpca: stolpec Regija in stolpec Head; to dosežemo z določitvijo colspan=2. Ta celica obsega dva stolpca, tako da ima ta vrstica samo dva atributa td in ne tri kot v drugih vrsticah.
To kodo lahko kopirate v besedilno datoteko in jo prikažete v brskalniku, da si ogledate učinek. Spletna stran morda ne zahteva pogosto prikazovanja podatkov v celicah tabele, kot v zgornjem primeru. Koncept tabele pa je zelo uporaben za organizacijo informacij na spletni strani.
Spletna stran je pogosto sestavljena iz glave na vrhu, kot je ime podjetja in logotip, enega ali več menijev na vrhu ali ob straneh, glavne informacije na sredini in povzetek informacij na dnu. Da bi to dosegli, se lahko spodaj uporabi struktura tabele, ne da bi se bralec tega zavedal. Pogosto se nekatere informacije razširijo na več stolpcev z uporabo atributa colspan, kar preprečuje, da bi spletna stran izgledala nerodno.
Kot primer bi lahko želeli osebno stran s tremi stolpci: Družina, Kariera in Skupnost. Lepo bi bilo, če bi monotone stolpce razbili s fotografijo nekje navzdol po strani, kjer se razprostira po vseh stolpcih. Naslednja koda to doseže z vrednostjo razpona 3.