9. tabele

Transkrypt

9. tabele

KURS HTML
9. TABELE
Tabele są czymś niezwykle waŜnym dla strony HTML. ChociaŜ początkujący omijają je
szerokim łukiem, lepiej się je nauczyć. Ta lekcja będzie większym połączeniem oby dwóch
języków kursu niŜ jakiekolwiek poprzednie i jakiekolwiek następne lekcje.
Na początku struktura tabeli
Tabele rozpoczyna opcjonalny znacznik <TABLE>. Wewnątrz tego znacznika
umieszczane są wiersze, za pomocą opcjonalnego znacznika <TR>, wewnątrz którego są
komórki, wewnątrz których umieszczamy to, co ma wyświetlić się w tabeli. Komórki mają
dwa rodzaje – nagłówki i zwykłe komórki. Nagłówki tworzy się za pomocą znacznika <TH>,
a zwykłe komórki <TD>. Nagłówek róŜni się tym, Ŝe tekst jest od razu pogrubiony, co moŜna
zrobić ręcznie. Zalecam uŜywać samych komórek. Przykład tabeli:
<TABLE><TR>
<TD>Komórka</TD><TD>Komórka</TD>
</TR><TR>
</TR></TABLE>
Obramowanie tabeli
JeŜeli chcemy zrobić obramowanie za pomocą HTML (w CSSie później) do znacznika
rozpoczynającego tabelę musimy dodać atrybut BORDER. Dziw, nawet obramowanie bez
uŜycia CSS jest ładne. JednakŜe w odróŜnieniu od później poznanego CSS, atrybut ten nadaje
obramowanie do kaŜdej komórki, w CSSie trzeba robić wszystko ręcznie. JeŜeli chcemy
zwiększyć obramowanie do atrybutu BORDER dajmy jakąś wartość liczbową większą od
jedynki. Przykład tabeli z obramowaniem:
<TABLE BORDER><TR>
</TR><TR>
</TR></TABLE>
www.INFORMATYKA.cba.pl
KURS HTML
Wewnętrzne marginesy komórki
JeŜeli chcemy, aby zawartość komórki była bardziej oddalona od samego obramowania
komórki moŜemy zarówno uŜyć atrybutu CELLPADDING, jak i deklaracji padding, co
bardziej polecam np.:
<STYLE TYPE="text/css">
td
{
padding: 10px
}
</STYLE>
<TABLE BORDER><TR>
</TR><TR>
</TR></TABLE>
Odległości między komórkami: CELLSPACING
Podobnie jak w poprzednim przykładzie, nie tylko zawartość komórki moŜemy oddalić od
jej granic, ale i same komórki od granic tabeli. SłuŜy do tego atrybut CELLSPACING np.:
<TABLE BORDER CELLPADDING="10"><TR>
</TR><TR>
</TR></TABLE>
Rozmiary komórki
JeŜeli chcemy zwiększyć wysokość i szerokość komórki musimy uŜyć dwóch deklaracji
CSS: width - szerokość i height - wysokość np.:
KURS HTML
td {
width: 200px;
height: 100px
}
</STYLE>
<TABLE BORDER><TR>
</TR><TR>
</TR></TABLE>
UłoŜenie treści w komórkach
Znaną juŜ nam deklaracją text-align (z lekcji o tekście) moŜemy określić poziome
połoŜenie zawartości komórek (domyślnie jest wszystko po lewej, a w pionie w środku). W
celu zmiany połoŜenia pojedynczych komórek moŜemy uŜyć atrybutu ALIGN o znanych
nam wartościach: center - środek i right - prawo (pamiętajmy, Ŝe dobra przeglądarka wyŜej
interpretuje CSS niŜ HTML więc uŜycie wyŜej wymienionej deklaracji CSS do wszystkich
komórek uniemoŜliwi poprawne zinterpretowanie atrybutu HTML). JeŜeli chcemy określić
pionowe połoŜenie musimy uŜyć atrybutu HTML (do określonych komórek) VALIGN o
znanych juŜ nam wartościach: top - góra i bottom - dół (domyślnie jest middle - środek) np.:
td {
width: 200px;
height: 100px;
text-align: center;
}
</STYLE>
KURS HTML
<TABLE BORDER><TR>
<TD>Komórka</TD><TD VALIGN="top">Komórka</TD>
</TR><TR>
<TD>Komórka</TD><TD VALIGN="bottom">Komórka</TD>
</TR></TABLE>
Łączenie komórek
Czasami potrzeba zrobić tak, aby w jednym wierszu była jedna komórka o rozmiarze
takim, jak w następnym dwie komórki, ewentualnie w jednej kolumnie jedna komórka o
rozmiarze takim, jak w następnej dwie komórki. Jest to tzw. łączenie komórek. SłuŜą do tego
atrybuty COLSPAN dla łączenia komórek w poziomie (wiersz) i ROWSPAN dla łączenia
komórek w pionie (kolumna). Wartości oby dwóch atrybutów to ilość połączonych komórek
większa niŜ jeden.
Pierwszy przykład prezentuje połączenie komórek za pomocą COLSPAN, drugi za
pomocą ROWSPAN, a trzeci to wielokrotne połączenie obu atrybutów:
<TABLE BORDER><TR>
<TD COLSPAN="2">Połączona komórka</TD>
</TR><TR>
</TR></TABLE>
<TABLE BORDER><TR>
<TD ROWSPAN="2">Połączona komórka</TD><TD>Komórka</TD>
</TR><TR>
<TD>Komórka</TD>
</TR></TABLE>
KURS HTML
<TABLE BORDER><TR>
<TD COLSPAN="2">2 komórka</TD><TD ROWSPAN="3">3 komórka
</TR><TR>
<TD ROWSPAN="2">2 komórka</TD><TD>Komórka</TD>
</TR><TR>
<TD>Komórka</TD>
</TR><TR>
<TD COLSPAN="3">3 Komórka</TD>
</TR></TABLE>
RóŜne obramowania tabeli
JeŜeli nie podoba nam się obramowanie tabeli (nie komórek) moŜemy je w prosty sposób
zmienić, uŜywając atrybutu FRAME. Wartości tego atrybutu jest sporo więc nie kaŜdy
będzie miał swój własny przykład. Wartości to:
•
void - usunięcie całego zewnętrznego obramowania
•
above - usunięcie dolnego i bocznego obramowania
•
below - usunięcie górnego i bocznego obramowania
•
lhs - usunięcie górnego, dolnego i prawego obramowania
•
rhs - usunięcie górnego, dolnego i lewego obramowania
•
hsides - usunięcie bocznego obramowania
•
vsides - usunięcie górnego i dolnego obramowania
Rodzaje obramowania tabeli
Za pomocą CSS moŜemy jeszcze zrobić wiele rzeczy z obramowaniem. Ze względu na
ogromną ilość deklaracji uŜyjemy skrótu – po prostu border. JeŜeli komuś zaleŜy na
precyzyjnym określeniu obramowania wystarczy rozszerzyć tą deklarację, dodając po border
myślnik i left, right, top i bottom - powinniśmy wiedzieć, co to wszystko znaczy. Deklaracja
border składa się z trzech określeń – rozmiaru obramowania, typu obramowania i koloru
obramowania. Jedyne co wymaga opisu to typ, którego jeszcze nie było:
KURS HTML
•
solid - ciągła pojedyncza linia
•
double - ciągła podwójna linia (minimum trzy piksele)
•
dashed - linia składająca się z kresek
•
dotted - linia składająca się z kropek
•
groove - linia wklęsła z cieniem (minimum trzy piksele)
•
ridge - linia wypukła z cieniem (minimum trzy piksele)
•
inset - wklęsła bez cienia (minimum trzy piksele)
•
outset - wypukła bez cienia (minimum trzy piksele)
Oto przykład prostej tabelki z cienkim solidnym obramowaniem. Jak widać po kodzie w
CSS, aby uzyskać taki efekt, trzeba się trochę podłubać:
table
{
border: 1px solid black
}
td
{
padding: 3px
}
td.lg
{
border-right: 1px solid black;
border-bottom: 1px solid black
}
td.ld
{
border-right: 1px solid black
}
KURS HTML
td.pg
{
border-bottom: 1px solid black
}
</STYLE>
<TABLE CELLSPACING="0"><TR>
<TD CLASS="lg">Komórka</TD><TD CLASS="pg">Komórka</TD>
</TR><TR>
<TD CLASS="ld">Komórka</TD><TD>Komórka</TD>
</TR></TABLE>
Uwaga: jeŜeli w komórkach tabel, tekst, lub inne elementy dwoją się (zostają
wyświetlone w kilku wierszach) jest to głównie spowodowane tym, Ŝe jedna komórka ma
wartość deklaracji width liczbową z jednostką, a zaś druga tuŜ obok wartość 100%. ChociaŜ
jest to prawidłowy zapis większość przeglądarek traktuje wyŜej wartości procentowe. W tym
celu dla komórki, której deklaracja width jest liczbowa przypiszmy znacznikowi atrybut
NOWRAP np.:
td.duza
{
width: 100%
}
td.mala
{
width: 50px
}
</STYLE>
KURS HTML
<TABLE BORDER><TR>
<TD CLASS="mala" NOWRAP>
Tekst tekst tekst tekst<br />
tekst tekst</TD>
<TD CLASS="duza">
tekst tekst tekst tekst<br />
tekst tekst</TD></TR>
</TABLE>
W zasadzie to juŜ wszystko o tabelach. JeŜeli chcemy dobrze tworzyć stronę w HTMLu to
musimy tą lekcję poznać perfekcyjnie. Większość stron HTMLowych to tabele w tabelach, w
jeszcze jednych tabelach...

9. tabele

Transkrypt

Podobne dokumenty

Zaproszenie

Schemat organizacyjny - BIP

OŚWIADCZENIE O WYBORZE MIEJSCA SPECJALIZACYJNEGO

Gra w życie

cywile pobierz. - Wyższa Szkoła Policji w Szczytnie

Projekt 3 (Automaty komórkowe)

Krzysztof Czerwonka – Kurs HTML

LT/LN Likwidacja środka trwałego / przedmiotu