Tworzenie stron internetowych

Prezentacja na temat: "Tworzenie stron internetowych"— Zapis prezentacji:

1 Tworzenie stron internetowych
Tabele w kodzie HTML

2 Podstawowa konstrukcja tabeli w kodzie HTML
<table> <tr><td></td><td></td></tr> </table> 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.

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

4 Położenie tabeli na stronie

5 Położenie danych w tabeli

6 Odstępy między komórkami

7 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

8 Tabelkowe malowanki

9 Tabelkowe malowanki

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

11 Nagłówek wiersza i kolumny

12 Łączenie komórek

13 Tytuł tabeli

14 Zagnieżdżanie tabel

15 Atrybutu thead i tfoot

16 Budowa szkieletu strony
Aplikacje internetowe - HTML - Tabele

17 Budowa szkieletu strony
TŁO TŁO MENU GŁÓWNE MENU BANER - LOGO WYSZUKIWARKA TŁO TŁO MENU TREŚĆ STRONY TŁO TŁO STOPKA Aplikacje internetowe - HTML - Tabele

18 Definicja tabeli <table style="height: 200px; width: 50%;" border= "1" cellspacing= "2" cellpadding= "5" > <tr> <td width="120">kolumna 1</td> <td width="*">kolumna 2</td> </tr> <td width="120" style="text-align: left;">kolumna 2.1</td> <td width="*">kolumna 2.2</td> <td colspan="2">wiersz 2</td> </table> Aplikacje internetowe - HTML - Tabele

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