Tabele
Bardzo wiele danych wygodnie jest prezentować w formie tabelarycznej, np. różnego rodzaju zestawienia. Z tego powodu w języku HTML wprowadzono zestaw znaczników pozwalających na tworzenie tabel. Jak się okazało później, te znaczniki pozwoliły także na precyzyjne rozmieszczenie poszczególnych elementów na stronie, przez co możliwe stało się tworzenie stron których szata graficzna wykraczała poza to co oferowały pozostałe znaczniki
Lista znaczników dotyczących tabeli:
- table → ramy tabeli
- tr → wiersz tabeli
- td, th → komórka, komórka nagłówka
- caption → podpis tabeli
- col → kolumna i grupa kolumn
- thread, tfoot, tbody → nagłówek, stopka, treść tabeli
Wewnątrz komórek td może być:
- tekst
- elementy wstawione
- elemnety blokowe, np. p, table
Scalanie komórek
<table
border
="1"
> </table>
<td
colspan
="2"
>
Razem</td>
<td
rowspan
="2"
>
Razem</td>
Przykład prostej tabel - spróbuj ją napisać lub wymyślić własną
<table
border
="1"
>
<tr>
<td>
lp</td>
<td>
litera</td>
</tr>
<tr>
<td>
1</td>
<td>
a</td>
</tr>
<tr>
<td>
2</td>
<td>
b</td>
</tr>
</table>
Efekt:
| lp | litera |
| 1 | a |
| 2 | b |
Przykład tabeli scalonej
<table
border
="1"
>
<tr>
<td>
lp<table
border
="1"
>
<tr>
</tr>
<th>
lp.</th>
<th>
Państwo</th>
<th>
Stolica</th>
<tr>
<td>
1.</td>
<td
rowspan
="2"
>
NRD</td>
<td>
Berlin</td>
</tr>
<td>
2.</td>
<td>
Bonn</td>
<tr>
<td>
3.</td>
<td
colspan
="2"
>
Luksemburg</td>
</tr>
</table>
Efekt:
| lp. | Państwo | Stolica |
|---|---|---|
| 1. | NRD | Berlin | 2. | Bonn |
| 3. | Luksemburg | |
Przykład tabeli scalonej - zaawansowana wersja
<table
border
="1"
>
<tr>
<td
colspan
="2"
>
1-1</td>
<td>
1-3</td>
</tr>
<tr>
<td>
2-1</td>
<td
colspan
="2"
rowspan
="2"
>
<table
border
="1"
>
<tr>
<th>
lp.</th>
<th>
Państwo</th>
<th>
Stolica</th>
</tr>
<tr>
<td>
1.</td>
<td
rowspan
="2"
>
NRD</td>
<td>
Berlin</td>
</tr>
<tr>
<td>
2.</td>
<td>
Bonn</td>
</tr>
<tr>
<td>
3.</td>
<td
colspan
="2"
>
Luksemburg</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
3-1</td>
</tr>
<tr>
<td>
4-1</td>
<td>
4-2</td>
<td>
4-3</td>
</tr>
</table>
Efekt:
| 1-1 | 1-3 | ||||||||||||
| 2-1 |
|
||||||||||||
| 3-1 | |||||||||||||
| 4-1 | 4-2 | 4-3 | |||||||||||
Powróć do menu głównego HTML