Artykuł
09/16/2011

Kurs HTML - Tabele

Autor: Rafał Jan Świrk

Opublikowano: 2011-09-09

Nasza strona internetowa może zawierać rozmaite treści. Gdy jest ich dużo, bardzo ważną kwestią jest ich odpowiednie formatowanie. Szybkie wrzucenie całej masy informacji może sprawić, że nasz przekaz okaże się zupełnie nieczytelny. W takich przypadkach niezastąpione okazują się tabele. Na pierwszy rzut oka sprawa okazuje się być bardzo prosta. Jednak jak się za chwilę przekonamy, HTML umożliwia nam w tym zakresie bardzo wiele. Wraz z rozwojem internetu zrezygnowano z niektórych opcji formatowania, udostępnianych przez HTML, na rzecz technologii CSS (ang. Cascading Style Sheets – Kaskadowe Arkusze Stylów). Technologia ta została stworzona tylko w jednym celu, aby ułatwić nam formatowanie poszczególnych elementów na stronie. Obecnie jest ona standardem w tworzeniu stron internetowych.

Po zapoznaniu się z tym artykułem będziesz:

potrafił tworzyć tabelę w HTML,
umiał zmodyfikować wygląd tabeli,
wiedział, jak wykorzystać tabele do rozmieszczania obiektów na stronie,
dowiesz się, jak wykorzystywać style CSS do formatowania tabel.

Implementacja

Podstawowe znaczniki, które służą do tworzenia tabel są następujące:

<table>...</table> – znacznik tabeli, od niego zawsze zaczynamy i na nim kończymy tworzenie tabeli,
<tr>...</tr> – znacznik umożliwiający wstawienie wiersza,
<td>...</td> – znacznik pojedynczej kolumny.

Oczywiście znaczniki można między sobą zagnieżdżać. W praktyce kod prostej tabeli, zawierającej dwie kolumny i dwa wiersze, wygląda następująco:

<html>
  <head>
    <title>Tabele</title>
  </head>
  <body>
    <table border = "1">
      <tr>
          <td>1</td>
          <td>2</td>
      </tr>
      <tr>
          <td>3</td>
          <td>4</td>
      </tr>
    </table>

  </body>
</html>

Rys. 1. Tabela wygenerowana z powyższego kodu.

Podział logiczny tabeli

Język HTML umożliwia nie tylko rysowanie tabel. Daje nam możliwość podzielenia tabeli na kilka sekcji:

nagłówek – znacznik <thead>,
stopkę – znacznik <tfoot>,
treść tabeli, tzw. „ciało” – znacznik <tbody>.

Jeśli chcemy tabeli nadać nazwę, musimy użyć znacznika <caption>, zagnieżdżamy go w znaczniku <table>, wygląda to następująco:

<table>
<caption>Nazwa tabeli</caption>
</table>

Rys. 2. Tabela z nazwą.

Jak widzimy na rysunku drugim, nazwa tabeli została wyświetlona na środku. Oczywiście sami możemy zdecydować, gdzie ona ma się znajdować. Służy do tego parametr align, możemy mu nadać następujące właściwości:

left – wyrównanie do lewej,
right – wyrównanie do prawej,
center – wyśrodkowanie,

Cechą charakterystyczną, przy użyciu opcji align, będzie to, że najprawdopodobniej przeglądarka ją zignoruje i wyświetli tytuł na środku.

Informacja

HTML posiada wiele opcji formatowania tabel, jednak nie zaleca się ich używania. Bardzo często są one ignorowane przez przeglądarki. Rozwiązaniem tej kłopotliwej sytuacji są Kaskadowe Arkusze Stylów (CSS). Zapewniają one dużo większe możliwości i mają wsparcie praktycznie wszystkich nowych przeglądarek internetowych.

Do wyrównania tytułu, do lewej lub prawej strony, użyjemy Kaskadowych Arkuszy Stylów (CSS). Wygląda to następująco:

<table border="1" width="150px">
    <caption style="text-align: right">Nazwa tabeli</caption>
      <tr>
          <td>1</td>
          <td>2</td>
      </tr>
      <tr>
          <td>3</td>
          <td>4</td>
      </tr>
   </table>

Jak widać, w powyższym przykładzie, umieściliśmy w znaczniku opcję style="text-align: right", nadanie jej odpowiednio wartości left, right lub center sprawi, że tytuł pojawi się tam, gdzie chcemy.

Wróćmy do zasadniczej części tego rozdziału. Definicja strony, zawierającej tabelę z nagłówkiem, treścią i stopką, wygląda następująco:

<table border="1">
      <thead>
        <tr>
            <td>To jest nagłówek</td>
        </tr>
      </thead>
      <tfoot>
        <tr>
            <td>To jest stopka</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
     </tbody>
</table>

Rys. 3. Efekt działania powyższego kodu.

Do wstawienia komórki nagłówkowej, zamiast znaczników <td>...</td> możemy użyć <th>...</th>. Efektem ich zastosowania będzie pogrubienie treści nagłówka. Jak widać sekcja stopki znajduje się nad treścią tabeli. Nie jest to wymóg, ale zastosowanie tego układu jest bardzo praktyczne. Przeglądarka i tak poprawnie ją zinterpretuje oraz umieści na końcu, a następnie przetworzy główne dane. Jeśli jest ich dużo, możemy się liczyć z pewnym opóźnieniem w wyświetleniu. W takiej sytuacji będziemy mieć na stronie ładnie wyświetlony nagłówek i stopkę, a dane pojawią się po chwili. Co prawda ma to tylko znaczenie wizualne i to raptem przez chwilę, ale profesjonalistę poznaje się po tym, jak potrafi zadbać o takie szczegóły.

Oczywiście w jednej tabeli możemy utworzyć kilka sekcji tbody. Nie jest też regułą stosowanie tych wszystkich znaczników. Mają one jedną niewątpliwą zaletę, umożliwiają łatwe grupowanie danych.

Tabela przedstawiona na rysunku trzecim prezentuje się dość brzydko, zwłaszcza złe wrażenie robi część zawierająca cyfrę 2. Niebawem dowiemy się jak sformatować komórki, aby nabrały estetycznego wyglądu.

Formatowanie tabeli

W wykorzystywanych wcześniej kodach w znacznikach <table> często pojawiała się opcja border. Steruje ona grubością linii tworzących tabelę, oto efekty jej zmiany:

Rys. 4. Tabele ze zmianą parametru border.

Pozostałe parametry modyfikujące krawędzie to:

cellspacing – szerokość odstępu pomiędzy komórkami, podajemy go w pikselach
<table cellspacing = „wartość w pikselach”>...</table>,
cellpadding – odstęp danych w komórce od jej krawędzi, podajemy go w pikselach
<table cellpadding = „wartość w pikselach”>...</table>,
width – szerokość komórki, możemy ją podawać w pikselach, bądź określając, jaki procent ekranu ma zająć,
<table width = „12”>...</table> – szerokość równa 12 pikseli,
<table width = „50%”>...</table> – szerokość, która wynosi 50% szerokości okna,
height – wysokość komórki w pikselach, zamiast tego parametru zaleca się korzystanie z Kaskadowych Arkuszy Stylów (CSS),
<table height = „15”>...</table> – parametr height w praktyce,
<table style="height: 15px">...</table> – ten sam efekt uzyskany za pomocą Kaskadowych Arkuszy Stylów (CSS); parametrem może być ilość pikseli lub procent szerokości okna,
bgcolor – kolor tła tabeli, podobnie jak w przypadku height powinno się go zastępować Kaskadowymi Arkuszami Stylów (CSS),
<table bgcolor = „red”>...</table> – kolor tła ustawiony na czerwony,
<table style="background-color: red">...</table> – ten sam efekt uzyskany poprzez Kaskadowe Arkusze Stylów (CSS).

Formatowanie komórek

Nie tylko <table> posiada opcje formatowania, część cech możemy określić w znacznikach*<tr>*, <td> oraz <th> za pomocą poszczególnych atrybutów:

align – wyrównywanie tekstu do określonej pozycji; mamy do wyboru następujące opcje: left, right oraz center,
<tr align = „center”>...</tr> – tekst będzie wyrównywany do środka,
valign – wyrównywanie tekstu w pionie, możemy wybierać pomiędzy parametrami: top (góra), middle (środek), bottom (dół),
<tr valign = „top”>...</tr> – tekst będzie wyświetlany w górnej części komórki,
bgcolor – kolor tła wiersza, możemy wpisać jego angielską nazwę lub podać kod szesnastkowy, zaleca się zastępowanie tej opcji stylem CSS,
<tr bgcolor = „red”>...</tr> – metoda tradycyjna,
<tr style="background-color: red">...</tr> – wykorzystanie stylu CSS.

Teraz zajmiemy się zagadnieniami, związanymi z łączeniem komórek. W tym celu wykorzystamy dwa atrybuty:

rowspan – łączenie komórek w kolumnie,
colspan – łączenie komórek w wierszu.

Obydwa atrybuty, jako parametr, przyjmują liczbę łączonych komórek. Dla łatwego zobrazowania działania tych opcji utworzymy tabelę o wymiarach 3x3.

<table border="1" width="150">
      <tr>
       <td>1</td>
       <td>2</td>
       <td>3</td>
      </tr>
      <tr>
       <td>4</td>
       <td>5</td>
       <td>6</td>
      </tr>
      <tr>
       <td>7</td>
       <td>8</td>
       <td>9</td>
      </tr>
      </table>

Rys. 5. Tabela 3x3 wygenerowana z powyższego kodu.

Połączymy teraz komórki o nr „1” i „2”. W tym celu użyjemy atrybutu colspan. Kod zawierający modyfikację wygląda następująco:

<table border="1" width="150">
      <tr>
       <td colspan="2">1,2</td>
       <td>3</td>
      </tr>
      <tr>
       <td>4</td>
       <td>5</td>
       <td>6</td>
      </tr>
      <tr>
       <td>7</td>
       <td>8</td>
       <td>9</td>
      </tr>
 </table>

Charakterystyczne dla powyższego kodu jest usunięcie następującego fragmentu kodu: <td>2</td>. Jest to spowodowane tym, że komórka „1” zajmuje teraz dwa pola. Pozostawienie tej linii spowodowałoby następujący efekt:

Rys. 6. Efekt spowodowany pozostawieniem zbędnej deklaracji komórki.

Teraz połączymy komórki o nr „6” i „9”. Do tego zadania użyjemy atrybutu rowspan. Oto kod zawierający modyfikację:

<table border="1" width="150">
      <tr>
       <td>1</td>
       <td>2</td>
       <td>3</td>
      </tr>
      <tr>
       <td>4</td>
       <td>5</td>
       <td rowspan = "2">6,9</td>
      </tr>
      <tr>
       <td>7</td>
       <td>8</td>
      </tr>
</table>

Rys. 7. Połączenie komórek „6” i „9”.

Możliwe jest również sterowanie wyświetlaniem krawędzi tabeli. Służą do tego parametry rules, dla wewnętrznych krawędzi, oraz frame, dla zewnętrznych, obydwa należą do znacznika <table>. Rules przyjmuje następujące opcje:

none – brak linii wewnętrznych,
all – wszystkie linie są rysowane,
rows – rysowane są linie oddzielające wiersze,
cols – rysowane są linie oddzielające kolumny,
groups – rysowane są linie, rozdzielające grupy wierszy, zdefiniowane za pomocą <thead>, <tbody> lub <tfoot>, albo kolumny powiązane, przy użyciu <colgroup>.

Opcje dostępne dla parametru frame:

void – brak obramowania,
above – rysowana jest tylko górna krawędź,
below – rysowana jest tylko dolna krawędź,
lhs – rysowana jest tylko lewa krawędź,
rhs – rysowana jest tylko prawa krawędź,
hsides – rysowana jest górna i dolna krawędź,
vsides – rysowana jest lewa i prawa krawędź,
box – rysowane są wszystkie krawędzie,
border – rysowane są wszystkie krawędzie.

Grupowanie komórek

Do grupowania komórek służy znacznik <colgroup>. Jednak zanim go użyjemy, musimy się zapoznać z jego prostszą wersją <col>. Służy ona do zdefiniowania liczby kolumn tabeli i umożliwia ustawienie ich parametrów. Parametr span określa ilość kolumn, które mają być objęte formatowaniem. Lepiej zobrazuje to przykad:

<table border="1" width="150">
     <col span="2" width="30" align="right" style="background-color: yellow">
      <tr>
       <td>1</td>
       <td>2</td>
       <td>3</td>
      </tr>
      <tr>
       <td>4</td>
       <td>5</td>
       <td>6</td>
      </tr>
      <tr>
        <td>7</td>
       <td>8</td>
        <td>9</td>
      </tr>
    </table>

Rys. 8. Zastosowanie znacznika <col>.

Jak widać powyżej, za pomocą kodu jednego wiersza, sformatowaliśmy 2 kolumny. Znacznik <colgroup>...</colgroup> umożliwia nam zdefiniowanie formatowania dla całych grup kolumn. Przyjmuje on takie same parametry jak <col>. W przypadku, gdy w grupie kolumn chcemy wyodrębnić pojedynczą kolumnę zagnieżdżamy <col> wewnątrz <colgroup> tak, jak w przykładzie:

<table border="1" width="150">
      <colgroup width="30" align="right" style="background-color: yellow">
      <col span="2"> <col align="left" style="background-color: red">
      </colgroup>
      <tr>
       <td>1</td>
       <td>2</td>
       <td>3</td>
      </tr>
      <tr>
       <td>4</td>
       <td>5</td>
       <td>6</td>
      </tr>
      <tr>
       <td>7</td>
       <td>8</td>
        <td>9</td>
      </tr>
   </table>

Rys. 9. Zastosowanie znacznika <colgroup>.

Rozmieszczanie elementów na stronie przy użyciu tabel

Tabele można użyć również do pozycjonowania elementów na stronie. Ważną cechą tabel jest to, że nie służą one tylko do przechowywania tekstu. Równie dobrze możemy umieszczać w nich grafikę. W ten sposób możemy zbudować prosty szablon strony. Rozwiązanie to ma jednak sporo wad. Największą jest to, że jeśli utworzymy tym sposobem szablon dla wszystkich stron portalu i potem będziemy chcieli zmodyfikować szatę graficzną, będziemy musieli robić to dla każdej strony z osobna. Znacznie wygodniejsze jest użycie pozycjonowania poprzez Kaskadowe Arkusze Stylów (CSS).

Podsumowanie

Tabele są niezwykle rozbudowanym tematem. HTML umożliwia bardzo dużo opcji ich formatowania. Jednak, jeśli będziemy chcieli je wszystkie wykorzystać, będziemy musieli używać Kaskadowych Arkuszy Stylów (CSS).