Połącz się z nami

Internet Maker

HTML: zaawansowane możliwości tabel

Od czwartej wersji HTML-a dostępnych jest kilka nowych możliwości, które przedstawimy w tym artykule. Tabele są jednymi z najbardziej zaawansowanych i najbardziej złożonych bloków HTML. Warto jednak poświęcić nieco czasu na poznanie ich budowy, gdyż są elementem często wykorzystywanym na stronach.

Grupowanie kolumn

Kolumny tabel można grupować, co ułatwia łatwiejsze ich formatowanie, np. za pomocą stylów. Do grupowania kolumn wykorzystuje się znacznik {html}

{/html}. Można mu przekazać sześć atrybutów:

  • align – sposób wyrównania danych w kolumnie,
  • char – definiuje znak, według którego dane mają być wyrównywane,
  • charoff – przesunięcie do pierwszego znaku, według którego będzie wyrównywana zawartość komórek,
  • span – liczba kolumn w grupie,
  • valign – wyrównanie zawartości komórki w pionie,
  • width – szerokość kolumny jako liczba pikseli lub wartość procentowa.

Atrybut align może przyjmować wartości:

  • left – wyrównanie zawartości komórki do lewej,
  • right – wyrównanie zawartości komórki do prawej,
  • center – wyrównanie zawartości komórki do środka,
  • justify – wyrównanie zawartości do obu brzegów komórki,
  • char – wyrównanie według znaku podanego w atrybucie char.

Atrybut valign może przyjąć jedną z wartości:

  • top – wyrównanie w pionie do góry komórki,
  • middle – wyrównanie w pionie do środka komórki,
  • bottom – wyrównanie w pionie do dołu komórki,
  • baseline – wyrównanie do linii bazowej (zobacz rysunek 1).

Bardzo ciekawa wydawać się może opcja wyrównania tekstu w stosunku do pewnego znaku. Wyobraźmy sobie sytuację, gdy w tabeli prezentujemy pewne informacje liczbowe. Liczby te to ułamki, w których znakiem rozdzielającym część całkowitą od ułamkowej jest przecinek (,).

Niewątpliwie bardzo ładnie wyglądałaby tabela, jeśli wyrównalibyśmy taką kolumnę według znaku przecinka. Niestety, przeglądarki wciąż nie obsługują tego atrybutu. Ale prawdopodobnie to tylko kwestia czasu, więc warto już dziś wiedzieć, że taka możliwość została przewidziana.

Najważniejszym atrybutem znacznika {html}

{/html} jest span. Atrybut ten określa liczbę kolumn, które mają zostać zgrupowane. Jeśli chcemy utworzyć większą liczbę grup, każdy znacznik {html}

{/html} będzie dotyczyć kolejnych kolumn. Zobaczmy przykład:


...
  
Lp. Nazwa Cena
1 Procesor 980.00
10 Listwa antyprzepięciowa 31.00
Razem 2488,57

Na rys. 2 przedstawiono wynik działania kodu przykładowej tabeli wraz z opisem. Zauważmy, w jaki sposób traktowany jest atrybut span – znacznik z pierwszego znacznika {html}

{/html} odnosi się do pierwszej kolumny (span=\”1\” nakazuje grupowanie tylko jednej kolumny), natomiast span z drugiego znacznika grupuje drugą oraz trzecią kolumnę (span=\”2\” nakazuje zgrupowanie 2 kolumn, jako że pierwsza kolumna już należy do innej grupy, {html}

{/html} grupuje kolejne dwie kolumny).

Równie przydatnym znacznikiem jak {html}

{/html} jest znacznik {html}

{/html}. Używa się go do formatowania grupy kolumn, wówczas gdy nie chce się, aby wszystkie kolumny w grupie były traktowane jednakowo.

Znaczniki {html}

{/html} umieszcza się w bloku {html}

{/html}, jednocześnie nie trzeba stosować atrybutu span w {html}

{/html}. Zamiast tego dla każdej formatowanej kolumny należy użyć znacznika {html}

{/html}. Znacznik ten może przyjąć dokładnie takie same atrybuty jak {html}

{/html}. Oznacza to, że za pomocą tego znacznika możemy jednocześnie formatować większą liczbę kolumn. Jak zobaczymy w późniejszym przykładzie jest to bardzo przydatne, szczególnie w połączeniu z innymi opisanymi w dalszej części znacznikami obsługującymi tabelę.

Przyjrzyjmy się więc rozszerzonej o nowe informacje tabeli z poprzedniego przykładu:


  ...
  
Lp. Część Model Ilość Cena
1 Procesor Intel Pentium D 820 (S775) 2.80 GHz 1 980.00
12 Listwa antyprzepięciowa Ever Standard 3.0m czarna 1 31.00
Razem 4160,57

Na koniec informacji o grupowaniu kolumn kubek ziemnej wody – mimo że sposób ten wydaje się bardzo wygodny i przydatny, przeglądarki wciąż nie w pełni wspierają formatowanie zgrupowanych kolumn.

Wystarczy, że przyjrzymy się rys. 3 – znajduje się tam obok wytłumaczenia działania bloku {html}

{/html} także dobra prezentacja niedociągnięć występujących w przeglądarkach. Tekst w przedostatniej kolumnie powinien być wyświetlony kolorem czerwonym, pochyłą czcionką.

Niestety, Opera i Firefox zupełnie ignorują tę informację, Internet Explorer natomiast wyświetla tekst kolorem czerwony, lecz już nie stosuje dla niego pochyłej czcionki.

Grupowanie wierszy

Poza grupowaniem kolumn, HTML umożliwia także grupowanie wierszy. Wiersze można pogrupować w trzy sekcje: nagłówek, ciało oraz stopkę. Służą do tego odpowiednio bloki {html}

{/html}…{html}

{/html}, {html}

{/html}…{html}

{/html}, {html}

{/html}…{html}

{/html}. Każda tabela może mieć maksymalnie jeden nagłówek oraz jedną stopkę. Nie istnieją jednak podobne ograniczenia odnośnie sekcji ciała tabeli – możemy podzielić swoją tabelę na wiele takich sekcji.

Wewnątrz sekcji nagłówka najczęściej umieszcza się znaczniki {html}

{/html} wraz z {html}

{/html}. Należy pamiętać, że sekcję nagłówka umieszcza się albo zaraz bo znaczniku {html}

{/html}, albo po {html}

{/html}. Sekcja ta musi także zawierać definicję przynajmniej jednego wiersza tabeli (jest to zazwyczaj opis zawartości poszczególnych jej kolumn – patrz niżej).

Sekcja stopki jest bardzo często powtórzeniem sekcji nagłówka. Zwróćmy uwagę, że sekcja stopki umieszczana jest zaraz po sekcji nagłówka, nie zaś przed znacznikiem zamykającym tabelę {html}(

){/html}. Po sekcjach nagłówka oraz stopki umieszcza się sekcje ciała tabeli. Sekcji tych, w przeciwieństwie do dwóch wcześniejszych, może być wiele.

Przyjrzyjmy się przykładowemu kodowi XHTML:


...
   
Lp. Część Model Ilość Cena
Lp. Część Model Ilość Cena
1 Procesor Intel Pentium D 820 (S775) 2.80 GHz 1 980.00
12 Listwa antyprzepięciowa Ever Standard 3.0m czarna 1 31.00
Razem 4160,57

Na rys. 4 możemy zobaczyć jak będzie wyglądać taki kod w przeglądarce internetowej. Od razu rzuca się w oczy to, że stopka mimo iż została zdeklarowana zaraz pod nagłówkiem, wyświetlana jest na samym dole tabeli.

Wszystkie te trzy bloki {html}(

,

, oraz

){/html} mogą przyjmować cztery atrybuty – align, char, charoff, oraz valign. Niestety, tak jak w przypadku znaczników {html}

{/html} oraz {html}

{/html}, tak i tutaj przeglądarki nie potrafią jeszcze poprawnie zinterpretować atrybutów charoff oraz char.

Podział tabeli na trzy bloki – nagłówek, stopkę oraz ciało tabeli – jest szczególnie pomocne przy druku długich tabel. Dzięki wyraźnemu podziałowi na bloki, przeglądarka podczas wydruku dodaje do tabeli nagłówek oraz stopkę na każdej stronie wydruku. Powoduje to znaczną poprawę czytelności tak wydrukowanej strony. Oczywiście można także za pomocą stylów osobno sformatować każdy z tych bloków.

Dodatkowe atrybuty znacznika {html}

{/html}

Gdy umiemy już podzielić tabele na grupy, dowiemy się w jaki sposób można wyróżnić bloki, ustawiając odpowiednio obramowanie pomiędzy komórkami. Służą do tego dwa dodatkowe atrybuty znacznika {html}

{/html} – frame oraz rules.

Atrybut frame służy do określenia wyglądu zewnętrznego obramowania tabeli (wymaga on podania także parametru border określającego szerokość obramowania). Może przyjąć jedną z następujących dziewięciu wartości:

  • void – oznacza, że wszystkie krawędzie tabeli mają pozostać niewidoczne,
  • above – nakazuje wyświetlanie jedynie górnej krawędzi tabeli,
  • below – nakazuje wyświetlanie jedynie dolnej krawędzi tabeli,
  • hsides – nakazuje wyświetlanie zarówno górnej, jak i dolnej krawędzi tabeli,
  • lhs – nakazuje wyświetlanie lewej krawędzi tabeli,
  • rhs – nakazuje wyświetlanie prawej krawędzi tabeli,
  • vsides – nakazuje wyświetlanie zarówno lewej jak i prawej krawędzi tabeli,
  • box – powoduje wszystkich krawędzi tabeli,
  • border – ma takie samo działanie jak wartość box.

Atrybut rules natomiast definiuje obramowanie znajdujące się pomiędzy komórkami tabeli. Przyjmuje jedną z poniższych wartości:

  • none – oznacza, że wszystkie wewnętrzne krawędzie tabeli mają pozostać niewidoczne,
  • groups – określa, że linie mają zostać wyświetlane jedynie pomiędzy grupami {html}
,

,

,

oraz

{/html},
  • rows – nakazuje wyświetlanie linii jedynie pomiędzy wierszami tabeli,
  • cols – nakazuje wyświetlanie linii jedynie pomiędzy komórkami tabeli,
  • all – nakazuje wyświetlanie wszystkich (pomiędzy wszystkimi wierszami oraz komórkami tabeli).
  • Na rysunku 5 znajduje się przykład działania kilku wybranych wartości obu atrybutów. Zapoznanie się z działaniem pozostałych wartości pozostawiamy Czytelnikom.

    EzHTML

    Niestety, edytor ezHTML jest bardzo prostym narzędziem i nie oferuje wsparcia dla najbardziej zaawansowanych możliwości tabel. Nie jest to jednak duże ograniczenie, gdyż z powodzeniem można wszystkie informacje wpisać ręcznie, ucząc się przy okazji zasady ich funkcjonowania.

    Kliknij, by skomentować

    Zostaw komentarz

    Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

    Popularne

    Połącz
    Newsletter

    Zapisz się do naszego newslettera i bądź na bieżąco!