Dodatkowe elementy tabeli

Opisywana specyfikacja języka HTML wprowadza trzy nowe znaczniki związane z tabelami. Mam tutaj na myśli: <thead></thead>, <tbody></tbody> oraz <tfoot> </tfoot>. Znaczniki te służą do wyodrębnienia nagłówka, ciała i stopki tabeli i są bardzo przydatne przy formatowaniu za pomocą kaskadowych arkuszy stylów.

Poniżej przedstawiłem prosty listing, na którym widać przykład użycia wspomnianych znaczników. Nie przewidziałem użycia obrazka, ponieważ na tym etapie nie jest on konieczny, gdyż opisywane znaczniki nie mają na razie żadnego wpływu na wygląd strony WWW.

<body>
<table border=”1″>
<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>

Każda tabela może zawierać podpis, który ma następującą postać:

<caption>Tabela 1.1. Każda tabela może zawierać podpis</caption>
W kodzie strony natomiast podpis powinien znajdować się między znacznikiem <table> </table>.
<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>

Przyjrzyjmy się teraz, jak na naszych przykładowych stronach użyto tabel w celu uzyskania ciekawego efektu. Na rysunku znajduje się rozwiązanie, które spróbujemy wspólnie uzyskać, korzystając z nowszych rozwiązań, jakimi są warstwy i ich pozycjonowanie na stronie. W związku z tym, że w chwili obecnej jeszcze nie znasz kaskadowych arkuszy stylów w tym miejscu przygotujemy jedynie strukturę dokumentu, a ostateczny kształt nadamy mu w kolejnym rozdziale.

Jak widzisz, na przykładowej stronie połączono wiele elementów; poza tabelami można na niej zauważyć listy, grafikę, hiperłącza, bloki tekstu, a nawet doszukiwałbym się tu nagłówków. Przykład z rysunku jest wycinkiem większej strony, jednak na początek wystarczy, by zająć się tylko nim. Później w kilku zdaniach objaśnię, jak powstała reszta strony.

Na początku musisz zdefiniować tabelę składającą się z jednej kolumny i dwóch komórek. Będzie to zewnętrzna tabela, określająca wygląd całej strony. Dla tej tabeli musisz określić szerokość na sztywno z u pomocą wartości bezwzględnych. Szerokość powinna być dopasowana do wielkości obrazka, stanowiącego nagłówek całej tabeli.

Odpowiedni kod powinien wyglądać mniej więcej tak:

W pierwszej komórce trzeba umieścić obrazek, znajdujący się nad resztą przykładowej strony, natomiast do drugiej komórki wstawić należy jeszcze jedną tabelę oraz pozostałą zawartość strony. Powinna być ona nieznacznie mniejsza niż tabela nadrzędna, gdyż chcemy uzyskać efekt widoczny w prawym górnym narożniku rysunku. Zagnieżdżona tabela powinna składać się z jednego wiersza oraz trzech kolumn. Widać to wyraźnie na wspomnianym już przykładzie. Jeżeli tego nie widzisz, proponuję, byś w myślach narysował pionowe linie dzielące elementy z początku strony. Pierwsza kolumna to tekst, następnie na środku mamy przyciski oraz okładkę książki z prawej strony.

Zmodyfikowana wersja kodu może wygląda mniej więcej tak:

<body>
<table cellpadding=”0″ cellspacing=”0″ width=”557”>
<tr>
<td>
<img src=”obrazek.gif” height=”21″ width=”557″>
</td>
</tr>
<tr>
<td>
<table width=”551″>
<tr>
<td width=”100%”>
Miejsce na tekst w lewej kolumnie </td>
<td width-„1″>
Miejsce na przycisku pośrodku </td>

<td width=”1″>
Miejsce na okładkę książki </td>
</tr>
</table>

Pozostałe części tekstu zgrupowane w bloki tekstu i listy. Całość rozdzielona za pomocą poziomej linii.
</td>
</tr>
</table>
</body>

Teraz przyjrzyjmy się możliwościom zbudowania identycznej strony bez wykorzystania tabel. W dalszym opisie posłużyłem się znacznikami <div></div> do określenia struktury dokumentu. Przykładowy listing prezentuje strukturę znaczników <div></div>, a w dalszej części zajmę się poszczególnymi elementami.

Pierwszy blok określony przez znacznik <div></div> ma za zadanie zebranie w całość reszty elementów składowych. Dzięki temu w przyszłości będzie znacznie łatwiej zarządzać wyglądem witryny.

Blok z przypisanym identyfikatorem id=”belka” będzie zawierać graficzny ozdobnik. Poniżej odpowiedni fragment kodu.

Kolejny blok z identyfikatorem id=”ksiazka” zawiera w sobie trzy podrzędne bloki, w których umieściłem niezbędne dane. Zwróć uwagę, że na rysunku możemy wyróżnić trzy główne grupy danych:
■   tytuł oraz informację o autorze i cenie książki,
■   przyciski,
■   okładkę.

<div id=”ksiazka”>
<div class=”ksiazkadane“>
<h1>ABC tworzenia stron WWW</h1>
<ul id=”ksiazkadane”>
<li><strong>Autor:</strong> <a href=“http://daklowski.pl”>Bartosz Wranowski</a></li>
<li>ISBN: 83-7361-017-0</li>

<li>Format: B5, stron: 208></li>
</ul>
<ul>
<li>Data wydania: 03/2003</li>
</ul>
<ul>
<li>Cena książki: 19.00 zł</li>
<1 i><a href=”#”>koszty wysyłki</a> / <a href=”#”>informacje o hel i on.pl</a></li >
</ul>
<ul>
<1 i><a href=”#”>oceń książkę</a> / <a href=”#”>zgłoś erratę</a></li> <li><a href=”#”>poinformuj znajomego o książce</a></li>
<li><a href=”#”>wydrukuj opis</a> / <a href=”#”>opis i spis treści</a></li>
</ul>
<ul>
<1i>0cena czytelników <img src=”obrazki/star55.gif” alt=”ocena” /></li> <li>Liczba ocen: 22</li>
</ul>
</div>
<div id=”ksiazkaprzyciski”>
<img src=”obrazki/button_dodajdokoszyka2.gif” alt=”Dodaj do koszyka” /> <img src=“obrazki/button_spistresci.gif” alt=“Spis treści” />
<img src=”obrazki/button_errata.gif” alt=“Errata” />
<img src=“obrazki/button_recenzje2.gif” alt=”Recenzje” />
<img src=“obrazki/button_opinieczytelnikow.gif” alt=”0pinie czytelników11 /> <img src=”obrazki/button_przykladowyrozdzial.gif” alt=”Przykładowy rozdział” />
</div>
<div id=”ksiazkaokladka”>
<img src=”obrazki/abctww.jpg” alt=”ABC tworzenia stron WWW” />
<p>Bestseller! Ponad 6 000 sprzedanych egzemplarzy </p>
<p>numer z katalogu: 2054 </p>
</div>
</div>

Pierwszy z podrzędnych bloków zawiera nagłówek z tytułem książki, a reszta danych została przedstawiona w formie list wypunktowanych. Dzięki temu znacznie łatwiej będzie mi w przyszłości odpowiednio sformatować cały fragment zawartości strony.

Drugi z podrzędnych bloków zawiera wyłącznie graficzne przyciski, a ostatni z modułów odpowiada za wyświetlenie okładki oraz podpisów widocznych bezpośrednio pod nią.

Pora na szybką analizę kolejnego głównego bloku, oznaczonego identyfikatorem id= „opis”. Stosowny listing zamieszczam poniżej.

<div id=”opis”>
<img src=”obrazki/as_logo2.gif” alt=”empik” height=”38″ width=”100″ />
<p>
Wydaje Ci się, że stworzenie własnej strony WWW przekracza Twoje możliwości? Jesteś w błędzie! Potrzebna jest do tego odrobina determinacji, trochę wolnego , czasu i podstawowe informacje, których dostarczy Ci ta książka. Dowiesz się z niej wszystkiego, co potrzebne, by samodzielnie stworzyć własną witrynę internetową.
</p>
<p>
Ten praktyczny podręcznik przekaże Ci nie tylko niezbędne informacje na temat języka HTML. Dowiesz się także jak uatrakcyjnić wygląd witryny używając odpowiednich narzędzi, jak przygotować grafikę na potrzeby WWW, jak poprawnie zakodować polskie znaki i jak wysyłać e-maile bezpośrednio ze strony.
</p>
<p>
Książka zawiera:
</p>
<ul>
<li>Podstawowy kurs języka HTML: tekst na stronach WWW, łączenie tekstu z grafiką, tabele, ramki i odnośniki</li>
<li>Niezbędne informacje na temat kaskadowych arkuszy stylów (CSS)</li> <li>Tajniki właściwego przygotowania ilustracji na strony WWW: skanowanie, obróbkę, wybór formatu zapisu</li>
<li>Praktyczne sposoby publikowania gotowych stron w Internecie</li>
<li>Wiele sprawdzonych sztuczek i technik projektowania stron WWW </li>
</ul>
<p>
Chcesz mieć własną stronę WWW i nie wiesz od czego zacząć? Zacznij od tej książki, a przekonasz się, ile satysfakcji dostarczy Ci realizowanie własnych pomysłów.
</p>
</div>

Zwartość jest typowa i składa się na nią jeden obrazek, kilka akapitów oraz lista wypunktowana.

Następne dwa moduły oznaczyłem za pomocą identyfikatorów id=”kupowanelista“ i id=”kupowaneokladki”. Tradycyjnie, listing zamieściłem poniżej.
<div id=”kupowanelista”>
<p>0soby które kupowały <strong>ABC tworzenia stron WWW</strong> często kupowały też:</p>
<ul>
<li>Tworzenie stron WWW. Kurs 34.90 PLN (34.90 PLN)</li>
<li>ABC języka HTML 19.00 PLN (19.00 PLN)</li>
<li>Tworzenie stron WWW w praktyce 39.00 PLN (39.00 PLN)</li> <li>Projektowanie stron WWW. Jak to zrobić? 49.00 PLN (49.00 PLN)</li>
<li> Serwisy WWW. Projektowanie, tworzenie i zarządzanie 39.90 PLN (39.90 PLN)</li >
</ul>
</div>

Pierwszy z omawianych elementów zawiera jeden akapit oraz prostą listę wypunktowaną, natomiast drugi odpowiada za prezentację kilku obrazków, będących miniaturami okładek książek.
Ostatni główny moduł, oznaczony za pomocą identyfikatora id=”naskroty”, zawiera trzy akapity z odsyłaczami do różnych kategorii tematycznych.

<div id=”naskroty”>
<p><strong>Na skróty:</strong> <a href=”#”>Tworzenie stron WWW</a> | <a href=”#”>Wszystkie kategorie alfabetycznie</a></p>
<p><strong>Serie:</strong> <a href=”#”>ABC</a></p> <p><strong>Kategorie:</strong> <a href=”#”>Wszystkie książki</a> | <a href=”#”>Internet</a> | <a href=”#”>Webmasterstwo</a></p>
</div>

Rysunek przedstawia wynik działania całego kodu strony, nad którą pracujemy.

Na tym kończy się rola języka XHTML/HTML, a cała reszta w postaci upiększenia strony należy już do kaskadowych arkuszy stylów. Do powyższego przykładu wrócimy w następnym rozdziale, który omawia działanie CSS.

Teraz natomiast zastanowimy się, w jaki sposób rozbudować przykład z rysunku, by stał się on częścią większej całości.
Jak widzisz, kompletną stronę możemy potraktować jak niesymetryczną tabelę, której ogólny schemat znajduje się poniżej.
W polu oznaczonym jedynką musisz umieścić nagłówek strony. W następnej komórce, opisanej cyfrą dwa, powinieneś umieścić kilka małych tabelek bezpośrednio pod sobą tak, by powstało menu. Natomiast największe pole, w którym widnieje cyfra trzy, powinno zawierać kod, jaki stworzyliśmy kilka stron wcześniej — odpowiadający za tę część strony.

Pamiętaj, że główna tabela w tym przypadku powinna mieć określony bezwzględny rozmiar (w tym przypadku autor oryginalnej strony ustawił wartość 755).

Wydaje mi się, że dokładniejszy opis przykładu z rysunku jest zbędny, ponieważ byłby on jedynie powielaniem tego, co napisałem już podczas analizy fragmentu tej strony.