STIOPA I LINUX

Kurs HTML - Tabele <table height> Quirks Mode

(Poniższy text jest lekko zmodyfikowaną wersją oryginału zmieszczonego na hg.pl w roku 2000)

<table height> i Quirks Mode -- Tworzenie tabeli -- Parametry tabeli -- Nagłówek tabeli oraz tagi <tr> <td> -- Przykłady i uwagi

<table height> i Quirks Mode

Zanim przeczytasz resztę tej strony, której treść jest w większości archaiczna i nieaktualna przedstawię sposób użycia jak najbardziej nieprawomyślnego atrybutu height w tagu <table>.

Poniższy chwyt może mieć zastosowanie gdy strona zawiera niewiele treści, którą ze względów estetycznych chciał(a)byś umieścić w centrum okna przeglądarki.

Począwszy od wersji 4.0 HTML atrybut height nie występuje. Wpisanie go to tagu table nie daje żadnych rezultatów przy prawidłowo zadeklarowanym typie dokumentu <!DOCTYPE, atrybut jest najzwyczajniej ignorowany. Aby temu zapobiec należy wprowadzić przeglądarkę w tryb Quirks (Quirks Mode). W tym celu z deklaracji <!DOCTYPE trzeba usunąć URL deklarowanego dtd -> "http://www.w3.org/TR/xhtml1/DTD/html40-transitional.dtd". W efekcie tego kod strony powinien wyglądać mniej więcej:

<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
   </head>
   <body>
   
   <table width="100%" height="95%">
  <tbody>
    <tr>
      <td><table align="center">
<tr>
<td align="center">NAPIS MAJĄCY WISIEĆ W SAMYM ŚRODKU OKNA PRZEGLĄDARKI</td>
</tr>
</table></td>
    </tr>
  </tbody>
</table>
   
   </body>
</html>

Rezultat powyższego możesz obejrzeć klikając centrowanie pionowe za pomocą height.

Więcej o Quirks Mode znajdziesz na stronie Browsehappy

Tworzenie tabeli

Najprostszą tabelę tworzy się:
<table> <tr> <td> Zawartość komórki</td><td> Zawartość komórki</td> </tr> <tr> <td> Zawartość komórki</td> <td> Zawartość komórki</td> </tr> <table>

Efektem tego kodu jest:

Zawartość komórki	Zawartość komórki
Zawartość komórki	Zawartość komórki

Do góry

Parametry tabeli

Dla każdej tabeli możliwe jest zadeklarowanie:
bgcolor - koloru tła,
background - rysunku tła,
width="x" - tabela o szerokości x pikseli lub width="x%" - tabela o szerokości x% wielkości okna przeglądarki (nieaktualne jeżeli elementy wyświetlane w komórkach będą łącznie posiadać większą szerokość),
height= - (POLECENIE PRZESTARZAŁE) wysokość tabeli w pikselach lub procentach (nieaktualne jeżeli elementy wyświetlane w komórkach będą łącznie posiadać większą wysokość),
cellpadding="x" - odległość w pikselach między brzegiem a zawartością komórki,
cellspacing="n" - odstęp w pikselach między komórkami tabeli,
border="n" - ramka tabeli o szerokości n pikseli,
bordercolor="kolor" - kolor ramki wokół tabeli,
bordercolordark="kolor" - ramka z prawej i na dole tabeli mieć będzie kolor,
bordercolorlight="kolor" - ramka z lewej i na górze w kolorze,
align="położenie" - określa położenie tabeli względem sąsiadujących z nią elementów,
style="parametry" - lokalny arkusz stylów CSS,
class="klasa" - klasa CSS zdefiniowana pomiędzy znacznikami <style></style> lub importowana z zewnętrznego arkusza CSS,
id="identyfikator" - identyfikator tabeli.

Do góry

Nagłówek tabeli oraz tagi <tr></tr> i <td></td>

Tabeli przy użyciu tagów <caption></caption> nadaje się atrybuty nagłówkowi tabeli.

Znaczniki <tr></tr> tworzą wiersze tabeli. Między nimi umieszcza się komórki tabeli zamykając je pomiędzy <td></td>.

Poszczególnym komórkom tabeli w znaczniku <td> można nadać takie wartości jak:
bgcolor=kolor - kolor tła,
background=pliktła - tło rysunkowe,
width="szerokość",
height="wysokość",
class="zdefiniowana_klasa",
id="identyfikator" - używany podobne do parametru name,
align="left, right, center, justify", Wyrównanie zawartości komórki w poziomie
valign="top, midlle lub bottom" - wyrównanie zawartości komórki w pionie,
colspan="x" - definicja obejmuje x kolumn tabeli,
rowspan="x" - definicja obejmuje x wierszy tabeli.

Do góry

Przykłady i uwagi

Oto kod dający w efekcie zamieszczoną poniżej niego tabelę:

<table border="2" cellpadding="3" cellspacing="3" width="500" bordercolor="#0000FF" height="150" bordercolorlight="#00FFFF" bordercolordark="#000080" bgcolor="#FFFFFF" align="center"> <caption> <p class="centra">TABELA PRZYKŁADOWA</caption> <tr> <td width="33%"> Ta komórka nie jest oddzielnie formatowana</td> <td class="przypis" colspan="2" valign="top" align="center">W tej komórce zastosowano klasę zdefiniowaną w arkuszu stylów zawartość komórki wyrównano w pionie poprzez valign=top,poszerzono definicję komórki na sąsiednią kolumnę a całość komórki wycentrowano</td> </tr> <tr> <td width="33%" bgcolor="#0000FF" rowspan="2" style="font-size: 10pt; color: #FFFFFF; font-weight: bold">Tej komórce nadano z kolei niebieskie tło, ponadto zdefiniowano styl czcionki. Rozszerzono ją także na dolny wiersz.</td> <td>Ta komórka nie jest oddzielnie formatowana</td> <td>Ta komórka nie jest oddzielnie formatowana</td> </tr> <tr> <td >Ta komórka nie jest oddzielnie formatowana</td> <td background="../images/WB02085_.GIF">Tej komórce nadano tło graficzne</td> </tr> </table>

TABELA PRZYKŁADOWA
Ta komórka nie jest oddzielnie formatowana	W tej komórce zastosowano klasę zdefiniowaną w arkuszu stylów zawartość komórki wyrównano w pionie poprzez valign=top, poszerzono definicję komórki na sąsiednią kolumnę a całość komórki wycentrowano
Tej komórce nadano z kolei niebieskie tło, ponadto zdefiniowano styl czcionki. Rozszerzono ją także na dolny wiersz.	Ta komórka nie jest oddzielnie formatowana	Ta komórka nie jest oddzielnie formatowana
	Ta komórka nie jest oddzielnie formatowana	Tej komórce nadano tło graficzne

NN nieco inaczej interpretuje niektóre tagi. Ponadto aby NN wyświetlił komórkę musi ona coś zawierać np. niewyświetlany znak   lub <br>. Prócz tego Netscape jest wrażliwy na niedomykanie wierszy (</tr>) komórek - (</td>) oraz tabel (</table>) i nie wyświetla stron zawierających takie błędy lub wyświetla je tylko częściowo!

Do góry

STIOPA I LINUX

Kurs HTML - Tabele <table height> Quirks Mode

Nawigacja:

Uwagi o Javascript

Nagłówek tabeli oraz tagi <tr></tr> i <td></td>

Przykłady i uwagi