Proste tabele


Proste tabele

Każda tabela składa się z odpowiedniej kombinacji znaczników <table></table>, <tr></tr> oraz <td></td>. Dalej zamieszczam przykład prostej symetrycznej tabeli.

<body>
<table border=“1″>
<tr>
<td>Pierwsza komórka tabeli</td>
<td>Druga komórka tabeli </td>
</tr>
<tr>
<td>Trzecia komórka tabeli</td>
<td>Czwarta komórka tabeli </td>
</tr>
</table>
</body>

Konstrukcja tabeli jest stosunkowo prosta do opanowania, jednak wymaga, by każdy znacznik wprowadzać bardzo uważnie. Mała pomyłka, np. brak domknięcia znacznika, może spowodować błędne wyświetlenie całości.

Znacznik <table></table> określa ogólne ramy tabeli, natomiast za pomocą <tr></tr> wstawiamy jej wiersze. Każdy wiersz to jedna para znaczników <tr></tr>. Przykładowy listing zawiera dwie pary tych znaczników, co oznacza, że tabela ma dwa wiersze. Wewnątrz wiersza znajdują się komórki, które są tworzone za pomocą znacznika <td></td>. Jedna para znaczników odpowiada jednej komórce tabeli. Przykładowa tabela zawiera po dwie komórki w każdym wierszu, co oznacza, że ma ona dwa wiersze, a w każdym z nich dwie komórki. Pamiętaj, że w symetrycznej tabeli w każdym wierszu znajduje się dokładnie tyle samo komórek. Oczywiście nieco później dowiesz się, jak stworzyć tabele niesymetryczne o zróżnicowanej liczbie komórek w każdym wierszu.

Bardzo często przy tworzeniu tabel zdarza się, że jeden wiersz zawiera opis zawartości — nagłówek tabeli. Zazwyczaj chcemy, by ten element wyróżniał się na tle reszty, np. poprzez pogrubioną czcionkę i wyśrodkowany tekst. Na stronie WWW efekt ten można uzyskać, stosując zamiast znacznika <td></td> inny znacznik: <th></th>. Jedyna różnica polega na tym, że zawartość takiej komórki zostanie przedstawiona za pomocą pogrubionej czcionki i wyśrodkowanego tekstu. Stosowanie tego znacznika ma, również znaczenie, gdy chcesz w przyszłości upiększyć tabelę za pomocą kaskadowych arkuszy stylów.

Przy tworzeniu tabel warto korzystać z tzw. wcinania kodu — tak, jak to widać na listingach, gdyż dzięki temu znacznie łatwiej zapanować nad skomplikowanym projektem.

Zwróć uwagę na zawartość znacznika <table>, w którym rozmyślnie umieściłem atrybut border=”l”. Atrybut ten odpowiada za wyświetlanie obramowania tabeli. Jeżeli go nie wpiszesz, tabela będzie miała niewidoczne obramowanie. Brak atrybutu border jest równoznaczny z wpisem border=”0″. Stosowny przykład znajduje się poniżej.

<body>
<table>
<tr>
<td>Pierwsza komórka</td>
<td>Druga komórka</td>
</tr>
<tr>
<td>Trzecia komórka</td>
<td>Czwarta komórka</td>
</tr>
</table>
</body>

tmp3b58-2Na rysunku znajduje się wynik działania obu powyższych listingów.

Tabele widoczne na rysunku automatycznie dopasowują się do swojej zawartości. Jeżeli do tego samego kodu zamiast słów w komórkach wpiszesz dowolny pojedynczy znak, tabela automatycznie dopasuje się do zawartości.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *