Connect with us

Cześć, czego szukasz?

Internet Maker

HTML – tabele

Często stajemy przed koniecznością umieszczenia na stronie danych, dla których naturalne wydaje się użycie tabel. Mogą to być wszelkiego rodzaju zestawienia oraz innego rodzaju dane tabelaryczne.

Tabele były wykorzystywane także w celu budowy layoutu strony – w odpowiednich kolumnach umieszczano nagłówek strony (najczęściej obrazek znajdujący się na górze), menu (pod nagłówkiem i/lub z lewej strony), właściwą treść strony.

Nierzadko prowadziło to do sytuacji, gdy zagnieżdżano wiele tabel jedna w drugiej. Wpływało to niekorzystnie na czytelność i wielkość kodu HTML, który musiał być pobrany przez przeglądarkę, co utrudniało zarządzanie stroną (wprowadzanie zmian, aktualizacji etc.).

Obecnie do tych celów używa się bloków div oraz stylów. Użycie tabeli do tworzenia layoutu jest niepoprawne i należy tego unikać.

W HTML-u tabelę zamyka się w znaczniku {html}

{/html} (pomiędzy {html}

{/html} a {html}

{/html}). Jednak inaczej niż w przypadku konstrukcji opisanych do tej pory, gdzie zapis każdej z nich ograniczał się jedynie do objęcia modyfikowanego tekstu znacznikiem, tabela składa się z większej liczby znaczników.

Dlaczego? Ponieważ opis wyglądu tabeli za pomocą wyłącznie znacznika {html}

{/html} byłby niemożliwy, a w najlepszym razie bardzo niewygodny. Dlatego właśnie znacznik ten określa jedynie ramy tabeli, dokładniejszy jej opis pozostawiając innym powiązanym znacznikom.

Zanim przejdziemy do opisu pozostałych znaczników, zapoznamy się z budową tabeli. Tabela składa się z wierszy, komórek, wpisanych w nią danych oraz opcjonalnie z podpisu i nagłówków. Wszystkie te elementy zostaną opisane w dalszej części artykułu.

Wiersze oraz ich komórki

Najprostsza tabela składa się z wierszy oraz komórek (rys. 1). Do jej podziału na wiersze stosuje się znacznik {html}

{/html}, wewnątrz którego można umieścić dowolną liczbę komórek – znacznik {html}

{/html}. Najczęściej wszystkie wiersze tabeli będą miećtaką samą liczbę komórek. Przykład:

Internet Maker 19,00 zł www.internetmaker.pl
Magazyn Internet 15,90 zł www.mi.com.pl
Młody Technik 7,50 zł www.mlodytechnik.pl
Elektornik 9,50 zł www.elektronik.com.pl

Powyżej zdefiniowano tabelę złożoną z trzech kolumn i czterech wierszy. Kolumny w tabeli będą zawierały odpowiednio: tytuł magazynu wydawanego przez AVT, jego cenę oraz adres strony internetowej magazynu.

Co zrobić, aby w którymś z wierszy, druga komórka rozciągała się na szerokość dwóch lub więcej kolumn w stosunku do wierszy pozostałych. Do tego służy parametr colspn. Można także rozciągnąć komórkę na wysokość kilku wierszy – służy do tego parametr rowspan. Aby lepiej zrozumieć zasady działania tych parametrów, przyjrzymy się także rys. 2, gdzie został zaznaczony obszar i sposób działania obu tych parametrów:

Imię Nazwisko Wiek Płeć
Mężczyzna Kobieta
Jan Kowalski 25 + -
Janina Kowalska 23 - +

Najbardziej interesujący jest tutaj kod opisujący pierwszy oraz drugi wiersz tabeli. Tworzy on nagłówek tabeli.

Za sprawą sposobu wybranego do określenia płci Kowalskich, nagłówek zajmuje dwa wiersze (stąd przy trzech pierwszy komórkach parametr rowspan=\”2\”), natomiast ostatnia komórka w pierwszym wierszu rozciąga się na dwie kolumny (stąd colspan=\”2\”).

Dlatego też opis kolejnego wiersza tabeli zawiera definicje jedynie dwóch komórek – są to komórki, które mają się znaleźć pod komórką Płeć (zwróćmy uwagę na to, że jedynie przy niej nie ma parametru określającego, że rozciąga się ona na dwa wiersze). Przyjrzyjmy się dokładnie rys. 2.

Podpisy

W poprzednim przykładzie stworzyliśmy nagłówek tabeli z podpisami poszczególnych kolumn, umieszczając je wraz z innymi informacjami w znacznikach {html}

{/html}. Niestety, spowodowało to wyświetlenie nagłówków taką samą czcionką i dokładnie w taki sam sposób jak pozostałych komórek.

Powoduje to zlewanie się podpisów z resztą treści zawartej w tabeli, co niekorzystnie wpływa na jej czytelność. Można co prawda wykorzystać style do zmiany wyglądu tekstu w nagłówkach, jednak twórcy języka HTML przewidzieli konieczność stworzenia nagłówków w tabelach i wprowadzili odpowiednie znaczniki opisujące komórki nagłówków – {html}

{/html}. Zobaczmy, jak wygląda kod z poprzedniego przykładu po zmianie powodującej poprawne wyświetlanie nagłówków:

Jak widać, zmiany są niewielkie. Wystarczyło w nagłówku wymienić znacznik {html}

Imie Nazwisko Wiek Płeć
Mężczyzna Kobieta
Jan Kowalski 25 + -
Janina Kowalska 23 - +
{/html} na {html}

{/html}. Tak jak w przypadku znacznika {html}{/html}, także i w {html}

{/html} można korzystać z parametrów colspan oraz rowspan.

W rzeczywistości znaczniki te są niemal identyczne, różnią się jedynie przeznaczeniem – {html}

{/html} opisuje elementy normalnych komórek, {html}

{/html} elementy komórek nagłówka. Na rys. 3 można zobaczyć jak zmiana znacznika wpłynęła na wygląd tabeli. Warto też zauważyć, że komórki nagłówka mogą być używane także w innych miejscach niż góra tabeli.

Jednak zawsze należy dobrze przemyśleć, czy w umieszczanie nagłówka w danym miejscu ma sens.

Co jeszcze daje użycie znaczników {html}

{/html} w nagłówkach? Teraz łatwiej jest zastosować style w celu zmiany wyglądu nagłówków – wystarczy zdefiniować styl opisujący znacznik {html}

{/html}.

Przydatny może się także okazać znacznik {html}

{/html}, który pozwala nadać tytuł całej tabeli. Także jego wygląd można modyfikować za pomocą stylów. Znacznik ten umieszcza się zaraz po znaczniku {html}

{/html}:

Style tabeli

Wiemy już jak stworzyć tabele. Pozostało jeszcze nadać jej wygląd, dostosowany do konkretnych wymagań. Tu z pomocą przychodzą style.

Wiele przeglądarek (na przykład Opera, Microsoft Internet Explorer i Firefox) standardowo wyświetla tabele bez widocznego zaznaczenia obramowań. Powoduje to najczęściej znaczne zmniejszenie czytelności takiej tabeli – dane z poszczególnych komórek mogą się ze sobą zlewać.

Na szczęście możemy skorzystać w znacznikach {html}

Informacje o Kowalskich
Imie Nazwisko Wiek Płeć
Mężczyzna Kobieta
Jan Kowalski 25 + -
Janina Kowalska 23 - +
{/html} i/lub {html}

{/html} ze stylów z serii border.

Oto kilka najważniejszych stylów wpływających na obramowanie:

border-style – odpowiada za zmianę sposobu obramowania tabeli; najważniejsze dopuszczalne parametry to:

  • dotted – obramowanie punktowe,
  • dashed – przerywana linia,
  • solid – linia ciągła,
  • double – podwójna linia,
  • border-width – określa szerokość obramowania, np. 1px,
  • border-color – określa użyty do stworzenia obramowania,

border-collapse – powoduje on ustawienie tak zwanego stylu obramowań; do wyboru są:

  • collapse – sąsiadujące komórki mają wspólne obramowania na swych sąsiadujących ścianach,
  • separate – każda z komórek ma własne obramowanie.

Rysunek 4 przedstawia działanie tych stylów.

W artykule przedstawiono jedynie podstawowe style. O pozostałych można dowiedzieć się w źródłach podanych w poprzednich artykułach z tej serii.
Zachęcam także do eksperymentów z innymi stylami w odniesieniu do tabel.

EzHTML a tabele

Edytor EzHTML oferuje wsparcie także dla szybkiego generowania tabel w HTML-u, m.in. szereg opcji możliwych do wybrania z paska narzędzi. Dzięki nim szybko można wygenerować tabelę o wielkości maksymalnej 5 x 7.

Poza tym za pomocą przycisków można wygenerować szablon tabeli oraz uzupełniać go o nowe komórki i wiersze. Sposób generowania tabel został dokładnie przedstawiony na rysunku 5 i 6.

Może cię też zainteresować