Colspan-attributet är en HTML-funktion som gör att en tabellcell på en webbsida kan sträcka sig över flera kolumner. HTML är ett av de viktigaste sätten att skapa webbsidor. Ett sätt att föra in struktur i en HTML-webbsida är konceptet med en tabell. En tabell har flera rader och kolumner. Informationen i de enskilda cellerna i tabellen visas vertikalt och horisontellt organiserad.
När man visar en HTML-tabell vill man ofta att viss information ska tillämpas eller spridas över flera kolumner. När en sådan information är begränsad till en rad, kommer attributet colspan väl till pass. Därför indikerar colspan=N, där N är ett tal som 2, 3, etc., att cellen sprider sig eller sträcker sig över så många kolumner.
Tänk på ett exempel där försäljningsdata visas som en tabell med tre kolumnrubriker: försäljningsregionen, personen som leder regionen och försäljningsbeloppet. När summan visas är endast försäljningsbeloppet av intresse. Personcellen kommer att vara tom på den raden. Istället för att visa en tom cell är det trevligt att uppmärksamma totalen istället. Följande kod uppnår detta.
I det här exemplet skapas en tabell och tre rubriker – Region, Försäljningschef och Försäljning – anges, följt av tre rader med data. Varje cell i tabellen indikeras av td-attributet, för ”tabelldata.” På den fjärde raden ges frasen Total försäljning tillsammans med det totala beloppet. Lägg märke till att frasen ”Total försäljning” framhävs av dess cell som spänner över två kolumner: Regionkolumnen och Head-kolumnen; detta uppnås genom att ange colspan=2. Den här cellen spänner över två kolumner, så den här raden har bara två td-attribut och inte tre som i de andra raderna.
Man kan kopiera denna kod till en textfil och ta upp den i en webbläsare för att se effekten. En webbsida behöver inte ofta visa data i tabellceller som i exemplet ovan. Tabellkonceptet är dock mycket användbart för att organisera informationen på en webbsida.
En webbsida består ofta av en rubrik överst, såsom företagsnamn och logotyp, en eller flera menyer överst eller längst upp, huvudinformation i mitten och sammanfattande information längst ner. För att uppnå detta kan en tabellstruktur användas under utan att läsaren är medveten om det. Ganska ofta sprids en del information över flera kolumner med hjälp av attributet colspan, vilket förhindrar att webbsidan ser klumpig ut.
Som ett exempel kan man vilja ha en personlig sida med tre kolumner: Familj, Karriär och Gemenskap. Det skulle vara en trevlig effekt att bryta de monotona kolumnerna med ett foto, någonstans ner på sidan, där det sprids över alla kolumner. Följande kod uppnår detta med ett spanvärde på 3.