Przejdź do treści

Centrum Kształcenia Zawodowego i Ustawicznego w Mrągowie

Znaczniki związane z tabelą

piątek,

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.

ElementZnaczenie elementu
<table>tabela
<caption>tytuł tabeli
<thead>nagłówek tabeli
<tbody>główna część tabeli
<tfoot>stopka tabeli
<tr>wiersz tabeli
<th>nagłówek tabeli
<td>komórka tabeli
<col>kolumna tabeli
<colgroup>grupa kolumn

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%;}
Artykuł: Funkcjonowanie jednostek oświaty

Funkcjonowanie jednostek oświaty

Artykuł: Kontrola poprawności danych

Kontrola poprawności danych

Artykuł: Usprawnienie obsługi danych z&nbsp;formularza

Usprawnienie obsługi danych z formularza

Artykuł: PHP: Tablice wielowymiarowe

PHP: Tablice wielowymiarowe

Artykuł: Raspberry Pi

Raspberry Pi

Artykuł: Wacław Iwaszkiewicz

Wacław Iwaszkiewicz

Nasze technikum

Szkoły dla dorosłych

Pełna oferta edukacyjna