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.
<td>wiersz 1 - kolumna 2</td>
<td>wiersz 1 - kolumna 3</td>
<tr>
<td>wiersz 2 - kolumna 2</td>
<td>wiersz 2 - kolumna 3</td>
<tr>
<td>wiersz 3 - kolumna 2</td>
<td>wiersz 3 - kolumna 3</td>
| 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ę
<thead>
<th>nagłówek 2</th>
<th>nagłówek 3</th>
<tfoot>
<td>stopka 2</td>
<td>stopka 3</td>
<td>wiersz 1 - kolumna 2</td>
<td>wiersz 1 - kolumna 3</td>
<tr>
<td>wiersz 2 - kolumna 2</td>
<td>wiersz 2 - kolumna 3</td>
<tr>
<td>wiersz 3 - kolumna 2</td>
<td>wiersz 3 - kolumna 3</td>
| nagłówek 1 | nagłówek 2 | nagłó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:
<thead>
<th>nagłówek 2</th>
<th>nagłówek 3</th>
<tfoot>
<td>stopka 2</td>
<td>stopka 3</td>
<td>wiersz 1 - kolumna 2</td>
<td rowspan="2">wiersz 1,2 - kolumna 3</td>
<tr>
<td>wiersz 2 - kolumna 2</td>
<tr>
<td>wiersz 3 - kolumna 3</td>
| nagłówek 1 | nagłówek 2 | nagłó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
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.
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.
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:
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ć).
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:
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:
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.
rowspan - Określa ile kolejnych komórek w kolumnie powinno zostać połączone w jedną
