Budowa tabel w HTML (+CSS)

Tabele (ang. table) są jednym z podstawowych znaczników w języku HTML. Przed wejściem stron RWD tabele HTML były najczęściej spotykanym obiektem na stronie.

Tabele <table> na stronach internetowych (HTML)

Jeszcze kilkanaście lat temu to właśnie na tabelach głównie budowało się strony internetowe. W dalszym ciągu dobrze pamiętam jak to w tedy wyglądało. Dziś na nasze szczęście lub nieszczęście jak kto woli wygląda to zupełnie inaczej. Tabele w dużym stopniu zostały bowiem wyparte przez inne elementy HTML talie jak <div> (a poprawne umiejscowienie ich zawdzięczamy CSS).

Tabele to elementy będące dobrym przykładem struktur 2D.

Przykładowa tabela na stronie (HTML)

Chyba nie muszę nikomu pokazywać jak wygląda zwykła tabelka na stronie. Kod przykładowej tabeli może wyglądać może tak:

<table>
<tr>
        <th>Nagłówek</th> <td>Nagłówek</th>
</tr>
<tr>
 <td>1 / 1</td> <td>1 / 2</td>
</tr>
<tr>
 <td>2 / 1</td> <td>2 / 2</td>
</tr>
</table>

Powyższa tabela ma nagłówek, 2 wiersze oraz 2 kolumny.

No dobrze skoro już wiemy jak wygląda od strony kodowej prosta tabela pora, żeby poznać co oznacza i do czego służy dany element.

Jak zbudować tabelę <table> w HTML?

Otwarcie i zamknięcie tabelki

Tabelę zaczynamy tworzyć z pomocą znacznika <table> a zamykamy z pomocą </table>

<table></table>

Nagłówek tabeli / kolumny

Do tworzenia nagłówków tabeli wykorzystujemy  znacznik <th>. Jego działanie jest analogiczne do <tr>. Z jego pomocą możemy oznaczyć nagłówek tabeli.

<th></th>

Dodawanie nowego wiersza do tabeli (row)

Jak już zapewne zauważyliście tabele ustawiamy głównie z pomocą wierszy. To właśnie w nich umieszczamy bowiem interesujące nas grupy danych. Każdy nowy wiersz musi znajdować się między znacznikami:

<tr></tr>

Dodawanie nowej komórki w wierszu

Komórki to pojedyncze elementy, które dodajemy w naszej tabli. Jeżeli tabele będzie miała 6 komórek przełoży się to na 6 kolumn.

<td>...</td>

Jeszcze kilka lat temu table stanowiły bardzo istotną część stron internetowych. Wykorzystywano je bowiem do budowy struktur. Czyli np. nagłówek to jeden wiersz, footer (stópka) kolejny.

Inne elementy, z których zbudowana jest <table> HTML

To co opisałam powyżej to najprostsza forma tabeli. W skład tabeli może jeszcze wchodzić:

Element <tbody> będący „wewnętrznym kontenerem” dla wierszy.

<tbody></tbody>

Czy np.

Odmienne znaczniki dla komórek znajdujących się w „nagłówku” tabeli. Element ten otwieramy jak zwykły wiersz, ale kolejne komórki będą zamiast <td> oznaczane jako <th>

<th></th>

---

Jak ustawić szerokość kolumn w tabeli?

Aby nadać kolumną określoną szerokość trzeba ją przypisać konkretnym komórką. Wystarczy na szczęście dodać to ustawienie jedynie w jednym rzędzie.

<table border="1" width="90%">
<tr>
 <td width="35%">...</td> <td width="55%">...</td>
</tr>
<tr>
 <td>...</td> <td>...</td>
</tr>
</table>

…	…
…	…

Jak połączyć komórki w pionie, kolumny w tabeli HTML? – colspan

Z pomocą właściwości HTML colspan możemy połączyć ze sobą komórki znajdujące się obok siebie w wierszu.

<table border="1" width="90%">
<tr>
 <td width="45%">...</td> <td width="55%" colspan="2">...</td>
</tr>
<tr>
 <td>...</td> <td>...</td> <td>...</td>
</tr>
</table>

…	…
…	…	…

---

Jak połączyć ze sobą komórek w kolumnie? – rowspan

Tym razem połączymy ze sobą pola znajdujące się w tej samej kolumnie.

<table border="1" width="90%">
<tr>
 <td width="45%">...</td> <td width="55%" rowspan="2">...</td>
</tr>
<tr>
 <td>...</td> 
</tr>
</table>

…	…
…

---

Jak zmienić wygląd tabeli?

Tabele jest obiektem typu HTML częściowych zmian można więc w niej dokonać z jego pomocą. W większości przypadków się jednak od tego odchodzi i do oscylacji wykorzystuje się CSS.

Przykładowa zmiana z CSS:

table, td{
border: 1px solid #ededed;
}

Powyższy ustawianie obramowanie do komórek. W analogiczny sposób możemy zmienić w kolor tła tabeli lub tylko komórek lub komórki.

Oczywiście wygląd tabeli należy dostosować indywidualnie do strony internetowej.

Przydatne informacje: