1 / 22

Rola tabel w kodzie HTML

Informatyka. Rola tabel w kodzie HTML. 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.

xander-freeman
Download Presentation

Rola tabel w kodzie HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Informatyka Rola tabel w kodzie HTML

  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.

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

  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

  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

  11. Tabelkowe malowanki

  12. Tabelkowe malowanki

  13. Kolory obramowania komórek 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?

  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.

  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.

More Related