|

Budowa prostych tabel na stronę internetową w HTML table, tr, th, td

przezAurelia Sypniewska
Czas czytania: 2 minut

Tabele 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.

Struktura prostej tabeli na stronie internetowej

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.

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>

Nowy wiersz

Każdy nowy wiersz musi znajdować się między znacznikami:

<tr></tr>

Komórka 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.

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>

Ciekawe funkcje tabel:

Nadanie szerokości komórką

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

Połączenie komórek – 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>
……
………

Połączenie 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: