O ile formatowanie tekstu w języku HTML jest dość proste, to na stworzenie tabeli trzeba użyć trochę więcej znaczników żeby ją wygenerować. W edytorze tekstu wystarczy jedno kliknięcie, natomiast zaprogramowanie jej w HTML, trwa trochę dłużej.
Jeśli chcesz stworzyć najzwyklejszą tabelę, potrzebujesz trzech znaczników:
<table> - utworzenie tabeli
<tr> - wstawia wiersz tabeli
<td> - wstawia kolumnę tabeli
I teraz spróbujmy stworzyć za ich pomocą, tabelę z trzema kolumnami i trzema wierszami. Kod w HTML będzie wyglądał następująco:
<table border="1">
<tr>
<td>Kolumna 1</td>
<td>Kolumna 2</td>
<td>Kolumna 3</td>
</tr>
<tr>
<td>Wartość 1</td>
<td>Wartość 2</td>
<td>Wartość 3</td>
</tr>
<tr>
<td>Wartość 4</td>
<td>Wartość 5</td>
<td>Wartość 6</td>
</tr>
</table>
A wynik kodu będzie taki:
|
Kolumna 1 |
Kolumna 2 |
Kolumna 3 |
|
Wartość 1 |
Wartość 2 |
Wartość 3 |
|
Wartość 4 |
Wartość 5 |
Wartość 6 |
Jeszcze dla czytelności, można by wyróżnić część nagłówkową tabeli, dając w pierwszym wierszu znaczniki <th> zamiast <td>
<th>Kolumna 1</th>
<th>Kolumna 2</th>
<th>Kolumna 3</th>
I efekt będzie taki, że pierwszy wiersz (nagłówkowy), będzie się wyróżniał od reszty tabeli:
|
Kolumna 1 |
Kolumna 2 |
Kolumna 3 |
|
Wartość 1 |
Wartość 2 |
Wartość 3 |
|
Wartość 4 |
Wartość 5 |
Wartość 6 |
Warto tutaj wrócić do pierwszego listingu, i zwrócić uwagę na znacznik <table>, znajduje się w nim dodatkowy parametr
border="1"
Oznacza on grubość obramowania tabeli. Im większa wartość, tym obramowanie będzie grubsze. Jeśli parametr border byłby ustawiony na 0 (zero), to tabela nie miała by w ogóle obramowania.
Oczywiście to jest tylko przykład, który ma Ci uzmysłowić, że takich parametrów jest więcej dla każdego ww. znaczników. Dzięki nim można ustawiać w tabelach odstępy liter od krawędzi, kolorów podświetlenia komórek, itp. Powyższe tabele są tylko w wersji podstawowej, żeby pokazać jak można je stworzyć w HTMLu.
