Rola tabel w kodzie HTML

Prezentacja na temat: "Rola tabel w kodzie HTML"— Zapis prezentacji:

1 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.

2 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.

3 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.

4 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>

5 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.

6 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.

7 Położenie tabeli na stronie

8 Położenie danych w tabeli

9 Odstępy między komórkami

10 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

11 Tabelkowe malowanki

12 Tabelkowe malowanki

13 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.

14 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.

15 Nagłówek wiersza i kolumny

16 Łączenie komórek

17 Tytuł tabeli

18 Zagnieżdżanie tabel

19 Atrybutu thead i tfoot

20 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.

21 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.

22 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.