Atribut colspan je HTML značajka koja omogućuje da se ćelija tablice na web stranici proširi na više stupaca. HTML je jedan od glavnih načina izrade web stranica. Jedan od načina da se struktura unese u HTML web stranicu je koncept tablice. Tablica ima više redaka i stupaca. Informacije u pojedinačnim ćelijama tablice pojavljuju se okomito i vodoravno organizirane.
Često, kada se prikazuje HTML tablica, željeli bi se neke informacije primijeniti ili proširiti na više stupaca. Kada je takva informacija ograničena na jedan redak, onda dobro dođe atribut colspan. Stoga colspan=N, gdje je N neki broj kao što je 2, 3, itd., označava da se ćelija širi ili obuhvaća toliko stupaca.
Razmotrimo primjer gdje su podaci o prodaji prikazani kao tablica s tri naslova stupaca: prodajna regija, osoba koja vodi regiju i iznos prodaje. Kada je prikazan zbroj, interesantan je samo ukupni iznos prodaje. Ćelija osobe bit će prazna u tom retku. Umjesto da prikazujete praznu ćeliju, lijepo je skrenuti pozornost na zbroj. Sljedeći kod to postiže.
U ovom primjeru kreirana je tablica i navedena su tri naslova — Regija, Voditelj prodaje i Prodaja — nakon čega slijede tri reda podataka. Svaka ćelija u tablici označena je atributom td, za “podatke tablice”. U četvrtom se retku daje izraz Ukupna prodaja zajedno s ukupnim iznosom. Primijetite da je izraz “Ukupna prodaja” naglašen svojom ćelijom koja obuhvaća dva stupca: stupac Region i stupac Head; to se postiže specificiranjem colspan=2. Ova ćelija obuhvaća dva stupca, tako da ovaj red ima samo dva td atributa, a ne tri kao u drugim recima.
Ovaj kod možete kopirati u tekstualnu datoteku i prikazati ga u pregledniku kako biste vidjeli učinak. Web stranica možda neće često zahtijevati prikazivanje podataka unutar ćelija tablice kao u gornjem primjeru. Međutim, koncept tablice vrlo je koristan za organiziranje informacija na web stranici.
Web stranica se često sastoji od zaglavlja na vrhu, kao što su naziv tvrtke i logotip, jedan ili više izbornika na vrhu ili sa strane, glavne informacije u sredini i sažete informacije na dnu. Da bi se to postiglo, ispod se može koristiti struktura tablice, a da čitatelj toga nije svjestan. Vrlo često se neke informacije šire na više stupaca pomoću atributa colspan, sprječavajući da web stranica izgleda nezgrapno.
Kao primjer, može se željeti osobna stranica s tri stupca: Obitelj, Karijera i Zajednica. Bilo bi lijepo monotone stupce razbiti fotografijom, negdje dolje na stranici, pri čemu se ona širi po svim stupcima. Sljedeći kod to postiže s vrijednošću raspona od 3.