|
Poniżej przedstawiony jest kod źródłowy przykładowego
dokumentu - należy zwrócić uwagę na sposób tworzenia tabel w dokumencie HTML.
<body bgcolor="0D84C4" text="000050">
<hr>
Poniższy fragment tekstu przedstawia przykład kodu
źródłowego HTML umożliwiającego utworzenie bardzo prostej tabeli. Tabela ta składa się z dwóch
kolumn i trzech wierszy. Pierwsza kolumna będzie zawierać nagłówki wierszy, a druga - dane.
<h1>Bardzo prosta tabela</h1>
<table>
<tr>
<th>Imię</th> <td>Paweł</td>
</tr>
<tr>
<th>Nazwisko</th> <td>Blackmore</td>
</tr>
<tr>
<th>Data urodzenia</th> <td>26
maja 1963 roku</td>
</tr>
</table>
<hr>
Znacznik <TABLE> rozpoczyna definiowanie
tabeli, a </TABLE> kończy. Znacznik <TR> rozpoczyna,
a znacznik </TR> kończy tworzenie wiersza. Między znacznikami otwierającym i
zamykającym TR
umieszcza się znaczniki definiujące poszczególne komórki w danym wierszu. Znacznik
<TH> zaczyna,
a </TH> kończy definiowanie komórki nagłówkowej; między tymi znacznikami
umieszcza się tekst,
który ma być treścią tej komórki (nagłówek). Tekst ten będzie wyświetlany jako pogrubiony i wyśrodkowany.
Znacznik <TD> rozpoczyna określanie komórki danych, a </TD> kończy.
Uwaga: Tabela nie musi mieć komórek
nagłówkowych, może mieć tylko komórki danych
lub może być zbudowana z samych komórek nagłówkowych. Tak naprawdę znacznik
<TD> czy <TH> określa tylko sposób formatowania tekstu umieszczonego
w danej komórce.
Poniższy fragment tekstu przedstawia przykład kodu
źródłowego HTML tworzącego tabelę bardziej skomplikowaną, z wykorzystaniem większości istniejących
znaczników i ich atrybutów.
<pre>
</pre>
<
h1>Tabela bardzo złożona</h1>
<
table
border=4 bgcolor="ED9E0A">
<caption align=bottom><h1>Podział muzyki<h1></caption>
<tr bgcolor="D1C9DF">
<th colspan=12>
rock pop elektroniczna jazz</th>
</tr>
<tr>
<th rowspan=2>Deep Purple</th><th>młodsze</th>
<th colspan=2>Led Zeppelin</th>
<th colspan=2>AC/DC</th><th colspan=2>ABBA</th>
<th colspan=2>Thin Lizzy</th>
<th colspan=2>Yes</th>
</tr>
<tr>
<th>POP</th><th colspan=2>Status
Quo</th>
<th colspan=2>Police</th><th colspan=2>Sting</th>
<th colspan=2>OMD</th><th colspan=2>Maklaski</th>
</tr>
<tr>
<th rowspan=2>Elektroniczna</th><th colspan=3>JArre</th>
<th colspan=2>Vangelis</th><th colspan=2>Tangerine
Dream</th>
<th colspan=2>Kraftwerk</th><th colspan=2>.....</th>
</tr>
<tr>
<th>Skład</th><td align=center>Deep<br>
Purplebr>
± Plagioklaz<br>kwaśny</td>
<td align=center>John<br>Augit<br>
LOrd</td>
<td align=center>Ritchie<br>
Blackmore<br>guitar</td>
<td align=center>Jimmy <br>Page<br>
Drums</td>
<td align=center>Ian<br>Gillan<br>
vocal</td>
<td align=center>Roger<br>Glover<br>
bass</td>
</body>
</html>
Niektóre z zastosowanych tu znaczników zostały omówione
w poprzednim przykładzie.
Obramowanie tabeli
ustala się stosując atrybut BORDER znacznika TABLE, nadając mu wartość (w
pikselach) mówiącą o grubości linii ramki.
Kolor tła tabeli
ustala się za pomocą atrybutu BGCOLOR znacznika TABLE, nadając mu wartość wg
notacji heksadecymalnej.
Kolor tła wiersza
ustala się za pomocą atrybutu BGCOLOR znacznika TR, nadając mu wartość wg
notacji heksadecymalnej.
Kolor tła pojedynczej komórki
ustala się za pomocą atrybutu BGCOLOR znacznika TD lub TH, nadając mu
wartość wg notacji heksadecymalnej.
Tytuł tabeli
Za znacznikiem otwierającym TABLE, ale nie w definicji wiersza lub komórki, wpisuje się:
<CAPTION>
tytuł_tabeli
</CAPTION>
- w tym wypadku tytuł znajdzie się nad tabelą. Aby
umieścić go pod tabelą, wpisuje się:
<CAPTION ALIGN=BOTTOM>
tytuł_tabeli
</CAPTION>
.
Łączenie komórek leżących w sąsiednich kolumnach
Po dojściu do miejsca, w którym ma się znaleźć komórka szeroka na kilka kolumn, wpisuje się:
<TH
(lub TD)
COLSPAN=n>
(n - określa, na ile kolumn komórka ma
być szeroka), po wprowadzeniu treści komórki -
</TH>
. W następnym wierszu należy zwrócić uwagę na
liczbę komórek.
Łączenie komórek leżących w kolejnych wierszach
Tak jak w poprzednim przypadku, ale tę operację załatwia atrybut
ROWSPAN=n.
Wyrównywanie zawartości komórki
w poziomie:
Tę czynność wykonuje atrybut ALIGN znacznika TD lub TH - wartości:
center, left, right.
w pionie:
Tę czynność wykonuje atrybut VALIGN znacznika TD lub TH - wartości:
top (górna krawędź komórki), middle (wyśrodkowanie), bottom (dolna krawędź komórki) lub baseline
(linia bazowa).
Rada:
-
Najlepiej zaprojektuj tabelę na kartce, a dopiero
później wprowadzaj kod HTML.
|