piątek, 2020-10-23

Znaczniki związane z tabelą

Tabele są częstą formą prezentowania danych. Ten materiał to zwięzłe podsumowanie informacji o znacznikach związanych z tabelami tworzonymi w języku HTML, wiadomości wstępne znajdziesz w artykule „Wprowadzenie do tabel HTML”.

Język HTML ma dokładnie dziesięć znaczników ściśle związanych z tabelami, oczywiście w obrębie komórek tabeli można korzystać także z innych elementów, np. odnośników, akapitów, tytułów, a nawet, choć jest to niewskazane, z kolejnych tabel. Najprostszą tabelę można wykonać, stosując tylko trzy znaczniki: table, tr, td, które oznaczają odpowiednio tabelę, jej wiersz i komórkę. Dobrym zwyczajem jest korzystanie dodatkowo z nagłówków tabeli w postaci znacznika th. Pozostałe znaczniki mogą być użyteczne, jednak występują dużo rzadziej. Spośród tej grupy najmniej popularne są colgroup oraz col.

W poniższym przykładzie wykorzystano wszystkie znaczniki HTML ściśle związane z tabelą. Zwróć uwagę na znacznik col, który nigdy nie wymaga domknięcia. Znacznik col wykorzystano do zmiany tła kolumny, odpowiednią regułę zamieszczono wyjątkowo w kodzie HTML (wiersz nr 4).

Oferta

Usługa	Cena brutto
Instalacja systemu Windows	120,00 zł
Instalacja sterowników	30,00 zł
Razem	150,00 zł

<table>
	<caption>Oferta</caption>
	<colgroup>
	    <col style="background-color:#f4f4f4;">
	    <col>
  	</colgroup>
	<thead>
	<tr>
		<th>Usługa</th>
		<th>Cena brutto</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Instalacja systemu Windows</td>
		<td>120,00 zł</td>
	</tr>
	<tr>
		<td>Instalacja sterowników</td>
		<td>30,00 zł</td>
	</tr>
	</tbody>
	<tfoot>
	<tr>
		<td>Razem</td>
		<td>150,00 zł</td>
	</tr>
	</tfoot>
</table>

Do tabeli z przykładu dołączono kilka podstawowych deklaracji CSS, więcej informacji o kaskadowych arkuszach stylów dla tabel znajdziesz w materiale „Domyślne style CSS dla tabel”.

table.a1{border-collapse: collapse;width:768px;}
.a1 td, .a1 th{padding: 5px; border: solid 1px #777;width:33%;}