Używane znaczniki

Nim zaczniemy tworzyć tabele zobaczmy jakie znaczniki biorą udział w ich tworzeniu:

<table>...</table> - otwarcie i zamknięcie tabeli
<caption>...</caption> - określa tytuł tabeli
<tr>...</tr> - otwarcie i zamknięcie każdego wiersza tabeli
<td>...</td> - otwarcie i zamknięcie komórki w wierszu
<thead>...</thead> - nagłowek tabeli
<tbody>...</tbody> - body tabeli (jej zasadnicza część)
<tfoot>...</tfoot> - stopka tabeli
<th>...</th> - komórka nagłówka tabeli
<colgroup>...</colgroup> - określa styl dla jednej lub więcej kolumn w tabeli
<col /> - określa styl dla kolumny w obrębie elementu <colgroup> lub <table>

Teraz stworzymy sobie tabelę składającą się z 3 wierszy i 3 kolumn.

<table border="1">
<tr>
<td>wiersz 1 - kolumna 1</td>
<td>wiersz 1 - kolumna 2</td>
<td>wiersz 1 - kolumna 3</td>
</tr>
<tr>
<td>wiersz 2 - kolumna 1</td>
<td>wiersz 2 - kolumna 2</td>
<td>wiersz 2 - kolumna 3</td>
</tr>
<tr>
<td>wiersz 3 - kolumna 1</td>
<td>wiersz 3 - kolumna 2</td>
<td>wiersz 3 - kolumna 3</td>
</tr>
</table>

 

wiersz 1 - kolumna 1 wiersz 1 - kolumna 2 wiersz 1 - kolumna 3
wiersz 2 - kolumna 1 wiersz 2 - kolumna 2 wiersz 2 - kolumna 3
wiersz 3 - kolumna 1 wiersz 3 - kolumna 2 wiersz 3 - kolumna 3


Jak widzimy podczas definiowania tabel najpierw używamy znacznika <table> do otwarcia tabeli, potem znacznika <tr> do otwarcia wiersza, a potem otwieramy i zamykamy kolejne komórki w wierszu <td> i </td>. Po zakończeniu każdego wiersza musimy go również zamknąć i otworzyć następny. Na końcu zamykamy całą tabelę </table>

Tytuł, nagłówek i stopka

Teraz dołożymy do tabeli tytuł oraz nagłówek i stopkę

<table border="1">
<caption>Tabela 1</caption>
<thead>
<tr>
<th>nagłówek 1</th>
<th>nagłówek 2</th>
<th>nagłówek 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>stopka 1</td>
<td>stopka 2</td>
<td>stopka 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>wiersz 1 - kolumna 1</td>
<td>wiersz 1 - kolumna 2</td>
<td>wiersz 1 - kolumna 3</td>
</tr>
<tr>
<td>wiersz 2 - kolumna 1</td>
<td>wiersz 2 - kolumna 2</td>
<td>wiersz 2 - kolumna 3</td>
</tr>
<tr>
<td>wiersz 3 - kolumna 1</td>
<td>wiersz 3 - kolumna 2</td>
<td>wiersz 3 - kolumna 3</td>
</tr>
</tbody>
</table>
Tabela 1
nagłówek 1nagłówek 2nagłówek 3
stopka 1 stopka 2 stopka 3
wiersz 1 - kolumna 1 wiersz 1 - kolumna 2 wiersz 1 - kolumna 3
wiersz 2 - kolumna 1 wiersz 2 - kolumna 2 wiersz 2 - kolumna 3
wiersz 3 - kolumna 1 wiersz 3 - kolumna 2 wiersz 3 - kolumna 3

Zauważmy, że deklaracja stopki następuje zaraz po deklaracji nagłówka a nie po deklaracji body.

łączenie komórek

Kolejną sprawą, którą przećwiczymy będzie łączenie łączenie komórek w poziomie i w pionie.
Do połączenia komórek w kilku kolumnach używamy parametru colspan="n" w znaczniku <td>. n - oznacza ilość połączonych komórek. W naszym przykładzie w każdym wierszu mieliśmy deklaracje 3 komórek. 3x <td>. Jeśli połączymy 2 komórki to musimy zmniejszyć ilość deklarowanych komórek, bo jedna z nich jest szersza i zastąpuje miejsce kolejnych.
Do łączenie kilku komórek w jednej kolumnie (pionowo) używamy z kolei parametru rowspan="n". Tu również musimy pamiętać, że jeśli komórki łączą się w pionie, to w niższych wierszach nie delkarujemy już komórki, która została połączona.
Najlepiej wyjaśnią to przykłady:

<table border="1">
<caption>Tabela 1</caption>
<thead>
<tr>
<th>nagłówek 1</th>
<th>nagłówek 2</th>
<th>nagłówek 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>stopka 1</td>
<td>stopka 2</td>
<td>stopka 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>wiersz 1 - kolumna 1</td>
<td>wiersz 1 - kolumna 2</td>
<td rowspan="2">wiersz 1,2 - kolumna 3</td>
</tr>
<tr>
<td>wiersz 2 - kolumna 1</td>
<td>wiersz 2 - kolumna 2</td>
</tr>
<tr>
<td colspan="2">wiersz 3 - kolumna 1 i 2</td>
<td>wiersz 3 - kolumna 3</td>
</tr>
</tbody>
</table>
Tabela 1
nagłówek 1nagłówek 2nagłówek 3
stopka 1 stopka 2 stopka 3
wiersz 1 - kolumna 1 wiersz 1 - kolumna 2 wiersz 1,2 - kolumna 3
wiersz 2 - kolumna 1 wiersz 2 - kolumna 2
wiersz 3 - kolumna 1 i 2 wiersz 3 - kolumna 3

Połączone komórki zostały wyróżnione żółtym opisem

Parametry znaczników

Ponieważ HTML 4.01 i XHTML 1.0 Strict dopuszczają pewne parametry znaczników tabel, które są normalnie zdeprecjonowane na końcu tej lekcji opiszę, które parametry możemy stosować przy poszczególnych znacznikach:

Znacznik <table>
border="n" - określa grubość ramki w pikselach
cellpadding="n" - Określa margines pomiędzy krawędzią komórki i jej zawartością
cellspacing="n" - Określa odstęp pomiędzy komórkami
frame="?" - Określa które krawędzie zewnętrzne tabeli będą widoczne.
void - brak zewnętrznego obramowania tabeli;
above - tylko górna krawędź;
below - tylko dolna krawędź;
hsides - górna i dolna krawędź;
lhs - tylko lewa krawędź;
rhs - tylko prawa krawędź;
vsides - lewa i prawa krawędź + krawędzie komórek;
box - wszystkie krawędzie;
border - wszystkie krawędzie.
Uwaga: Aby jakiekolwiek obramowania były widoczne, atrybut border musi być ustawiony na niezerową wartość.
Uwaga: Do kontroli sposobu wyświetlania krawędzi komórek służy atrybut rules.
rules="?" - Określa które krawędzie komórek będą widoczne. Dozwolone wartości to:
none - brak krawędzi komórek;
groups - linie rozdzielające grupy wierszy (zdefiniowane za pomocą znaczników <thead>, <tfoot> i <tbody>) i grupy kolumn (zdefiniowane za pomocą znacznika <colgroup>);
rows - tylko linie rozdzielające wiersze;
cols - tylko linie rozdzielające kolumny;
all - wszystkie krawędzie.
Uwaga: Aby jakiekolwiek obramowania były widoczne, atrybut border musi być ustawiony na niezerową wartość.

Znaczniki <tfoot>,<thead>,<tbody>,<tr>
align="?" - Określa wyrównanie zawartości komórek tabeli lub elementów blokowych w poziomie. Dozwolone wartości to:
left - wyrównanie do lewej strony;
right - wyrównanie do prawej strony;
center - wyrównanie do środka;
justify - justowanie (wyrównanie do lewej i prawej strony);
char - (tylko komórki tabeli) wyrównanie względem podanego znaku (użyj atrybutu char aby go określić).
char - Znak względem którego zawartość komórek tabeli ma być wyrównana (użyj razem z align="char")
charoff - Dodatkowe przesunięcie wyrównania do pierwszego znaku względem którego jest wyrównanie, w pikselach lub procentach
valign="?" - Określa wyrównanie zawartości komórek tabeli w pionie. Dozwolone wartości to:
top - wyrównanie do góry komórki;
middle - wyrównanie do środka komórki;
bottom - wyrównanie do dołu komórki;
baseline - wyrównanie względem linii bazowej

Znaczniki <col>,<colgroup> dopuszczają użycie parametrów align, char, charoff i valign oraz dodatkowo:
width="n" - szerokość kolumny w pikselach

Znaczniki <th>,<td> dopuszczają użycie parametrów align, char, charoff i valign oraz dodatkowo:
scope="?" - Określa że ta komórka zawiera informacje nagłówkowe dla innych komórek. Wartość tego atrybutu specyfikuje dla których komórek ta informacja jest przeznaczona:
col - dla pozostałych komórek w kolumnie;
colgroup - dla pozostałych komórek w grupie kolumn;
row - dla pozostałych komórek w wierszu;
rowgroup - dla pozostałych komórek w grupie wierszy.
colspan - Określa ile kolejnych komórek w wierszu powinno zostać połączone w jedną
rowspan - Określa ile kolejnych komórek w kolumnie powinno zostać połączone w jedną

reveal-a

reveal-a

×

reveal-b

reveal-b

×

reveal-c

reveal-c

×