Jednym z ważnych elementów służących do przedstawiania danych wykorzystywanych nie tylko na stronach internetowych ale również w tradycyjnych nośnikach danych są tabele. Tabele są idealnym narzędziem i w chwili obecnej najbardziej czytelnym służącym do przekazywania informacji.
W momencie wprowadzenia tabel do HTML stały się one sposobem na budowanie całych struktur danych. Strony, które powstawały w tamtym okresie powstawały za pomocą tabel w tak znacznym stopniu, że w końcu z nich zrezygnowano. Powodem rezygnacji z tabel jako struktury strony było wprowadzenie kaskadowych arkuszy stylów (CSS), przez co strony ładowały się szybciej. Tabele nie były tak wydajne. Sama idea tabeli mówi, że służy ona do prezentacji danych, a nie służy jako fundament strony.
Struktura tabeli
Struktura tabeli jest zbudowana z trzech podstawowych elementóW
- <table> / </table> - deklaruje początek tabeli / deklaruje koniec tabeli
- <Tr> / </tr> - deklaruje początek wiersza / deklaruje koniec wiersza
- <Td> / </td> - deklaruje początek komórki / deklaruje koniec komórki
Jak widać powyżej stworzenie tabeli nie jest trudną czynnością. Tabelom, wierszom oraz komórkom można nadawać rozmiary za pomocą atrybutu height oraz weight. Rozmiar zależy od nas. Deklarować można również odstępy między komórkami wpisując w definicji tabeli atrybut cellspacing. Poza określeniem odstępów między komórkami można również zadeklarować odstęp wpisanego tekstu w komórkach od marginesu komórki. Można to zrobić za pomocą atrybutu cellpadding.
Tabele niesymetryczne
Do tej chwili dowiedziałeś się jak zbudować tabele symetryczną. W tym podrozdziale dowiesz się jak zbudować tabele niesymetryczne. Tabela niesymetryczne różni się tym od symetrycznej, że można połączyć ze sobą komórki w jeden wiersz lub w jedną kolumnę. W tym celu należy użyć atrybutu rowspan oraz colspan. Rowspan rozciąga w poziomie natomiast colspan w pionie. Oba atrybuty musisz użyć do komórek czyli . Używając tych atrybutów możesz określać liczbowo ile komórek ma być połączonych w pionie lub poziomie. Wszystko zależy od Twojej wyobraźni.
Zagnieżdżanie tabel
Zagnieżdżanie tabel polega na wstawianiu tabeli w tabeli. Samo pojęcie może i nie wygląda przyjemnie, ale nie jest też zbyt trudne do wykonania. W celu zagnieżdżenia tabeli w tabeli musisz w zbudowanej już tabeli w wierszu czyli lub w komórce stworzyć kolejną tabelą definiując ją w taki sam sposób jak tą pierwszą. Poniżej przedstawiam przykładowy kod:
Jak sam widzisz zagnieżdżanie tabeli w tabeli nie jest trudną czynnością. Zaznaczam jednak, że zbyt duże zagnieżdżanie tabel może powodować długie wczytywanie strony. Dlatego stosują tą techniką z umiarem w sytuacjach do tego niezbędnych.
Podsumowanie
Pamiętaj, że informacje prezentowane w tym kursie są informacjami podstawowymi. W trakcie pracy z HTML będziesz zdobywał coraz większe doświadczenie, co umożliwi Ci posługiwanie się i łączenie poszczególnych elementów.
Podsumowując tabele należy stosować do prezentacji danych umieszczanych na stronie, a nie do jej budowy. Do budowy strony internetowej najbardziej odpowiednim narzędziem są kaskadowe arkusze stylów połączone z HTML.