Lekcja 10: Tabele

Tabele są używane do przedstawiania "danych tabelarycznych" tzn., informacji logicznie zaprezentowanych w kolumnach i wierszach.

Czy jest to trudne?

Budowanie tabel w HTML może na początku wydawać się skomplikowane ale jeżeli spokojnie i dokładnie przeanalizujesz przykłady, zauważysz ich logikę i prostotę - tak jak wszędzie w języku HTML.

Przykład 1:

<table>
  <tr>
    <td>Komórka 1</td>
    <td>Komórka 2</td>
  </tr>
  <tr>
    <td>Komórka 3</td>
    <td>Komórka 4</td>
  </tr>
</table>

Będzie tak wyglądał w przeglądarce:

Jaka jest różnica między <tr> i <td>?

Jak widzisz, powyższy kod HTML jest prawdopodobnie najbardziej skomplikowany jaki dotychczas przedstawiliśmy. Przeanalizujmy go a wszystko się wyjaśni:

3 różne elementy są używane do wstawiania tabel:

• Znacznik otwierający <table> i zamykający </table> rozpoczyna i kończy definicję tabeli. Logiczne.
• <tr> oznacza "table row" (wiersz tabeli) i rozpoczyna oraz kończy wiersze poziome. Nadal logiczne.
• <td> jest skrótem dla "table data" (dane tabeli). Ten znacznik zaczyna i kończy każdą komórkę w wierszu twojej tabeli. Wszystko proste i logiczne.

Oto co się dzieje w Przykładzie 1: tabeli zaczyna się znacznikiem <table>, następny jest <tr>, który informuje o rozpoczęciu wiersza. Dwie komórki są wstawione w wierszu: <td>Komórka 1</td> i <td>Komórka 2</td>. Wiersz dalej jest zamknięty znacznikiem </tr> i natychmiast za nim <tr> rozpoczyna nowy wiersz. Nowy wiersz także zawiera dwie komórki. Tabela zostaje zamknięta znacznikiem </table>.

Dla jasności: wiersz jest poziomym zbiorem komórek a kolumny to pionowy zbiór komórek:

Komórka 1 i Komórka 2 formują wiersz. Komórka 1 i Komórka 3 formują kolumnę.

W powyższym przykładzie, tabela ma dwa wiersze i dwie kolumny. Jednak, tabeli może posiadać o wiele więcej wierszy i kolumn.

Przykład 2:

<table>
  <tr>
    <td>Komórka 1</td>
    <td>Komórka 2</td>
    <td>Komórka 3</td>
    <td>Komórka 4</td>
  </tr>
  <tr>
    <td>Komórka 5</td>
    <td>Komórka 6</td>
    <td>Komórka 7</td>
    <td>Komórka 8</td>
  </tr>
  <tr>
    <td>Komórka 9</td>
    <td>Komórka 10</td>
    <td>Komórka 11</td>
    <td>Komórka 12</td>
  </tr>
</table>

Będzie tak wyglądał w przeglądarce:

Są jakieś atrybuty?

Oczywiście że są atrybuty. Na przykład, atrybut border określa grubość obramowania wokół tabeli:

Przykład 3:

<table border="1">
  <tr>
    <td>Komórka 1</td>
    <td>Komórka 2</td>
  </tr>
  <tr>
    <td>Komórka 3</td>
    <td>Komórka 4</td>
  </tr>
</table>

Będzie tak wyglądał w przeglądarce:

Grubość obramowania określana jest w pikselach (Patrz lekcja 9)

Tak jak z obrazkami, możesz także ustawić szerokość tabeli w pikselach - lub alternatywnie w procentach ekranu:

Przykład 4:

<table border="1" width="30%">

Przykład będzie pokazany w przeglądarce jako tabela o szerokości 30% ekranu. Sprawdź sam.

Więcej atrybutów?

Jest wiele atrybutów dla tabel. Tutaj są kolejne dwa:

• align: określa poziome położenie zawartości dla całej tabeli, wiersza lub pojedyńczej komórki. Wartości: left (lewo), center (środek) lub right (prawo).
• valign: określa pionowe położenie zawartości w komórkach tabeli. Wartości, top (góra), middle (środek) lub bottom (dół).

Przykład 5:

<td align="right" valign="top">Komórka 1</td>

Co mogę umieścić w moich tabelach?

Teoretycznie, możesz umieścić wszystko w tabelach: tekst, odnośniki i obrazki... ALE przeznaczenie tabel to prezentacja danych tabelarycznych (np. dane które najlepiej są przedstawiane w kolumnach i wierszach) więc unikaj umieszczania elementów w tabelach tylko dlatego że chcesz by były przedstawione obok siebie.

W starych czasach Internetu - tzn. parę lat temu - tabele były często używane jako narzędzie do tworzenia układów graficznych na stronie. Ale jeżeli chcesz kontrolować prezentację tekstu i obrazków jest ciekawszy sposób aby to zrobić (wskazówka: CSS). Ten temat omówimy później.

Teraz, zbierzmy wszystko czego dotychczas się nauczyłeś i poćwiczmy tworzenie tabel o różnych wielkościach i układach. To powinno cię zająć na parę godzin..