Active Server Pages,ActiveServerPages+,ASP,ASP+,aspx,VBScript,IIS,internet,intranet,programming,programowanie,XML,Extensible Markup Language,kurs,opis,HTML,Hypertext Markup Language,JScript,JavaScript,wyszukiwarka,znajdz,instrukcja,Stelmik,Stelmi,free,darmo,zadarmo,free,serwer,server,www,konta,PHP,perl,klient,uslugi,asp,sklep internetowy,sklepy internetowe,e-sklep,esklep,tworzenie stron internetowych,strony internetowe,strony www,tworzenie stron www,strony internetowe,web page,webpage,creating,Krzysztof Stelmach,Krzysztof,Stelmach,www.stelmach.info,www.asp.z.pl
 
Create your own social network!
IP: 54.167.112.42 
 
 HTML / TABELE
Szukaj:  
Nd, 18.11.2018r.
KURSY » języki - klient » HTML » Tabele
 

1. Tabela, wiersze i kolumny

Opis tabeli znajdować się powinien wewnątrz znaczników <TABLE> </TABLE>. W ich ramach umieszczone są definicje rzędów, komórek w rzędach oraz dane w komórkach.

Wiersz tabeli definiuje się znacznikami <TR> <TR> i jest on wewnętrznym opisem tabeli. On sam tworzy ramy dla komórek wewnątrz których znajdują się dane. W tabeli można umieszczać dowolną ilość wierszy, np.:

<TABLE>
<TR> </TR>
<TR> </TR>
<TR> </TR>
</TABLE>

W powyższym przykładzie utworzona została tabela zawierająca 3 wiersze. W następnym kroku należy w każdym z wierszy zdefiniować komórki.

Komórkę w wierszu definiuje się znacznikami <TD> <TD>. Każda komórka powinna zawierać dane, np. w postaci tekstu lub grafiki. Komórki umieszcza się między znacznikami wybranego wiersza tabeli, np.:

<TABLE>
<TR><TD>A1</TD><TD>A2</TD><TD>A3</TD></TR>
<TR><TD>B1</TD><TD>B2</TD><TD>B3</TD></TR>
<TR><TD>C1</TD><TD>C2</TD><TD>C3</TD></TR>
</TABLE>

co przyjmie następujący wygląd:

A1 A2 A3
B1 B2 B3
C1 C2 C3

2. Obramowanie, margines, szerokość oraz wysokość tabeli i komórek

W celu dodania do tabeli obramowania należy wykorzystać do tego atrybut BORDER w znaczniku TABLE. W przypadku braku wartości obramowania tabeli, brana jest jej wartość domyślna, tj. 0. Składnia wygląda następująco:

<TABLE BORDER=x> </TABLE>

Oto przykład tabeli, której obramowanie jest równe 5:

<TABLE BORDER=5>

przyjmie następujący wygląd:

A1 A2 A3
B1 B2 B3
C1 C2 C3

W celu odsunięcia od siebie poszczególnych komórek w tabeli należy posłużyć się atrybutem CELLSPACING. Przykład:

<TABLE BORDER=5 CELLSPACING=10>

i przyjmie postać:

A1 A2 A3
B1 B2 B3
C1 C2 C3

Jeśli okaże się, że odstęp między krawędzią komórki a jej zawartością jest zbyt mała to można posłużyć się atrybutem CELLPADDING. Składnia:

<TABLE CELLPADDING=x> </TABLE>

Przykład:

<TABLE BORDER=5 CELLPADDING=20>

przyjmie wygląd: 

A1 A2 A3
B1 B2 B3
C1 C2 C3

Jeśli zaistniałaby konieczność zmiany szerokości tabeli, należałoby posłużyć się atrybutem WIDTH. Składnia wyglądać powinna następująco:

<TABLE WIDTH=x> </TABLE>

gdzie x może przyjąć wartość numeryczną lub procentową w odniesieniu do szerokości ekranu przeglądarki. Przykład:

<TABLE BORDER=5 WIDTH=50%>

A1 A2 A3
B1 B2 B3
C1 C2 C3

Ten sam atrybut może posłużyć do określenia szerokości komórki (kolumny) w tabeli. Wartość może być w postaci numerycznej lub procentowej w odniesieniu do szerokości tabeli. Składnia wygląda następująco:

<TD WIDTH=x> </TD>

Przykład:

<TD WIDTH=150>

wygląda następująco:

A1 A2 A3
B1 B2 B3
C1 C2 C3

W celu określenia wysokości tabeli należy użyć atrybutu HEIGHT, a jego wartość wyrazić w pikselach lub procentach widocznej strony. Konstrukcja ma postać:

<TABLE HEIGHT=x> </TABLE>

Przykład:

<TABLE BORDER=5 HEIGHT=200>

A1 A2 A3
B1 B2 B3
C1 C2 C3

3. Pozycjonowanie tabel oraz danych w komórkach

W celu wyrównania tabeli w stosunku do marginesów strony lub otaczających ją elementów (tekst, grafika) można posłużyć się atrybutem ALIGN w znaczniku TABLE. Może on przyjąć wartości LEFT, RIGHT lub CENTER. Przykład:

<TABLE BORDER=5 ALIGN=RIGHT> </TABLE>

wygląda następująco:

A1

A2 A3
B1 B2 B3
C1 C2 C3

 

 

 

Atrybut ALIGN można także wykorzystać do poziomego wyrównania zawartości komórki. W tym celu należy użyć konstrukcji:

<TD ALIGN=.....> </TD>

Przykłady, gdzie atrybuty tabeli wyglądają następująco <TABLE BORDER=5 WIDTH=50%>:

<TD ALIGN=CENTER>
A1 A2 A3
B1 B2 B3
C1 C2 C3
<TD ALIGN=RIGHT>
A1 A2 A3
B1 B2 B3
C1 C2 C3

W celu wyrównania pionowego zawartości komórki należy posłużyć się atrybutem VALIGN. Może on przyjąć wartości TOP, MIDDLE oraz BOTTOM. Składnia wygląda następująco:

<TD VALIGN=.....> </TD>

Przykłady, gdzie atrybuty tabeli wyglądają następująco <TABLE BORDER=5 HEIGHT=200>:

<TD VALIGN=TOP>
A1 A2 A3
B1 B2 B3
C1 C2 C3
<TD VALIGN=BOTTOM>
A1 A2 A3
B1 B2 B3
C1 C2 C3

4. Wypełnienie tabeli (tło)

Przeglądarka Internet Explorer pozwala wypełnić tabelę dowolnym kolorem - kolorem tła tabeli. W tym celu należy w definicji tabeli wykorzystać atrybut BGCOLOR. Składnia jest następująca:

<TABLE BGCOLOR=kolor>

gdzie kolor może przyjąć postać wartości numerycznej (np. #00FF77) lub słownej (Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua).

Przykład:

<TABLE BORDER=5 BGCOLOR=RED> 

A1 A2 A3
B1 B2 B3
C1 C2 C3

Istnieje również możliwość zmiany kolorów tła poszczególnych komórek tabeli. Składnia jest następująca:

<TD BGCOLOR=kolor> </TD>

gdzie kolor może przyjąć postać wartości numerycznej (np. #00FF77) lub słownej (Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua).

Przykład: 

A1 A2 A3
B1 B2 B3
C1 C2 C3

Jako tła tabeli lub poszczególnych komórek można także użyć gotowego obrazka. W tym celu należy użyć składni:

<TABLE BACKGROUND="plik_graficzny">

Przykład:

<TABLE BACKGROUND="marble.jpg">

tworzy tabelę jak poniżej:

A1 A2 A3
B1 B2 B3
C1 C2 C3

Przeglądarka Internet Explorer interpretuje także kolor obramowania tabeli. W tym celu należy użyć atrybutu BORDERCOLOR. Składnia:

<TABLE BORDERCOLOR=kolor>

gdzie kolor może przyjąć postać wartości numerycznej (np. #00FF77) lub słownej (Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua).

Przykład:

<TABLE BORDER=5  BORDERCOLOR=GREEN>

A1 A2 A3
B1 B2 B3
C1 C2 C3

Oprócz tego Internet Explorer pozwala określić kolor cienia obramowania tabeli. Cień brzegu komórki lub tabeli dzieli się na dwie części: jasną z lewej i u góry oraz ciemną z prawej i u dołu. Można nadać odrębną barwę obu cieniom, np.:

<TABLE BORDER=5 BORDERCOLORDARK=black BORDERCOLORLIGHT=white>

i wyglądać to będzie następująco:

A1 A2 A3
B1 B2 B3
C1 C2 C3

Przykład w przypadku komórki:

<TD BORDERCOLORDARK=red BORDERCOLORLIGHT=yellow>

A1 A2 A3
B1 B2 B3
C1 C2 C3

Tabela może zawierać tytuł, wyjaśniający jej treść. Należy umieścić go zaraz za ogólną definicją tabeli (za znacznikiem <TABLE>), np.:

<TABLE BORDER>
<CAPTION ALIGN=TOP>Napis na górze</CAPTION>

będzie wyglądać:

Napis na górze
A1 A2 A3
B1 B2 B3
C1 C2 C3
 
do góry ^ 
Jesteś 2015600 odwiedzającym
 
 
Copyright © 2003-2018 Krzysztof Stelmach, Wszelkie prawa zastrzeżone.
 
System reklamy Test