Wprowadzenie do Internetu zajęcia 2

Transkrypt

1 Wprwadzenie d Internetu zajęcia 2 Zakres tematyczny zajęć Tabele Tabele prezentacja danych. Tabele mają szerkie zastswanie na strnach WWW i umżliwiają zaawanswane frmatwanie elementów na strnie. Definicja tabeli umieszczna jest pmiędzy następującymi znacznikami: <table> Struktura tabeli składa się z wierszy raz klumn, które muszą zstać zdefiniwane za pmcą następujących znaczników: Wiersz tabeli <TR> </TR> Za pmcą wierszy twrzymy ramy dla pszczególnych kmórek z danymi. Dla każdej pprawnie zdefiniwanej tabeli mżemy zdefiniwać wiele wierszy. np. <table>... Kmórka w wierszu <td></td> Kmórki zawierają dane i mżna w nich umieszczać tekst, grafikę, hiperłącza itp UWAGA! Kmórki zamieszczane są w wierszu tabeli i muszą znajdwać się pmiędzy znacznikami mgr inż. Marcin Nwak Marcin_Nwak@wit.edu.pl 1/11

2 Widk w przeglądarce Nagłówek wiersza i klumny Nagłówki w tabeli definiujemy za pmcą znacznika <th></th> - standardw wartści w nagłówkach wyświetlane są czcinką pgrubiną raz są wyśrdkwane. Przykład <table brder="1" cellpadding="10" width="50%"> <th>n1</th> <th>n2</th> <th>n3</th> <td>a1</td> <td>a2</td> <td>a3</td> <td>b1</td> <td>b2</td> <td>b3</td> <td>c1</td> <td>c2</td> <td>c3</td> mgr inż. Marcin Nwak Marcin_Nwak@wit.edu.pl 2/11

3 Obramwanie tabeli atrybut brder Aby zdefiniwana tabela zawierała bramwanie należy w definicji tabeli zdefiniwać atrybut brder, któreg wartść liczbwa wskazuje na szerkść bramwania. Przykład <table brder="5"> <td>a1</td> <td>a2</td> <td>a3</td> <td>b1</td> <td>b2</td> <td>b3</td> <td>c1</td> <td>c2</td> <td>c3</td> Marginesy kmórek atrybut cellpadding W przypadku, gdy uznamy, iż dane znajdujące się w kmórkach znajdują się za blisk krawędzi kmórki mżemy zwiększyć dstęp d krawędzi twrząc tzw. margines. Marginesy definiuję się za pmcą atrybutu cellpadding umieszczneg w tagu <table>, któreg wartść liczbwa kreśla dstęp d krawędzi kmórki. UWAGA! Marginesy definiujemy dla całej tabeli. Margines dla knkretnej kmórki (pjedynczej) mżemy uzyskać przy pmcy CSS. Przykład <table brder="1" cellpadding="10"> <td>a1</td> <td>a2</td> <td>a3</td> <td>b1</td> <td>b2</td> <td>b3</td> <td>c1</td> <td>c2</td> <td>c3</td> mgr inż. Marcin Nwak Marcin_Nwak@wit.edu.pl 3/11

4 Odległść między kmórkami (bramwanie kmórek) atrybut cellspacing Standardwa dległść pmiędzy kmórkami w tabeli wynsi 2. Zmiana wartści atrybutu cellspacing, który umieszczamy wewnątrz tagu <table>, spwduję zmianę dległści pmiędzy zdefiniwanymi kmórkami (wartść 0 brak bramwania) Przykład <table brder="1" cellpadding="10" cellspacing="20"> <td>a1</td> <td>a2</td> <td>a3</td> <td>b1</td> <td>b2</td> <td>b3</td> <td>c1</td> <td>c2</td> <td>c3</td> mgr inż. Marcin Nwak Marcin_Nwak@wit.edu.pl 4/11

5 Inne przydatne atrybuty align (left, right, center) wyrównanie tabeli w stsunku d marginesów strny raz blewająceg tekstu. np. <table align= center > <td>wartsc1</td> <td>wartsc2</td> Wyrównanie wartści w danej kmórce np. <table width= 100% brder="1"> <td align= right >wartsc1</td> <td align= center >wartsc2</td> valign (tp, middle, bttm) pinwe wyrównanie wartści w danej kmórce <table width="100%" height="50%" brder="1"> <td align="right" valign="tp">wartsc1</td> <td align="center" valign="bttm">wartsc2</td> mgr inż. Marcin Nwak Marcin_Nwak@wit.edu.pl 5/11

6 width (wartści liczbwe lub prcentwe) szerkść tabeli lub kmórki height (wartści liczbwe lub prcentwe) wyskść tabeli lub kmórki bgclr (pdajemy kd klru lub nazwę) klr tła tabeli lub kmórki tł tabeli <table brder="1" bgclr="red"> <td align="right" valign="tp">wartsc1</td> <td align="center" valign="bttm">wartsc2</td> mgr inż. Marcin Nwak /11

7 tł kmórki <table brder="1" bgclr="red"> <td align="right" valign="tp" bgclr="#00cc00">wartsc1</td> <td align="center" valign="bttm">wartsc2</td> Klry - Black, Olive, Teal, Red, Blue, Marn, Navy, Gray, Lime, Fuchsia, White (white), Green, Purple, Silver, Yellw, Aqua nwrap (nie przypisujemy żadnej wartści) wartść kmórki bez zawijania wierszy Ddatkwe infrmacje Nagłwek, stpka i ciał tabeli nagłówka tabeli <thead></thead> ciał tabeli <tbdy></tbdy> stpki tabeli <tft></tft> Przykład <table brder = "1"> <thead> <td>nagłwek - THEAD</td> </thead> <tft> <td>stpka - TFOOT</td> </tft> <tbdy> <td> ciał TBODY</td> </tbdy> mgr inż. Marcin Nwak Marcin_Nwak@wit.edu.pl 7/11

8 Tabele jak szablny strn Scalanie kmórek w pzimie: clspan="n" (np. <td clspan="2"> ) A C B D <td>a</td> <td>b</td> AB C D <td clspan= 2 >AB</td> ćwiczenie: A B C G DE HI F w pinie rwspan="n" (np. <td rwspan="2"> ) A C B D <td>a</td> <td>b</td> <td>c</td> <td>d</td> AC B D <td rwspan= 2 >AC</td> <td>b</td> mgr inż. Marcin Nwak Marcin_Nwak@wit.edu.pl 8/11

9 <td>d</td> Ćwiczenie: DG AB E HI CF Pdstawwa struktura strny strna główna (main.htm) Baner Menu - m1 - m2 Treść stpka mgr inż. Marcin Nwak Marcin_Nwak@wit.edu.pl 9/11

10 Prszę stwrzyć (np. w Paincie) prsty baner np. Księgarnia internetwa (600x110) i umieścić g w pierwszej kmórce raz pdpiąć linkiem pd strnę główną. Prszę zbudwać lewe menu: Strna główna pdpięte d main.htm Oferta Zamówienie Infrmacje firmie Kntakt <a href= main.htm ><img src= baner.jpg alt= Baner ></a> Menu Treść - <a href= main.htm > Strna główna</a> - Oferta - Zamówienie - Infrmacje firmie - Kntakt Strnę wyknał <a href= Malt:mnwak@asp.net.pl >adres</a> mgr inż. Marcin Nwak Marcin_Nwak@wit.edu.pl 10/11

11 Zagnieżdżanie tabel Baner Menu Treść Strna główna Oferta Zamówienie Infrmacje firmie kntakt Strnę wyknał <a href= Malt:asdf >aa</a> ćwiczenie: Księgarnia Internetwa lub Kmis samchdwy strna główna (gólne infrmacje) ferta (tabela z fertą książek/samchdów) szczegóły (szczegółwe infrmacje nt. pzycji ferty firmie (infrmacje firmie, adres, mapa djazdu) kntakt (pdpięte pd a) frmularz zamówienia (p zapznaniu z frmularzami) mgr inż. Marcin Nwak Marcin_Nwak@wit.edu.pl 11/11