Colspan – Łączenie Kolumnami

Tabela HTML – Łączenie komórek

W przypadku, gdy jedna komórka odnosi się do więcej niż jednego nagłówka, możemy dokonać połączenia kilku komórek w jedną, żeby kilkukrotnie nie powtarzać jej wartości. Łączenie nie jest jednak najlepszym określeniem, w przypadku tabeli html. W zasadzie nie dokonujemy łączenia komórek, a zwiększenia ich rozpiętości w pionie lub poziomie.

Łączenie Komórek Kolumnami (w poziomie)

colspan

W celu zwiększenia rozpiętości poziomej komórki używamy atrybutu colspan (ang. column span – rozpiętość kolumnowa komórki). Atrybut ten przyjmuje wartości liczbowe, tzn. przekazujemy tam jaką rozpiętość kolumnową (czyli w poziomie) ma posiadać dana komórka tabeli.

1. Przykład z zastosowaniem atrybutu colspan

<table>
  <tr>
    <th></th>
    <th>Poniedziałek</th>
    <th>Wtorek</th>
  </tr>
  <tr>
    <th>18:00</th>
    <td>Kręgle</td>
    <td>Polo</td>
  </tr>
  <tr>
    <th>20:00</th>
    <td colspan="2">Basen i Sauna</td>
  </tr>
 </table>
Poniedziałek Wtorek
18:00 Kręgle Polo
20:00 Basen i Sauna

2. Przykład z zastosowanie atrybutu colspan i scope

<table>
  <tr>
    <th></th>
    <th scope="col">Poniedziałek</th>
    <th scope="col">Wtorek</th>
    <th scope="col">Środa</th>
    <th scope="col">Czwartek</th>
    <th scope="col">Piątek</th>
  </tr>
  <tr>
    <th scope="row">18:00</th>
    <td>Kręgle</td>
    <td>Polo</td>
    <td colspan="2">Golf</td>
    <td>Krykiet</td>
  </tr>
  <tr>
    <th scope="row">20:00</th>
    <td colspan="4">Basen i Sauna</td>
    <td>Impreza</td>
  </tr>
 </table>
Poniedziałek Wtorek Środa Czwartek Piątek
18:00 Kręgle Polo Golf Krykiet
20:00 Basen i Sauna Impreza
Jeśli masz czas i ochotę sprawdź mój nowy projekt Zdalny Ninja. Jest to serwis poświęcony Pracy Zdalnej. Zachęcam Cię już teraz do wpisania się na listę osób, które jako pierwsze dowiedzą się, że projekt wystartował.