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>

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>