Dzięki zastosowaniu tabel możemy w łatwy sposób rozmieszczać elementy na stronie. Oprócz tworzenia tabelek, w których umieszczamy informacje, można za pomącą tabeli zrobić szkielet strony.
Na początek opiszę, z jakich znaczników składa się tabela. Znaczniki <table> i <⁄table> są elementami otwierającymi i zamykającymi. Pomiędzy nie wpisujemy <tr> i <⁄tr> są to znaczniki tworzące wiersz w tabeli. I pozostały nam znaczniki komórki, które umieszczamy pomiędzy znacznikami wiersza, są to <td> i <⁄td>.
Zacznijmy od prostej tabeli podzielonej na dwie komórki:
| <table width=”300″ height=”100″ border=”1″> <tr> <td> 1 komórka </td> <td> 2 komórka </td> </tr> </table> |
Wpisując ten kod otrzymamy:
| 1 komórka | 2 komórka |
Atrybuty width i height są odpowiedzialne za szerokość i wysokość tabeli. Wpisywane wartości mogą być w pikselach oraz w procentach wówczas wpisujemy np. „30%„. Natomiast atrybut border definiuje nam grubość obramowania, wpisując wartość „0” sprawimy, iż obramowanie będzie niewidoczne.
Teraz wykonamy tabele z wykorzystaniem colspan i rowspan:
| <table width=”300″ height=”100″ border=”1″> <tr> <td colspan=”2″> 1 komórka </td> </tr> <tr> <td> 2 komórka </td> <td> 3 komórka </td> </tr> </table> |
Po wisaniu kodu otrzymamy:
| 1 komórka | |
| 2 komórka | 3 komórka |
Atrybut colspan służy do łączenia komórek wpisana wartość „2” oznacza, że łączy się ze sobą dwie komórki.
No i jeszcze tabelka z zastosowaniem rowspan, czyli łączenia ze sobą wierszy:
| <table width=”300″ height=”100″ border=”1″> <tr> <td rowspan=”2″> 1 komórka </td> <td> 2 komórka </td> </tr> <tr> <td> 3 komórka </td> </tr> </table> |
| 1 komórka | 2 komórka |
| 3 komórka |
Są to najprostsze przykłady tabeli są one jednak często stosowane. Można je w dowolny sposób rozbudowywać w zależności od potrzeb. Rodzajów tabel jest jeszcze kilka między innymi zagnieżdżanie tabel oraz nie wyświetlanie poszczególnych części obramowania tabeli. Opiszę je w następnej części.
