HTML - Budowa tabeli i jej proste formatowanie - Art Sin WebDesign

Podstawowa struktura tabeli w języku HTML

<table>
<tr>
	<td>...</td>	<td>...</td>
</tr>
<tr>
	<td>...</td>	<td>...</td>
</tr>
</table>

Jest to najprostsza tabela, gdzie:

<table>...</table>: jest znacznikiem tabeli
<tr>...</tr>: jest znacznikiem wiersza
<td>...</td>: jest znacznikiem pojedynczej komórki; W miejsce kropek należy wpisać treść poszczególnych komórek tabeli.

Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i dwóch wierszy (razem cztery komórki). Jeśli to konieczne, możliwe jest dodanie nowych kolumn (poprzez wpisanie dodatkowych znaczników <td>...</td>) lub wierszy (znaczniki <tr>...</tr>). Należy przy tym zauważyć, że komórki tabeli (<td>...</td>) znajdują się wewnątrz znacznków wierszy (<tr>...</tr>)! Liczba komórek w każdym wierszu powinna być taka sama.

Definicja czcionki w tabeli

Uwaga – Będzie trochę CSS :).

<style type="text/css">
/* <![CDATA[ */
td { font-size: wielkośćpx; color: kolor; font-family: rodzaj }
/* ]]> */
</style>

Powyższy tekst wstawianie w nagłówku strony. Sprawi on iż iż podane parametry będą się odnosiły do całego tekstu zawartego w tabeli.

Obramowanie tabeli

<table border="x">...</table>

Marginesy w komórkach – pionowe i poziome

<table border="1" cellpadding="x">...</table>

Komenda wprowadza dodatkowe marginesy (poziome i pionowe) we wszystkich komórkach tabeli, przez co wygląda ona bardziej estetycznie

Ostępy między komórkami

<table border="1" cellspacing="x">...</table>

Znacznik ten umożliwia wprowadzenie dodatkowych odstępów pomiędzy wszystkimi sąsiadującymi komórkami tabeli.

Nagłówki tabeli

POZIOMY
<table>
<tr>
	<th>...</th>	<th>...</th>
</tr>
<tr>
	<td>...</td>	<td>...</td>
</tr>
<tr>
	<td>...</td>	<td>...</td>
</tr>
</table>

PIONOWY
<table>
<tr>
	<th>...</th>	<td>...</td>	<td>...</td>
</tr>
<tr>
	<th>...</th>	<td>...</td>	<td>...</td>
</tr>
</table>

MIESZANY
<table>
<tr>
	<th></th>	<th>...</th>	<th>...</th>
</tr>
<tr>
	<th>...</th>	<td>...</td>	<td>...</td>
</tr>
<tr>
	<th>...</th>	<td>...</td>	<td>...</td>
</tr>
</table>

Komórkę nagłówkową <th>...</th> wstawia się tak samo jak zwykłą komórka tabeli <td>...</td>. Różni się jedynie tym, że tekst do niej wpisany, jest napisany zwykle czcionką pogrubioną oraz ustawiony na środku (wyśrodkowany).

Chociaż identyczny efekt wizualny można uzyskać odpowiednio zmieniając wygląd zwykłych komórek tabeli (<td align="center"><b>...</b></td>), to absolutnie taka metoda nie jest zalecana. Komórki nagłówkowe <th>...</th>oprócz efektu wizualnego niosą ze sobą ważne znaczenie semantyczne.

Przykład:

	NAG 1	NAG 2
NAG LEWY 1	TRES 1	TRESC 2
NAG LEWY 2	TRESC 3	TRESC 4

Tytuł tabeli

<table>
<caption align="ustawienie">Tu podaj tytuł</caption>
(...)
</table>

gdzie jako „ustawienie” należy podać:

„top” – tytuł górny (domyślnie)
„bottom” – tytuł dolny
„left” – ustawienie przy lewej krawędzi tabeli
„right” – przy prawej krawędzi
„center” – na środku

Wymiary tabeli

<table width="x" height="y">...</table>

Wymiary pojedynczej komórki

<table>
<tr>
	<td width="x" height="y">...</td>
</tr>
</table>

Wymiary tabeli i komórki można podać w wartościach bezwzględnych lub w wartości procentowej elementu nadrzędnego.

Wyrównanie tabeli

<table align="rodzaj">...</table>

gdzie jako „rodzaj” należy wpisać:

„left” – wyrównanie tabeli do lewej strony (domyślnie), względem otaczającego tekstu
„right” – wyrównanie tabeli do prawej strony, względem otaczającego tekstu
„center” – wyśrodkowanie tabeli

W przypadku „align” zaleca się używać stylów w celu uzyskania tego samego efektu.

Wyrównanie zawartości wiersza

<table>
<tr align="rodzaj" valign="ustawienie">...</tr>
</table>

Wyrównanie zawartości pojedynczej komórki

<table>
<tr>
	<td align="rodzaj" valign="ustawienie">...</td>
</tr>
</table>

Blokada zawijania tekstu

<table>
<tr>
	<td nowrap="nowrap">...</td>
</tr>
</table>

Zaleca się jednak używania stylów.

Poziome łączenie komórek

<table>
<tr>
	<td colspan="x">...</td>
</tr>
</table>

gdzie „x” oznacza liczbę komórek do połączenia w poziomie.

Pionowe łączenie komórek

<table>
<tr>
	<td rowspan="y">...</td>
</tr>
</table>

gdzie „x” oznacza liczbę komórek do połączenia w poziomie.

Grupowanie wierszy

<table>
<tbody>
	<tr>...</tr>
</tbody>
</table>

Dla tabel często również podaje się tzw. nagłówek i stopkę. Nagłówek pojawi się na szczycie tabeli, a stopka – na dole. Nagłówek tworzymy, przy użyciu: <thead>...</thead>, natomiast stopkę: <tfoot>...</tfoot>:

W tebeli powinien znajdować się tylko jeden nagłówek i jedna stopka, natomiast można tam umieścić dowolną ilość znaczników <tbody>...</tbody> (pozwala to usnąć wewnętrzne krawędzie w grupach).

Łączenie kolumn w grupy

<table>
<colgroup span="x"></colgroup>
<tr>...</tr>
</table>

gdzie „x” oznacza ilość kolumn do połączenia w grupę. Jeśli całkowicie pominiemy atrybut span="...", przyjmie on domyślną wartość „1„.

Łączenie kolumn w grupy umożliwia później odnoszenie się do takiej grupy jako do całości

Obramowanie zewnętrzne tabeli

<table border="1" frame="typ">...</table>

gdzie jako „typ” należy podać:

„void” – usuwa zewnętrzne obramowanie
„above” – tylko górna krawędź
„below” – tylko dolna krawędź
„lhs” – tylko lewa krawędź
„rhs” – tylko prawa krawędź
„hsides” – tylko poziome krawędzie
„vsides” – tylko pionowe krawędzie
„box” – wszystkie krawędzie zewnętrzne (domyślnie)

Obramowanie wewnętrzne tabeli (krawędzie komórek)

<table border="1" rules="typ">...</table>