Tabela w HTML

Nie wiem, czy wiesz, ale dawniej wiele szablonów stron internetowych opierało się w całości na tabelach.

Nikt za bardzo nie przejmował się responsywnością, bo i nie było po co, skoro nie było jeszcze smartfonów. Piękne czasy.

Niemniej, ciężko byłoby nazwać omawiane wyżej tabele jakimś “reliktem przeszłości”. Choć nadal potrafią być trochę problematyczne, są wykorzystywane do prezentowania wielu rozmaitych danych. Tego rodzaju tabele nietrudno znaleźć na rozmaitych stronach internetowych, czy w panelach administracyjnych. Mnóstwo ludzi wykorzystuje je nadal i nie zanosi się na to, żeby miały one odejść z użytku.

Zaraz po podstawowych znacznikach HTML pozwalających na chociażby zmianę koloru tła, czy formatowania cziconek, moim zdaniem warto nauczyć się tabel. Są one elementem, który może otworzyć spektrum nowych możliwości, a przy tym jest naprawdę prosty w użyciu.

• Całą tabelę umieszczamy pomiędzy znacznikami <table></table>.
• Poszczególne wiersze tworzymy znacznikami <tr></tr>.
• Wewnątrz nich możemy utworzyć poszczególne komórki znacznikami <td></td>

Przykładowa tabela:

Znacznik <style> i jego zawartość są opcjonalne. Dodałem dzięki niemu ramkę, oraz ustawiłem wyśrodkowanie tekstu w CSS, po to by tabele wyglądały bardziej przejrzyście.

[html] <style> td, th { border: 2px solid black; text-align: center; } </style>
<table>
<tr>
<td>Imię ucznia</td><td>Ocena z matematyki</td>
</tr>

<tr>
<td>Marcin</td><td>4</td>
</tr>

<tr>
<td>Ania</td><td>5</td>
</tr>
</table>
[/html]

Imię ucznia	Ocena z matematyki
Marcin	4
Ania	5

Alternatywą dla znaczników <td> są znaczniki <th>. Działają na identycznej zasadzie, jednak “h” odnosi się do słowa “header”. Możemy umieszczać je np. w nagłówkach tabeli. Wyróżniają się one wyglądem, który w razie potrzeby możemy dodatkowo ostylować i odseparować w CSS od klasycznych komórek <td>.

Przykładowa tabela:

[html] <style> td, th { border: 2px solid black; text-align: center; } </style>
<table>
<tr>
<th>Imię ucznia</th><th>Ocena z matematyki</th>
</tr>

<tr>
<td>Marcin</td><td>4</td>
</tr>

<tr>
<td>Ania</td><td>5</td>
</tr>
</table>
[/html]

Imię ucznia	Ocena z matematyki
Marcin	4
Ania	5

Jak widać, komórki <th> zostały automatycznie pogrubione.

Bardzo ciekawy jest także element “colspan”, który pozwala nam na poszerzenie danej komórki.

[html] <style> td, th { border: 2px solid black; text-align: center; } </style>
<table>
<tr>
<th>Imię ucznia</th><th>Ocena z matematyki</th><th>Ocena z historii</th>
</tr>

<tr>
<td>Marcin</td><td colspan="2">4</td>
</tr>

<tr>
<td>Ania</td><td>5</td><td>3</td>
</tr>
</table>
[/html]

Imię ucznia	Ocena z matematyki	Ocena z historii
Marcin	4
Ania	5	3

Analogicznie działa element “rowspan”, który odnosi się nie do komórek, a wierszy tabeli.

[html] <style> td, th { border: 2px solid black; text-align: center; } </style>
<table>
<tr>
<th>Imię ucznia</th><th>Ocena z matematyki</th>
</tr>

<tr>
<td>Marcin</td><td rowspan="2">4</td>
</tr>

<tr>
<td>Ania</td>
</tr>

<tr>
<td>Czesław</td> <td>3</td>
</tr>
</table>
[/html]

Imię ucznia	Ocena z matematyki
Marcin	4
Ania
Czesław	3