Atrybut colspan to funkcja HTML, która umożliwia rozszerzenie komórki tabeli na stronie internetowej na wiele kolumn. HTML to jeden z głównych sposobów tworzenia stron internetowych. Jednym ze sposobów wprowadzenia struktury do strony internetowej HTML jest koncepcja tabeli. Tabela ma wiele wierszy i kolumn. Informacje w poszczególnych komórkach tabeli są uporządkowane pionowo i poziomo.
Często podczas wyświetlania tabeli HTML chciałbyś, aby niektóre informacje zostały zastosowane lub rozłożone na wiele kolumn. Gdy taka informacja jest ograniczona do jednego wiersza, przydaje się atrybut colspan. Dlatego colspan=N, gdzie N jest liczbą, taką jak 2, 3 itd., wskazuje, że komórka rozciąga się lub obejmuje tyle kolumn.
Rozważmy przykład, w którym dane sprzedaży są wyświetlane jako tabela z trzema nagłówkami kolumn: region sprzedaży, osoba nagłówka regionu i kwota sprzedaży. Gdy wyświetlana jest suma, interesująca jest tylko suma sprzedaży. W tym wierszu komórka osoby będzie pusta. Zamiast pokazywać pustą komórkę, dobrze jest zamiast tego zwrócić uwagę na sumę. Osiąga to poniższy kod.
W tym przykładzie tworzona jest tabela i określone są trzy nagłówki — Region, Kierownik sprzedaży i Sprzedaż — po których następują trzy wiersze danych. Każda komórka w tabeli jest oznaczona atrybutem td dla „danych tabeli”. W czwartym wierszu podano frazę Total Sales wraz z łączną kwotą. Zauważ, że fraza „Całkowita sprzedaż” jest podkreślona przez komórkę obejmującą dwie kolumny: kolumnę Region i kolumnę Head; osiąga się to poprzez określenie colspan=2. Ta komórka obejmuje dwie kolumny, więc ten wiersz ma tylko dwa atrybuty td, a nie trzy, jak w pozostałych wierszach.
Można skopiować ten kod do pliku tekstowego i wywołać go w przeglądarce, aby zobaczyć efekt. Strona internetowa może często nie wymagać wyświetlania danych w komórkach tabeli, jak w powyższym przykładzie. Koncepcja tabeli jest jednak bardzo przydatna do organizowania informacji na stronie internetowej.
Strona internetowa często zawiera nagłówek na górze, taki jak nazwa i logo firmy, jedno lub więcej menu na górze lub po bokach, główne informacje pośrodku i podsumowanie na dole. Aby to osiągnąć, pod spodem można zastosować strukturę tabeli bez wiedzy czytelnika. Dość często niektóre informacje są rozprowadzane w wielu kolumnach za pomocą atrybutu colspan, dzięki czemu strona internetowa nie wygląda nieporęcznie.
Jako przykład można chcieć osobistą stronę z trzema kolumnami: Rodzina, Kariera i Społeczność. Fajnym efektem byłoby przełamanie monotonnych łamów zdjęciem, gdzieś w dole strony, gdzie rozchodzi się na wszystkie łamy. Poniższy kod osiąga to z wartością rozpiętości 3.