Tabele w HTML

• Informacje podstawowe na temat tabeli w HTML
• Parametry wierszy i kolumn w tabeli
• Łączenie kolumn tabeli w pionie oraz poziomie

Informacje podstawowe na temat tabeli w HTML

Tabele powstały pierwotnie z myślą o przedstawianiu wyników badań. Dzisiaj tabel używa się przeważnie do formatowania wyglądu strony – dzięki nim możesz podzielić stronę na kilka kolumn, wierszy i w nich umieszczać treść.

Oto przykład prostej tabeli:

  <table cellspacing="0" cellpadding="0" border="1" style="width:100%;">
   <tbody>
   <tr>
   <td>
   Kolumna 1 Wiersz 1
   </td>
   <td>
   Kolumna 2 Wiersz 1
   </td>
   </tr>
   <tr>
   <td>
   Kolumna 1 Wiersz 2
   </td>
   <td>
   Kolumna 2 Wiersz 2
   </td>
   </tr>
   </tbody>
 </table>

1. Rozpoczynasz od definicji tabeli – podajesz jej szerokość width (ustalasz, że będzie ona rozciągnięta na całą szerokość okna), podajesz odległości między polami tabelki – cellspacing oraz odległość tekstu od krawędzi pola tabelki – cellpadding. Aby wyswietlić obramowanie tabelki musisz je uaktywnić wpisując cyfrę 1 – border.
2. Otwierasz definicję wiersza.
3. Otwierasz kolumnę w pierwszym wierszu i wpisujesz do niej przykładowy tekst.
4. Podobnie jak wyżej, tylko tym razem operujesz na drugiej kolumnie.
5. Zamykasz pierwszy wiersz.
6. Otwierasz drugi wiersz.
7. Podobnie jak w punkcie 3 tworzysz pierwszą kolumnę w drugim wierszu.
8. To samo dla drugiej kolumny.
9. Zamykasz drugi wiersz.
10. Zamykasz tabelę.

Przy tworzeniu tabel obowiązują pewne zasady:

• zawsze po otwarciu tabeli <table> powinno znajdować się otwarcie wiersza <tr>, a po nim definicja kolumny <td>. Pomiędzy tymi trzema znacznikami nie można umieszczać tekstu, obrazków itp. To samo dotyczy znaczników zamykających kolumny, wiersze i tabele.
• Ilość kolumn w każdym z wierszy tabeli powinna być zawsze taka sama.

Parametry wierszy i kolumn w tabeli

Zarówno wierszom, jak i kolumnom można nadawać parametry.

 <table cellspacing="0" cellpadding="0" border="1" style="width: 100%;">
  <tbody>
  <tr bgcolor="#cc3300">
  <td width="30%" valign="top">
  Kolumna 1 Wiersz 1
  </td>
  <td width="200" align="center">
  Kolumna 2 Wiersz 1
  </td>
  </tr>
  </tbody>
 </table>

1. Otwierasz tabelę i definiujesz jej parametry.
2. Otwierasz wiersz i ustalasz kolor tła na czerwony (#cc3300).
3. Wstawiasz pierwszą kolumnę. Ustalasz, że jest ona szeroka na 30% szerokości całej tabeli oraz jej zawartość będzie wyrównana w poziomie do góry tabeli.
4. Definiujesz kolejną kolumnę. W tym przypadku ustalasz szerokość na 200 pikseli i całą jej zawartość wyrównujesz w pionie do środka.
5. Zamykasz wiersz.
6. Zamykasz tabelę.

Łączenie kolumn tabeli w pionie oraz poziomie

Istnieje również możliwość łączenia kolumn – zarówno w pionie jak i w poziomie.

  <table cellspacing="0" cellpadding="0" border="1" style="width: 100%;">
   <tbody>
   <tr>
   <td rowspan="2">
   Kolumna 1 Wiersz 1 i 2
   </td>
   <td colspan="3">
   Kolumna 2,3 i 4 Wiersz 1
   </td>
   </tr>
   <tr>
   <td>
   Kolumna 2 Wiersz 2
   </td>
   <td>
   Kolumna 3 Wiersz 2
   </td>
   <td>Kolumna 3 Wiersz 2
   </td>
   </tr>
   </tbody>
  </table>

1. Otwierasz tabelę.
2. Następnie otwierasz wiersz.
3. Wynikiem tego kodu będzie połączenie pierwszej kolumny z wiersza pierwszego z tą samą kolumną w wierszu drugim – rowspan.
4. W tej linii łączysz trzy sąsiadujące kolumny w jedną – colspan.
5. Zamykasz wiersz.
6. Otwierasz drugi wiersz.
7. Jako że piewsza kolumna tego wiersza uległa połączeniu w poprzednim wierszu, nie musisz już jej tutaj definiować. Pozostały Ci jedynie trzy z czterech kolumn. Tutaj definiujesz pierwszą z nich.
8. Tutaj drugą.
9. I trzecią ostatnią. W tym punkcie należy policzyć czy ilość kolumn w obu wierszach się zgadza.
10. Zamykasz drugi wiersz.
11. Kończysz tabelę.