• Artykuł

          

Samouczek: Tabele - dopasowywanie wyglądu - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Witold Lasik

Opublikowano: 2011-10-03

Jeśli na stronie WWW umieścimy dużą ilość skategoryzowanych danych, zaistnieje potrzeba wykorzystania tabel. Towarzyszy temu konieczność etykietowania kolumn przechowujących określony typ danych. Dodatkowo, obszerniejsze tabele, wymagają zaprojektowania nagłówka i stopki, a niekiedy korzystne staje się załączenie dodatkowych podpisów i streszczeń, opisujących zawartość tabeli. Kiedy wyróżnianie zawartości stylami CSS nie wystarcza, warto pomyśleć o zróżnicowaniu obramowania tabeli – zarówno zewnętrznego jak i wewnętrznego. W tym samouczku nauczymy się dzielić tabelę na sekcje – nagłówka, treści i stopki, zapoznamy się ze sposobami modyfikacji obramowania, a także dodamy opcjonalne podpisy i streszczenia do tabel.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • dodawać podpis i streszczenie do tabeli,
  • używać komórek nagłówkowych w tabeli,
  • dzielić tabelę na sekcje logiczne i modyfikować ich wygląd za pomocą CSS,
  • dostosowywać styl obramowania zewnętrznego i wewnętrznego tabeli.

Implementacja

W kolejnych zadaniach dowiesz się, jak szybko dostosować tabelę do treści, którą prezentuje oraz jak podzielić ją na logiczne sekcje.

Pobierz archiwum Samouczek-HTML-CSS.zip, rozpakuj je i przejdź do katalogu Tabele-dopasowywanie-wyglądu. Otwórz w dowolnym edytorze tekstowym plik index.html oraz wywołaj go w przeglądarce Internet Explorer w wersji 9 lub wyższej.

Rys. 1. Efekt końcowy.

Dodawanie podpisu i streszczenia

W pliku index.html znajduje się tabelaryczne zestawienie osób. Dopasowywanie tabeli zaczniemy od dodania podpisu i streszczenia.

  1. Dodaj podpis do tabeli poprzez umieszczenie poniższego kodu HTML pomiędzy znacznikami komentarzy <!-- Podpis --> i <!-- /Podpis -->:
<caption>Klienci sklepu internetowego, którzy założyli konto 06-2011</caption>
Informacja
Pamiętaj, że znacznik <caption> musi zostać umieszczony bezpośrednio po znaczniku <table> oraz, że możesz dodać tylko jeden podpis za pomocą znacznika <caption> do każdej tabeli.
  1. Wstaw streszczenie do tabeli poprzez dodanie atrybutu summary do znacznika caption. Streszczenie powinno mieć następującą formę:
summary="Klienci sklepu internetowego, którzy założyli konto 06-2011"
Informacja
Atrybut summary, odpowiadający za streszczenie, oraz znacznik <caption>, tworzący podpis, różnią się rolą, jaką pełnią w tabeli. Streszczenie jest przeznaczone dla aplikacji innych niż przeglądarki internetowe, ponieważ nie ma wizualnej reprezentacji. Nabiera ono znaczenia przy interpretacji strony przez oprogramowanie, czytające zawartość stron WWW. Znacznik <caption> ma wizualną formę – domyślnie pojawia się wycentrowany ponad tabelą.
  1. Zapisz plik i odśwież go w przeglądarce. Po wykonaniu powyższych kroków nasza tabela powinna mieć następujący wygląd (Rys. 2.).

Rys. 2. Tabela po dodaniu podpisu i streszczenia.

Tworzenie nagłówka tabeli za pomocą znacznika <th>

Wykorzystując tabelę, z dodanym podpisem i streszczeniem, nauczymy się wykorzystywać znacznik HTML <th>, który jest stosowany do określenia komórek nagłówkowych.

  1. Dodaj nagłówek do tabeli poprzez umieszczenie poniższego kodu HTML pomiędzy znacznikami komentarzy <!-- Nagłówek --> i <!-- /Nagłówek -->:
<tr>
    <th>Imię:</th>
    <th>Nazwisko:</th>
    <th>Adres:</th>
    <th>Miasto:</th>
    <th>Kod pocztowy:</th>
    <th>Kraj:</th>
    <th>E-mail:</th>
</tr>
Informacja
Należy pamiętać, że domyślnie zawartość znajdująca się w komórkach nagłówkowych (<th>) jest wycentrowana i pogrubiona. Możemy to łatwo zmienić w CSS.
  1. Wynik naszej pracy powinien wyglądać tak, jak na Rys. 3.

Rys.3. Tabela z nagłówkiem dodanym za pomocą komórek nagłówkowych (<th>).

Dzielenie zawartości tabeli na logiczne sekcje

Używanie sekcji nagłówka (<thead>), zawartości (<tbody>) i stopki (<tfoot>) jest przydatne w momencie dostosowywania wizualnej strony tabeli za pomocą stylów CSS. Po podzieleniu zawartości tabeli na sekcje, możemy używać ich przy budowaniu selektorów CSS.

  1. Utwórz sekcję nagłówka poprzez dodanie znacznika <thead> po znaczniku komentującym <!-- Nagłówek -->. Zamknij sekcję poprzez dodanie znacznika zamykającego </thead> przed znacznikiem komentującym <!-- /Nagłówek -->.
  2. Dodaj sekcję zawartości poprzez umieszczenie znacznika <tbody> po znaczniku komentującym <!-- Zawartość -->. Zamykamy sekcję dołączając znacznik </tbody> przed znacznikiem komentującym <!-- /Zawartość -->.
  3. Sekcja stopki będzie zaczynać się od znacznika komentującego <!-- Stopka -->, po którym dodasz znacznik <tfoot> do znacznika komentującego <!-- /Stopka -->, przed którym umieścisz znacznik zamykający sekcję </tfoot>.
Informacja
Należy pamiętać, aby dzieląc tabelę na sekcje logiczne wykorzystywać wszystkie znaczniki sekcji (<thead>, <tbody> i <tfoot>). Korzystne jest umieszczenie sekcji <thead> i <tfoot> przed sekcją <tbody>. Umożliwia to renderowanie nagłówka i stopki przed zawartością tabeli.
  1. Zapisz zmiany i sprawdź, czy tabela wygląda tak, jak na Rys. 1.

Podsumowanie

W tym samouczku nauczyliśmy się wykorzystywać dodatkowe znaczniki i atrybuty tabel HTML, umożliwiające modyfikowanie ich stylu oraz rozszerzające strukturę informacyjną tabeli. Opisana została rola podpisu i streszczenia, sposób wykorzystania komórek nagłówkowych, zastosowanie sekcji logicznych tabeli oraz atrybuty, dostosowujące styl obramowania zewnętrznego i wewnętrznego. Realizowane zadania zawierały dołączony szablon reguł CSS, umożliwiający praktyczne zapoznanie się ze sposobami odwoływania się do omawianych elementów tabeli.

W kolejnym samouczku nauczymy się dołączać pływające ramki do dokumentów HTML.

Dodatkowo zobacz: