Tabela obecnie tabeli nie stosuje się do budowy struktury witryny (stosuje się za to pozycjonowanie elementów i warstwy) tabel używa się wyłącznie do prezentacji tych danych, które tego tabel używa się wyłącznie do prezentacji tych danych, które tego faktycznie wymagają
Tabela Ramy tabeli tworzone są za pomocą polecenia: <table> Cała zawartość tabeli musi być umieszczona między tymi dwoma znacznikami. </table> oprócz tego stosuje się znaczniki <tr> </tr> <td> </td> tu są umieszczane: definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli, nagłówki wierszy i kolumn
Wiersze tabeli wprowadzamy za pomocą polecenia: <tr> </tr> Wiersz tabeli tworzy ramy dla komórek z danymi. W ramach <table> </table> można umieścić wiele kolejnych definicji wierszy <tr> </tr>, np. : <table> <tr> </tr> <tr> </tr> <tr> </tr> </table> Teraz jeszcze tabela nie będzie wyświetlana. Należy zdefiniować komórki tabeli.
Komórki tabeli wprowadzamy za pomocą polecenia: <td> </td> Tu można umieszczać tekst i grafikę. Konkretne komórki są umieszczane między znacznikami wybranego wiersza, np. : <table> <tr> <td></td> <td></td> <td> </td> </tr> <tr> <td></td> <td></td> <td> </td> </tr> <tr> <td></td> <td></td> <td> </td> </tr> </table> Ta tabela ma trzy wiersze i trzy kolumny
Obramowanie tabeli Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o atrybut border i podać wartość tego atrybutu <table border= 1 > </table> <table border= 1 > <tr> <td>a1</td><td> a2</td><td>a3</td><td>a4</td> </tr> <tr> <td>b1</td><td> b2</td><td>b3</td><td>b4</td> </tr> <tr> <td>c1</td><td> c2</td><td> c3</td><td>c4</td> </tr> </table> a1 a2 a3 a4 b1 b2 b3 b4 c1 c2 c3 c4
Jeśli nie wpiszemy atrybutu border, to tak jakbyśmy wpisali border= 0 efekt tabela będzie miała niewidoczne obramowania Jeśli chcemy wyróżnić nagłówki kolumn lub/i wierszy to zamiast <td></td> używamy <th></th> zawartość komórki zostanie wtedy przedstawiona za pomocą pogrubionej czcionki i wyśrodkowanego tekstu Bardziej realistyczny przykład tabeli bez obramowania <body> <table> <tr> <th>pierwszy nagłówek</th> <th>drugi nagłówek</th> <th>trzeci nagłówek</th> </tr> <tr> <td>pierwsza komórka</td> <td>druga komórka</td> <td>trzecia komórka</td> </tr> </table> </body>
Wymiarowanie tabeli Można określać rozmiary tabel czyli wysokość i szerokość. Rozmiar może być zdefiniowany w pikselach (jednostki stałe) lub procentach (jednostki względne). W ramach znaczników <table></table> oraz <td></td> używamy atrybutów widthi height, np. <table border= 1 width= 200 height= 200 > <td width= 50% > W języku XHTML do określania wymiarów tabel używamy jednak CSS
Szerokość tabeli Definiujemy przy pomocy atrybutu width. Jest on "silniejszy" od innych atrybutów, które wpływają na szerokość tabeli na ekranie. <table border= 1 width="600"> </table> Szerokość tabeli w pikselach Szerokość tabeli można też wyrazić w procentach obszaru, w którym mieści się tabela np. szerokości strony <table border width="50%"> </table>
Aby odległości miedzy komórkami w pikselach były inne niż domyślne, możemy użyć atrybutu cellspacing. Powoduje to pogrubienie obramowania między nimi. <table border= 1 cellspacing="8"> </table> brak atrybutu cellspacingpowoduje zostawienie domyślnej przerwy między komórkami Odstępy w komórkach Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem (mierzony w pikselach) jest zbyt mały, możemy użyć atrybutu cellpadding <table border cellspacing="5" cellpadding="15"> </table>
Tabele niesymetryczne 1 22 3 1 2 3 w znaczniku <td> używamy atrybutów colspan i rowspan <body> <! pierwsza tabela --> <tableborder= 1 width= 200 height= 200 > <tr> <td>1</td> <td>2</td> </tr> <tr> <td colspan= 2 >3</td> </tr> </table> </body> <body> <! druga tabela --> <tableborder= 1 width= 200 height= 200 > <tr> <td rowspan= 2 >1</td> <td>2</td> </tr> <tr> <td>3</td> </tr> </table> </body>
Zagnieżdżanie tabel <! początek głównej tabeli --> <table border= 1 > <tr> <td> <! początek pierwszej zagnieżdżonej tabeli --> <table border= 1 width= 200 height= 200 > <tr> <td>1</td> <td>2</td> </tr> <tr> <td colspan= 2 >3</td> </tr> </table> <! koniec pierwszej zagnieżdżonej tabeli --> </td> <td> 1 2 1 2 3 3 <! początek drugiej zagnieżdżonej tabeli --> <tableborder= 1 width= 200 height= 200 > <tr> <td rowspan= 2 >1</td> <td>2</td> </tr> <tr> <td>3</td> </tr> </table> <! koniec drugiej zagnieżdżonej tabeli --> </td> <tr> </table> <! koniec głównej tabeli -->
Dodatkowe elementy tabeli <thead></thead> <tbody></tbody> <tfoot></tfood> <body> <table border= 1 > <thead> <tr> <td>nagłówek tabeli</td> </tr> </thead> służą do wyodrębniania nagłówka, ciała i stopki tabeli i są bardzo przydatne przy formatowaniu za pomocą CSS <tbody> <tr> <td>ciało tabeli</td> </tr> </tbody> <tfoot> <tr> <td>stopka tabeli</td> </tr> </tfoot> </table> </body>
Dodatkowe elementy tabeli podpis tabeli <caption></caption> <body> <table border= 1 width= 200 height= 200 > <caption> Tabela 1.1. Każda tabela może zawierać podpis</caption> <tr> <td>1</td> <td>2</td> </tr> <tr> <td> colspan= 2 >3</td> </tr> </table> </body>
Tabela 1. Wzrost produkcji masła i margaryny w latach 1999-2009 (*) 1999 2001 2003 2007 2009 Masło 1150 1240 1380 1420 1550 Margaryna 800 900 980 1150 1320 *) dane w mln zł
1991 1992 1993 1994 1995 Masło 1380 1420 1550 1950 2120 Margaryna 980 1150 1320
1991-1992 1993-1995 Masło 2390 4350 Margaryna 800 900 980 1150 1320
Tworzenie tabel za pomocą edytora ked Na pasku narzędzi są trzy przyciski, wstawiają one znaczniki odpowiednio : <table> </table> <tr> </tr> <td> </td> Aby wstawić kompletną, pustą tabelę klikamy czwarty przycisk na pasku narzędzi, pojawia się nowe okno a w nim możemy ustawić: w kolumny liczbę kolumn w wiersze liczbę wierszy w odstępy rozmiar odstępów miedzy komórkami w ramka grubość ramki tabeli tytuł tabeli Klikamy Wstaw tabelę i odpowiedni kod zostaje wpisany w miejscu gdzie stał kursor
Tworzenie tabel za pomocą edytora ked generowanie tabeli na podstawie arkusza MS Excel eksportujemy arkusz do formatu CVS i importujemy go do edytora ked przycisk definiuj/importuj tabelę. Klikam i pojawia się okienko definiowanie i import tabeli. wybieram Dane źródłowe wybieram Wczytaj dane
Formularze ramy formularza <form></form> atrybuty: action określa rodzaj akcji, która ma być wykonana po naciśnięciu przycisku OK. wartość action to adres e-mail method określa metodę, która zostanie użyta do wykonania formularza wartości to post służy do zgłaszania długich zadań do serwera i get zgłasza krótkie żądania <form action= mailto:email@domena.pl method= post > zawartość formularza </form> formularz wyśle na adres e-mail zawartość wszystkich pól, które w nim występują
Formularz zawiera różnego typu pola, które są wypełniane informacjami. Pola te są podzielone na kilka podstawowych grup: input select textarea służy do tworzenia pól, gdzie czytelnik strony może wpisać informację lub wybrać jakąś opcję służy do tworzenia rozwijalnych list z opcjami, spośród których czytelnik wybiera interesujące go pozycje jest poleceniem do tworzenia większego pola na dodatkowy komentarz czytelnika
pole input <input type= name= value= size= maxlength= /> Atrybuty: type określa rodzaj pola formularza name określa nazwę danego pola. Wartość tego atrybutu powinna być różna dla różnych pól w obrębie formularza. Wyjątkiem jest pole radio tu wszystkie pola wchodzące w skład jednej grupy muszą mieć identyczną nazwę. Na stronie może być kilka grup pól i każda grupa powinna mieć inną nazwę value określa początkową wartość pola (umieszcza w nim wstępnie zdefiniowane dane). Atrybutu tego można użyć do opisania pól formularz, bądź do zadeklarowania jakiejś domyślnej wartości dla danego pola size określa liczbę znaków mieszczących się w widocznej części pola tekstowego maxlenght ogranicza liczbę znaków jakie można wpisać do pola tekstowego
atrybut type type = text wstawia zwykle pole tekstowe type= checkbox wstawia małe okienka, które możemy dowolnie zaznaczać. Możemy zaznaczyć więcej niż jedną odpowiedź. type= radio możemy tu wybrać tylko jedna odpowiedź type= password wprowadzamy hasło ale wyświetlane będą gwiazdki type= file dołącza dowolny plik tekstowy do formularza type= submit wstawia przycisk do formularza, odpowiada za wykonanie action zdefiniowanej dla formularza type= reset wstawia przycisk, który czyści wszystkie pola formularza type= hidden wstawia zwykle pole tekstowe niewidoczne na stronie type= button określa przycisk dowolnego przeznaczenia
pole tekstowe input type= text Przykład: <input type="text"name="nazwisko" value="kowalski" size="30" maxlength="40 /> lub łącznie z informacją wprowadzającą: <p>podaj swoje nazwisko: <input type="text"name="nazwisko" value="kowalski" size="30" maxlength="40 /></p> efekt: Podaj swoje nazwisko: Kowalski
pole wyboru input type= checkbox umożliwia dokonanie wyboru kilku możliwości jednocześnie Wprowadza pole w postaci małego kwadratu. Kliknięcie w nim powoduje zaznaczenie pola, ponowne kliknięcie usuwa zaznaczenie. Jeśli zdefiniujemy kilka pól, czytelnik strony będzie mógł zaznaczyć parę z nich lub wszystkie, zależnie od treści Przykład: Czy znasz któryś z języków kongresowych? <p> <input type="checkbox" name="jezyk" value="angielski /> angielski</p> <p><input type="checkbox" name="jezyk" value="francuski" /> francuski</p> dla czytelnika strony jest widoczne
Efekt: Czy znasz któryś z języków kongresowych? angielski francuski niemiecki hiszpański rosyjski chiński arabski
pole opcji (przełącznika) input type="radio" jest polem, w którym czytelnik strony wybiera jedną z dostępnych możliwości Kliknięcie na jakiejś wartości powoduje jej zaznaczenie, ale zarazem usuwa zaznaczenie innej. Przykład: Nazwą pola namejest "plec", valueprzybiera dwie możliwe wartości. Jeśli podamy przy jednej z możliwosci checked="checked", pole to będzie domyślnie zaznaczone.
<p> <input type="radio" name="plec" value="kobieta" checked="checked" /> Kobieta</p> <p> <input type="radio" name="plec" value="mezczyzna" /> Mężczyzna</p> Efekt: Podaj swoją płeć Kobieta Mężczyzna
pole hasła input type= password Pole, w którym można wprowadzić hasło, wprowadzane znaki nie są widoczne Przykład: <p>podaj hasło: <input type="password" name="haslo" value="" size="20" maxlength="20" /></p> Efekt: Podaj hasło: pusty cudzysłów oznacza brak początkowej wartości
type= file pozwala dołączyć do formularza dowolny plik type= submit przycisk, który uruchamia wykonanie akcji zdefiniowanej parametrem action <input type="submit" value="wyślij do nas informacje" /> Efekt: Wyślij do nas informacje
type= reset przycisk, którego kliknięcie powoduje usunięcie zawartości wszystkich wypełnionych pól formularza <input type="reset" value="usuń wszystkie informacje" /> Efekt: Usuń wszystkie informacje
type= hidden type= button pole tekstowe niewidoczne na stronie przycisk dowolnego przeznaczenia podobne do klasycznego input, ale pozwala wprowadzić do "klikalnego" przycisku znacznie więcej elementów.
pole select Lista wyboru selectsłuży do tworzenia rozwijanych menu, zawierających kilka pozycji. Czytelnik strony może wybrać jedną z nich lub kilka. Składnia jest następująca: <select name="nazwa_listy" > <option> pierwsza pozycja</option> <option> druga pozycja</option> <option> trzecia pozycja</option>... </select> znacznik <option></option> definiuje jedną pozycję z listy
Aby dać możliwość wyboru kilku pozycji z listy, należy dodać atrybut multiple <select name="nazwa_listy" multiple= multiple size= 5 > <option> pierwsza pozycja</option> <option> druga pozycja</option> <option> trzecia pozycja</option>... </select> Inny atrybut to size określa ile pozycji z listy ma być widocznych na ekranie. Jeśli aktualna liczba pozycji na liście jest niższa niż wartość tego atrybutu, to z boku pola nie będzie widoczny pasek przewijania
Przykład: <p><strong>wybierz produkt:</strong></p> <select name="owoce" size="3 multiple="multiple"> <option> Truskawki</option> <option> Maliny</option> <option> Poziomki</option> <option> Wiśnie</option> <option> Śliwki</option> </select> Truskawki Maliny Poziomki
pole textarea Obszar tekstowy to miejsce, w którym czytelnik strony wysyłający formularz może wpisać swoje dodatkowe uwagi (o objętości do 1024 znaków). Obszar jest wprowadzany za pomocą polecenia: <textarea name="nazwa" rows="x"cols="y">napisz coś do mnie </textarea> Parametr rowswyznacza liczbę wierszy pola, a parametr cols-liczbę kolumn.
Przykład: <p><strong>wpisz swoje uwagi:</strong></p> <p> <textarea name="uwagi" rows="8" cols="50" > tutaj jest miejsce na twoje uwagi </textarea></p> Wpisz swoje uwagi: Efekt: tutaj jest miejsce na twoje uwagi
Wypełnij poniższe pola Podaj swoją płeć Kobieta Mężczyzna Uwagi od czytelników W y ś l i j s w o j e u w a g i U s uń w s zys tkie info rm ac je
Przesyłanie treści formularza w formularzu zamieściliśmy następujące informacje: Imię: Janusz Płeć: Mężczyzna Wiek: Ponad 18 lat Treść: Zrobiliśmy niezłą stronę na podany adres e-mail przyszło: imie=janusz&plec=m%ea%bfczyzna&wiek=ponad+18+lat&tresc=zrobili&9c+nie z%b3%bp+stron%ea+ Zaleca się stosowanie specjalnych skryptów, np. FormMail, które odpowiednio przetworzą wynik działania formularza i otrzymana poczta będzie czytelna.
propozycja: napiszcie proszę formularz na swój temat używając wszystkich dostępnych pól i wyślijcie go używając specjalnego skryptu FormMail dostępnego na stronie http://www.icenter.pl/moduly/formmail.php Aby formularz wykorzystujący ten skrypt zadziałał należy zamieścić w nim następujące linie: <form action= http://www.roy.icenter.pl/form/ method= post /> <input type= hidden name= to value= adres@email.pl /> tu trzeba wpisać adres e-mail, na który formularz zostanie wysłany <input type= hidden name= subject value= Temat wiadomości /> tu w polu value pojawia się temat wysyłanego formularza
Podobnie można łączyć komórki w kolumnach, stosując: dla nagłówków atrybut th colspan="y" a dla danych td colspan="z" 1991-1992 1993-1995 Masło 2390 4350 Margaryna 800 900 980 1150 1320
Nagłówek kolumny i wiersza <table border cellpadding="10" width="500"> <caption>wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD)</caption> <tr> <td></td><th>1991</th> <th>1992</th> <th>1993</th> <th>1994</th> <th>1995</th> </tr> <tr style="text-align: center; "><th>masło</th> <td>1150</td><td>1240</td><td>1380</td><td>1420 </td><td>1550</td></tr> <tr style="text-align: center; "><th>margaryna</th> <td>800</td><td>900</td><td>980</td><td>1150</td ><td>1320</td></tr> </table>
Łączenie komórek Aby komórka w danym wierszu rozciągała się na x wierszy, należy użyć w jej definicji atrybutu <td rowspan="x"> <tr style="text-align: center"> <th>masło</th><td rowspan="2">1950</td> <td rowspan="2">2120</td> <td>1380</td><td>1420</td><td>1550</td> </tr> 1991 1992 1993 1994 1995 Masło 1380 1420 1550 1950 2120 Margaryna 980 1150 1320
Pierwszy wiersz składa się z samych nagłówków kolumn (kolejne lata). Kody nagłówków wierszy (Masło i Margaryna) wstawiamy zaraz za definicją wiersza, a przed pierwszą definicją komórki z danymi. A oto wynik: Wzrost produkcji masła i margaryny w latach 1991-1995 (w mln USD) 1991 1992 1993 1994 1995 Masło 1150 1240 1380 1420 1550 Margaryna 800 900 980 1150 1320
<tr><td> </td> <th colspan="2">1991-1992</th> <th colspan="3">1993-1995</th> </tr> <tr style="text-align: center"><th>masło</th> <td colspan="2">2390</td><td colspan="3">4350</td></tr> <tr style="textalign:enter"><th>margaryna</th> <td>800</td><td>900</td><td>980</td><td>1150</td> <td>1320</td></tr>
Treść przycisku Przycisk w jednej linii z tekstem Kliknij tutaj Wyślij do mnie ten formularz