(Microsoft PowerPoint - XHTML_3_tabele

Transkrypt

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
faktycznie wymagają
Tabela
Ramy tabeli tworzone są za pomocą polecenia:
Cała zawartość tabeli musi być
umieszczona między tymi dwoma
znacznikami.
<table>
</table>
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
oprócz tego stosuje się znaczniki
<tr> </tr>
<td> </td>
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>
</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 width i 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 cellspacing powoduje 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
1
2
3
3
w znaczniku <td> używamy atrybutów colspan i rowspan
<body>
<!–pierwsza tabela -->
<table border=”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 -->
height=”200”>
<tr>
<td rowspan=”2”>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
</body>
Zagnieżdżanie tabel
1
3
<!– początek głównej tabeli -->
<tr>
<td>
<!– początek pierwszej zagnieżdżonej tabeli -->
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td colspan=”2”>3</td>
</tr>
</table>
<!– koniec pierwszej zagnieżdżonej tabeli -->
</td>
<td>
2
1
2
3
<!–początek drugiej zagnieżdżonej tabeli -->
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>
służą do wyodrębniania nagłówka, ciała i stopki tabeli i są
bardzo przydatne przy formatowaniu za pomocą CSS
<body>
<thead>
<tr>
<td>nagłówek tabeli</td>
</tr>
</thead>
<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>
<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
Masło
1950
Margaryna
1993
1994
1995
1380
1420
1550
980
1150
1320
2120
1991-1992
Masło
Margaryna
1993-1995
2390
800
4350
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 protected]” 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
służy do tworzenia pól, gdzie czytelnik strony może wpisać
informację lub wybrać jakąś opcję
• select
służy do tworzenia rozwijalnych list z opcjami, spośród których
czytelnik wybiera interesujące go pozycje
• textarea
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”
type= ”password”
type= ”file”
type= ”submit”
type= ”reset”
type= ”hidden”
type= ”button”
możemy tu wybrać tylko jedna odpowiedź
wprowadzamy hasło ale wyświetlane będą gwiazdki
dołącza dowolny plik tekstowy do formularza
wstawia przycisk do formularza, odpowiada za
wykonanie action zdefiniowanej dla formularza
wstawia przycisk, który czyści wszystkie pola formularza
wstawia zwykle pole tekstowe niewidoczne na stronie
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 name jest "plec", value przybiera 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>
pusty cudzysłów oznacza brak początkowej wartości
Efekt:
Podaj hasło:
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”
pole tekstowe niewidoczne na stronie
type=”button”
przycisk dowolnego przeznaczenia
podobne do klasycznego input, ale pozwala wprowadzić do
"klikalnego" przycisku znacznie więcej elementów.
pole select
Lista wyboru select sł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>
Truskawki
<option> Śliwki </option>
Maliny
Poziomki
</select>
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 rows wyznacza 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
Uwagi od czytelników
Wypełnij poniższe pola
Podaj swoją płeć
Kobieta
Mężczyzna
W
y ś lij s w o je
u w a g i
U s u ń w s z ys tk ie in f o rm a c 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=”[email protected]” />
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
Masło
Margaryna
1993-1995
2390
800
4350
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
Masło
1950
Margaryna
1993
1994
1995
1380
1420
1550
980
1150
1320
2120
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

(Microsoft PowerPoint - XHTML_3_tabele

Transkrypt

Podobne dokumenty

Krzysztof Czerwonka – Kurs HTML

czereśnia antyczna antique cherry szafa 2-drzwiowa 2

Home Table Deco Fair - Wydział Promocji Handlu i Inwestycji

JS - obsługa formularzy

HTML – Lekcja 5 - Tabele

HTML •zdefiniowanie sposobu wizualnej prezentacji dokumentu w

Projekt strony internetowej firmy organizującej przyjęcia

Untitled - Stylhen