Tabele w HTML

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ę.
  • Czy artykuł był pomocny?
  • TAK   Nie
Tematy powiązane
Więcej informacji na forum dyskusyjnym:   Kliknij tutaj, aby przejść na forum.home.pl