Tabele HTML

Włodzimierz Gajda

1. Struktura tabeli HTML

Tabela HTML składa się z wierszy podzielonych na komórki. Całą tabelę otaczamy znacznikami <TABLE> oraz </TABLE>, wewnątrz umieszczając wiersze. Do definiowania wierszy stosujemy znaczniki <TR> i </TR>. Nazwa znacznika TR jest skrótem Table Row - wiersz tabeli. Komórki umieszczamy pomiędzy <TD> oraz </TD> (ang. Table Data - dane tabeli). Przystąpmy do wykonania pierwszej tabeli.

1.1 Ćwiczenie 1

Wykonaj tabelę widoczną na rysunku 1.

Rysunek 1. Tabela 2×2

Tabela ta składa się z dwóch wierszy oraz dwóch kolumn. Po umieszczeniu w treści strony (tj. pomiędzy znacznikami BODY) znaczników TABLE przechodzimy do ustalenia zawartości tabeli. Znacznikami TR definiujemy pierwszy wiersz, w którym umieszczamy dwie komórki. Komórki otaczamy znacznikami <TD> oraz </TD>. W treści komórek wprowadzamy litery A oraz B. Poniżej pierwszego wiersza (tj. pod znacznikiem </TR>, ale przed znacznikiem </TABLE>) umieszczamy kod drugiego wiersza tabeli. Kod drugiego wiersza różni się jedynie zawartością komórek TD. Oto kod, jaki powinniśmy otrzymać:

<TABLE border="1">

<TR>

<TD>A</TD>

<TD>B</TD>

</TR>

<TR>

<TD>C</TD>

<TD>D</TD>

</TR>

</TABLE>

Zauważmy, że znacznik otwierający tabelę posiada atrybut border="1". Atrybut ten włącza widoczność krawędzi tabeli. Jest on wygodny do sprawdzania poprawności kodu HTML. Włączając widoczność wszystkich krawędzi tabeli, widzimy czy komórki tworzą zaplanowany przez nas układ.

Korzystając z programu NotH należy zapamiętać skróty podane w tabeli 1.

lp.	Element	Kod HTML	Skrót	Zapis skrótu
1.	Tabela	<TABLE></TABLE>	Ctrl+W+T	^WT
2.	Wiersz tabeli	<TR></TR>	Ctrl+W+R	^WR
3.	Komórka tabeli	<TD></TD>	Ctrl+W+D	^WD
4.	Komórka nagłówkowa	<TH></TH>	Ctrl+W+H	^WH
5.	Podpis tabeli	<CAPTION></CAPTION>	Ctrl+W+C	^WC

Tabela 1. Podstawowe elementy HTML dotyczące tabel i ich skróty w programie NotH

1.2 Ćwiczenie 2

Wykonaj tabelę o trzech wierszach i jednej kolumnie (3×1). W komórkach umieść litery X, Y, Z.

Rysunek 2. Tabela 3×1

Ponieważ tabela ma zawierać trzy wiersze, zatem musimy trzykrotnie użyć elementu TR. Każdy wiersz zawiera jedną komórkę, więc wewnątrz elementów TR umieszczamy po jednym elemencie TD. Oto wynikowy kod:

<TABLE border="1">

<TR><TD>X</TD></TR>

<TR><TD>Y</TD></TR>

<TR><TD>Z</TD></TR>

</TABLE>

1.3 Ćwiczenie 3

Wykonaj tabelę o dwóch wierszach i pięciu kolumnach (2×5). W komórkach umieść kolejne liczby naturalne.

Rysunek 3. Tabela 2×5

Wewnątrz elementu TABLE umieszczamy dwa elementy TR. Każdy z wierszy zawiera pięć elementów TD:

<TABLE border="1">

<TR>

<TD>1</TD>

<TD>2</TD>

<TD>3</TD>

<TD>4</TD>

<TD>5</TD>

</TR>

<TR>

<TD>6</TD>

<TD>7</TD>

<TD>8</TD>

<TD>9</TD>

<TD>10</TD>

</TR>

</TABLE>

Wspomniany atrybut border uwidacznia krawędzie tabeli. Dzięki temu możemy stwierdzić, czy tworzona tabela jest zgodna z oczekiwaniami. Jednakże format krawędzi pozostawia wiele do życzenia. Przejdźmy zatem do ustalenia stylów, nadających odpowiedni format krawędziom.