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> 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:
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.: td padding: 10px 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> 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.:
td width: 200px; height: 100px 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;
<TD>Komórka</TD><TD VALIGN="top">Komórka</TD> <TD>Komórka</TD><TD VALIGN="bottom">Komórka</TD> Łą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: <TD COLSPAN="2">Połączona komórka</td> <TD ROWSPAN="2">Połączona komórka</td><td>komórka</td> <TD>Komórka</TD>
<TD COLSPAN="2">2 komórka</td><td ROWSPAN="3">3 komórka <TD ROWSPAN="2">2 komórka</td><td>komórka</td> <TD>Komórka</TD> <TD COLSPAN="3">3 Komórka</TD> 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:
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
td.pg border-bottom: 1px solid black <TABLE CELLSPACING="0"><TR> <TD CLASS="lg">Komórka</TD><TD CLASS="pg">Komórka</TD> <TD CLASS="ld">Komórka</TD><TD>Komórka</TD> 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
<TD CLASS="mala" NOWRAP> Tekst tekst tekst tekst<br /> tekst tekst</td> <TD CLASS="duza"> Tekst tekst tekst tekst<br /> tekst tekst tekst tekst<br /> 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...