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 atrybutucolspan
<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 | |
Łączenie Komórek Wierszami (w pionie)
rowspan
Rozpiętość komórek możemy podawać nie tylko w poziomie, ale również w pionie, łącząc kolejne wiersze. W tym celu posłużymy się atrybutem rowspan (ang. row span – rozpiętość wierszowa komórki). Atrybut ten działa analogicznie do poprzedniego, tylko tym razem zwiększając rozpiętość komórki w pionie.
1. Przykład z zastosowaniem atrybuturowspan
<table> <tr> <th></th> <th>Rodzaj</th> </tr> <tr> <th>Sharknado</th> <td rowspan="3">Horror</td> </tr> <tr> <th>Shartopussy</th> </tr> <tr> <th>Piranha 3DD</th> </tr> </table>
| Rodzaj | |
|---|---|
| Sharknado | Horror |
| Shartopussy | |
| Piranha 3DD |