Rola tabel w kodzie HTML Informatyka Rola tabel w kodzie HTML Cele lekcji: Wiadomości: Uczeń potrafi: omówić możliwości wykorzystania tabel do prezentacji danych oraz do zarządzania zawartością strony; wyjaśnić konstrukcję znaczników składających się na tabelę; wymienić znaczniki pozwalające tworzyć proste tabele; wymienić znaczniki pozwalające formatować tabele. Umiejętności: utworzyć tabelę na stronie za pomocą znaczników HTML; modyfikować atrybuty tabel (obramowanie, szerokość, kolor obramowania); modyfikować atrybuty komórek; zagnieżdżać tabele za pomocą kodu HTML; dodawać do tabel komórki nagłówkowe, nagłówki stopki oraz tytuły; rozmieszczać obiekty na stronie HTML za pomocą odpowiednio spreparowanych tabel.

Cele lekcji Podczas tej lekcji nauczysz się: tworzyć tabele w kodzie HTML; określać wielkość tabeli oraz kolory poszczególnych elementów tabeli; łączyć komórki w tabeli; zagnieżdżać tabele; rozmieszczać obiekty na stronie za pomocą tabel.

Przegląd zagadnień Podstawowa konstrukcja tabeli w kodzie HTML. Rozmiar i położenie tabeli na stronie. Tabelkowe malowanki. Operacje na komórkach oraz zagnieżdżanie tabel. Tabele a rozmieszczanie elementów na stronie. Przedstawienie zagadnień, które zostaną omówione na lekcji, zaciekawienie uczniów jej treścią. Zapytanie uczniów do czego można wykorzystać tabele na stronach WWW.

Podstawowa konstrukcja tabeli w kodzie HTML Tabele służą do prezentacji danych, często wykorzystywane są w tym celu w edytorach tekstowych. W przypadku stron WWW tabele pełnią identyczną rolę. Czasami tabele służą też do rozmieszczania elementów na stronie (wtedy ich krawędzie są specjalnie ukrywane). Zanim zaczniemy używać tabel w taki sposób, poznamy podstawowe znaczniki pozwalające na utworzenie tabeli w kodzie HTML. <table> <tr><td></td><td></td></tr> </table>

Rozmiar i położenie tabeli na stronie Szerokość i wysokość tabeli; Położenie tabeli na stronie; Położenie danych w tabeli; Odstępy między komórkami.

Szerokość i wysokość tabeli Przyjmuje się, że w trzykolumnowej tabeli o określonej szerokości kolumny automatycznie uzyskają identyczną wielkość. W rzeczywistość dwie pierwsze kolumny będą miały szerokość równą 33%, a ostatnia 34% szerokości. Nie warto na siłę podawać we wszystkich trzech kolumnach wartości 33% – może się to skończyć uzyskaniem dziwnych efektów w różnych przeglądarkach.

Położenie tabeli na stronie

Położenie danych w tabeli

Odstępy między komórkami

Atrybuty tabeli i komórki ułatwiające rozmieszczanie elementów width szerokość tabeli lub komórki heigt wysokość tabeli lub komórki align położenie w poziomie tabeli lub danych w komórce valign położenie w pionie danych w komórce. cellpadding odstęp od krawędzi komórki cellspacing odstęp między komórkami

Tabelkowe malowanki

Tabelkowe malowanki

Kolory obramowania komórek Warto wspomnieć, że większe możliwości formatowania kryją w sobie style kaskadowe. Przedstawiony atrybut działa także dla znacznika tabeli ale jest słabiej widoczny. Kolor jasnej i ciemnej strony obramowania można określić dowolnie. Oznacza to, ze nazwa „jasne część obramowania” jest umowna, a obramowanie w rzeczywistości może być ciemne.

Operacje na komórkach oraz zagnieżdżanie tabel Nagłówek wiersza i kolumny. Łączenie komórek. Tytuł tabeli. Zagnieżdżanie tabel. Atrybutu thead i tfoot.

Nagłówek wiersza i kolumny

Łączenie komórek

Tytuł tabeli

Zagnieżdżanie tabel

Atrybutu thead i tfoot

Tabele a rozmieszczanie elementów na stronie Przypadek 1: Utworzono stronę na której zamieszczono obok siebie trzy zdjęcia. Przypadek 2: Utworzono stronę, dodano tabelę z trzema kolumnami, do poszczególnych komórek wstawiono zdjęcia. Użytkownik testuje oba przykłady w przeglądarce. Czego należy się spodziewać podczas zmniejszania rozmiaru okna przeglądarki? W pierwszym przypadku układ strony zostanie zburzony, w drugim – w oknie przeglądarki wyświetlone zostaną paski przewijania.

Tabele a rozmieszczanie elementów na stronie Ile wierszy i kolumn powinna mieć tabela, aby można było swobodnie określać rozmieszczenie elementów przedstawionych na rysunku. 5x5 – pozwala dodatkowo określać położenie w poziomie i pionie kierunków świata. 3x3 – nie zapewnia takiej swobody.

Podsumowanie Podstawowa konstrukcja tabeli w kodzie HTML. Rozmiar i położenie tabeli na stronie. Tabelkowe malowanki. Operacje na komórkach oraz zagnieżdżanie tabel. Tabele a rozmieszczanie elementów na stronie.