Tabele#

Obramowanie tabeli#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<table border="x">...</table>

gdzie "x" oznacza grubość zewnętrznej ramki tabeli (w pikselach). Podanie wartości 0 spowoduje nie wyświetlenie obramowania, natomiast w przypadku gdy zadeklarujemy wartość np. 6, to obramowanie będzie miało szerokość 6px.

Polecenie dodaje obramowanie pomiędzy komórkami tabeli, czyli pionowe i poziome linie dzielące poszczególne wiersze i kolumny. Pozwala także określić szerokość zewnętrznej części tego obramowania. Domyślnie (bez dodatkowych poleceń) tabele pozbawione są efektów wizualnych:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<table>
	<tr>
		<td>komórka1</td>
		<td>komórka2</td>
		<td>komórka3</td>
	</tr>
	<tr>
		<td>komórka4</td>
		<td>komórka5</td>
		<td>komórka6</td>
	</tr>
	<tr>
		<td>komórka7</td>
		<td>komórka8</td>
		<td>komórka9</td>
	</tr>
</table>

Efekt:

komórka1komórka2komórka3
komórka4komórka5komórka6
komórka7komórka8komórka9

W przypadku rozbudowanych tabel forma taka nie jest czytelna, dlatego tabele należy odpowiednio ostylować. Najprostszym sposobem zwiększającym czytelność jest dodanie obramowania:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<table border="6">
	<tr>
		<td>komórka1</td>
		<td>komórka2</td>
		<td>komórka3</td>
	</tr>
	<tr>
		<td>komórka4</td>
		<td>komórka5</td>
		<td>komórka6</td>
	</tr>
	<tr>
		<td>komórka7</td>
		<td>komórka8</td>
		<td>komórka9</td>
	</tr>
</table>

Efekt:

komórka1komórka2komórka3
komórka4komórka5komórka6
komórka7komórka8komórka9

Wygląd obramowania tabeli może być nieco odmienny w poszczególnych przeglądarkach internetowych.

Wstawienie samych wierszy (tr) nie spowoduje wyświetlenia tabeli, trzeba je wypełnić jeszcze komórkami (td, th). W niektórych przeglądarkach np. (IE), żeby komórki nie posiadające wypełnienia były widoczne należy dodatkowo uzupełnić je twardą spacją (&nbsp;). W nowoczesnych przeglądarkach obramowanie pustej komórki zostaje wyświetlone bez dodatkowych manewrów:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<table border="6">
	<tr>
		<td></td>
		<td>komórka2</td>
		<td>komórka3</td>
	</tr>
	<tr>
		<td>komórka4</td>
		<td>komórka5</td>
		<td>komórka6</td>
	</tr>
	<tr>
		<td>komórka7</td>
		<td>komórka8</td>
		<td>komórka9</td>
	</tr>
</table>

Efekt:

komórka2komórka3
komórka4komórka5komórka6
komórka7komórka8komórka9
Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Tabele (H1) Obramowanie tabeli (H2)