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ć elementy na stronie WWW lub nawet całą stronę WWW na kilka kolumn, wierszy i w nich umieszczać treść. Z poniższego artykułu dowiesz się, w jaki sposób utworzyć tabelę w języku HTML, nadać jej własny styl i wprowadzić do niej treść.
SPIS TREŚCI
- Dodawanie i edytowanie tabel w języku HTML
- Budowa tabeli
- Struktura tabeli
- Komórki nagłówkowe
- Tytuł tabeli
- Parametry wierszy i kolumn w tabeli
- Łączenie kolumn tabeli w pionie oraz poziomie
- Położenie zawartości komórki
- Przykład zastosowania
Dodawanie i edytowanie tabel w języku HTML
W niedalekiej przeszłości większość stron internetowych posiadała budowę w oparciu na tabelach HTML. Tabele nadal są bardzo popularne — nie tylko ułatwiają prezentację treści strony, np. tabel z parametrami produktu, tabel funkcjonalnych, obliczeniowych, ale także nadal mogą służyć jako szkielet tworzonej strony internetowej lub jej wybranego obszaru.
Jeśli jesteś użytkownikiem usług home.pl lub tworzysz stronę internetową, możesz wykorzystać tabele HTML np. podczas edytowania treści w kreatorze stron WWW, w opisach, stronach informacyjnych czy kategoriach sklepu internetowego eSklep, a także podczas dodawania treści w popularnych systemach CMS, jak chociażby WordPress, dostępny w ramach usługi WordPress Hosting SSD.
Budowa tabeli
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.
Struktura tabeli
Tabelę tworzymy za pomocą 3 podstawowych znaczników:
- <table>…</table> – znacznik otwarcia i zamknięcia tabeli,
- <tr>…</tr> – znacznik otwarcia i zamknięcia wiersza, stosowany na początku i końcu każdego wiersza,
- <td>treść komórki</td> – znacznik otwarcia i zamknięcia kolumny, stosowany wielokrotnie w jednym wierszu, w zależności od ilości kolumn, pomiędzy znacznikami otwarcia i zamknięcia wiersza.
Przykładowa tabela, zawierająca 2 wiersze i 2 kolumny:
<table> <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> </table>
Komórki nagłówkowe
Stosowane w tabelach jako nagłówek wybranej kolumny lub wiersza. W odróżnieniu od znacznika komórki, dodatkowo nadają treści styl, np. pogrubienie i wyśrodkowanie. Można je stosować w jednym wierszu wraz z innymi znacznikami <tr>, tworząc kolejne komórki, lub zamiast znacznika <tr> zastępując zwykłe komórki <tr> komórkami nagłówkowymi <th>.
<table> <tr><th>Nagłówek kolumny 1</th><th>Nagłówek kolumny 2</th></tr> <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> </table>
Tytuł tabeli
Tytuł tabeli możemy nadać poprzez wprowadzenie nowego polecenia, występującego zaraz po znaczniku otwarcia tabeli. Użyj polecenia poniżej opisanego polecenia, aby nadać tytuł tabeli. Podaj położenie tytułu względem tabeli, po jej lewej lub prawej stronie, lub na środku nad tabelą.
<caption align="lokalizacja">Tytuł tabeli</caption>
- lokalizacja: left (po lewej stronie tabeli), right (po prawej stronie tabeli) lub center (na środku) a także top (na górze), bottom (na dole)
<table> <caption align="center">Tabela numer 12</caption> <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> </table>
Parametry wierszy i kolumn w tabeli
Zarówno wierszom w tabeli, jak i kolumnom w tabeli 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>
- Otwierasz tabelę i definiujesz jej parametry.
- Otwierasz wiersz i ustalasz kolor tła na czerwony (#cc3300).
- 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.
- Definiujesz kolejną kolumnę. W tym przypadku ustalasz szerokość na 200 pikseli i całą jej zawartość wyrównujesz w pionie do środka.
- Zamykasz wiersz.
- Zamykasz tabelę.
Standardowo, pomiędzy znacznikami wprowadzamy treść wybranej komórki. Może to być tekst, liczba a także np. obraz lub hiperłącze.
Łączenie kolumn tabeli w pionie oraz poziomie
Stosując polecenia colspan (poziomo) i rowspan (pionowo) możemy łączyć kilka komórek w jedną. Stosując to polecenie, podajemy, ile kolejnych komórek ma zostać połączonych, dodając samo polecenie do pierwszej z komórek, która ma być nim objęta.
Za pomocą poleceń colspan oraz rowspan masz 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>
- Otwierasz tabelę.
- Następnie otwierasz wiersz.
- Wynikiem tego kodu będzie połączenie pierwszej kolumny z wiersza pierwszego z tą samą kolumną w wierszu drugim – rowspan.
- W tej linii łączysz trzy sąsiadujące kolumny w jedną – colspan.
- Zamykasz wiersz.
- Otwierasz drugi wiersz.
- Jako że pierwsza 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.
- Tutaj drugą.
- I trzecią ostatnią. W tym punkcie należy policzyć czy ilość kolumn w obu wierszach się zgadza.
- Zamykasz drugi wiersz.
- Kończysz tabelę.
Przykład 2
Jeśli posiadasz w tabeli 3 komórki i chcesz połączyć 2 i 3, polecenie colspan=”2″ należy użyć w 2 komórce oraz usunąć komórkę numer 3.
<table> <tr><td>Kolumna 1, wiersz 1</td><td colspan="2">Kolumna 2 i 3, wiersz 1</td></tr> <tr><td>Kolumna 1, wiersz 2</td><td>Kolumna 2, wiersz 2</td><td>Kolumna 2, wiersz 1</td></tr> <tr><td>Kolumna 1, wiersz 2</td><td>Kolumna 2, wiersz 2</td><td>Kolumna 2, wiersz 1</td></tr> </table>
Jeśli łączymy komórki w jedną całość, należy zwrócić uwagę, aby usunąć nadmiarowe komórki z wiersza lub kolumny. Stosując polecenia łączenia komórek, ubywa w tabeli znaczników <td>. Komórki łączone są według schematu: komórka, w której użyto polecenia + następna komórka w wierszu lub kolumnie.
Położenie zawartości komórki
Wprowadzone treści możemy formatować, zmieniając ich położenie względem komórki, np. na środku. Położenie treści można określić względem prawej i lewej, a także górnej i dolnej krawędzi komórki. Polecenia można także używać w stosunku do znacznika wiersza, w ten sposób nadając położenie treści wszystkim komórkom w wierszu.
W tym celu skorzystaj z polecenia aling (prawo, lewo, środek) oraz valign (góra, dół, środek):
- align=”left” (inne dostępne wartości: right oraz center)
- valign=”top” (inne dostępne wartości: bottom oraz middle)
<table> <caption align="center">Tabela numer 12</caption> <tr><td align="right">Kolumna 1, wiersz 1</td><td>Kolumna 2, wiersz 1</td></tr> <tr align="right"><td>Kolumna 1, wiersz 2</td><td>Kolumna 2, wiersz 2</td></tr> </table>
Przykład zastosowania
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>
- 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.
- Otwierasz definicję wiersza.
- Otwierasz kolumnę w pierwszym wierszu i wpisujesz do niej przykładowy tekst.
- Podobnie jak wyżej, tylko tym razem operujesz na drugiej kolumnie.
- Zamykasz pierwszy wiersz.
- Otwierasz drugi wiersz.
- Podobnie jak w punkcie 3 tworzysz pierwszą kolumnę w drugim wierszu.
- To samo dla drugiej kolumny.
- Zamykasz drugi wiersz.
- Zamykasz tabelę.
