HTML i CSS dla początkujących (Część 07): Tabele (01)

Tabele są dość skomplikowanymi strukturami składającymi się z wierszy i kolumn. Zewnętrzną strukturę tabeli zawsze tworzy element table.

<table>
…
</table>

Wewnątrz tego elementu następuje właściwe definiowanie tabeli. Zaleca się również przy tworzeniu tabeli w HTML przypisanie jej obramowania. Dzięki temu łatwiej jest śledzić dokładnie, jak przebiegają wiersze i kolumny. Aby to zrobić, należy przypisać elementowi rozpoczynającemu <table> kombinację atrybutu-wartość border="1". (Zauważ, że atrybut border nie powinien być używany w HTML. Zamiast tego należy skorzystać z odpowiednich właściwości CSS. O tym jednak później).

<table border="1">
…
</table>

Kontynuujemy z definiowaniem wierszy tabeli. Odbywa się to za pomocą elementu tr.

<table border="1">
   <tr></tr>
</table>

To jednak jeszcze nie prowadzi do pożądanego efektu. Następnie trzeba zdefiniować kolumny. W tym celu ponownie korzystamy z elementu td.

<table border="1">
   <tr>
      <td></td>
   </tr>
</table>

Teraz można zdefiniować pierwszą zawartość tabeli. Dokonuje się tego między znacznikami <td> i </td&ampgt;.

<table border="1">
   <tr>
      <td>Treść 1</td>
   </tr>
</table>

Teraz warto spojrzeć na wynik w przeglądarce.

To na pewno jeszcze nic spektakularnego, przecież tabela składa się obecnie z jednej komórki tabeli. Możesz teraz dodać kolejną kolumnę. Robi się to ponownie za pomocą elementu td. Upewnij się, że definiujesz to wewnątrz elementu tr.

<table border="1">
   <tr>
      <td>Treść 1</td>
      <td>Treść 2</td>
   </tr>
</table>

Ponownie spojrzenie na wynik.

Aby dodać dodatkowe wiersze do tabeli, po prostu utwórz kolejny element tr, w którym następnie definiujesz odpowiednie elementy td.

Oto kolejny przykład:

<table border="1">
   <tr>
      <td>Treść 1</td>
      <td>Treść 2</td>
   </tr>
   <tr>
      <td>Treść 3</td>
      <td>Treść 4</td>
   </tr>
</table>

Sprawdźmy teraz wynik w przeglądarce:





W ten sposób możesz tworzyć rozległe tabele.

Ustalanie nagłówka, ciała i stopki

Tabele można podzielić na logiczne obszary. Są to obszar nagłówka, jeden lub więcej obszarów danych oraz obszar stopki. Poniższy przykład pokazuje, jak może to wyglądać:

<table border="1">
  <thead>
    <tr>
      <th>Odlot</th>
      <th>Przylot</th>
      <th>Peron</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berlin</td>
      <td>Stralsund</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hamburg</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Monachium</td>
      <td>Berlin</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

A oto wygląd wyniku w przeglądarce:





Podział na wymieniane obszary nie ma oczywistego efektu wizualnego. Pojawia się jednak pytanie: Dlaczego warto sobie z tym kłopot zrobić i zdefiniować te obszary? Istnieją na to dwa dobre powody:

• Za pomocą CSS można dowolnie formatować obszary.

• Przy drukowaniu długich tabel przeglądarki mogą powtarzać nagłówek i stopkę tabeli na każdej stronie.

Nagłówek tabeli inicjuje się za pomocą thead. Następnie zamykają się wiersze tabeli należące do obszaru nagłówka. Nie zapomnij zamknąć obszaru nagłówka </thead>.

Jeśli tabela ma mieć stopkę, musi ona być zdefiniowana zdecydowanie przed obszarem danych. Stopka jest inicjowana za pomocą <tfoot>. Następnie mogą nastąpić kolejne wiersze stanowiące część stopki. Stopkę tabeli zamyka się za pomocą </tfoot>.

Właściwą treść tabeli definiuje się wewnątrz elementu tbody. Element tbody może występować kilkakrotnie. Każdą treść tabeli zamyka się odpowiednio przez </tbody>.

Dlaczego w tabeli należy używać kilka elementów tbody? Przykładem może być tabela Bundesligi niemieckiej. W takiej tabeli występuje zazwyczaj kilka obszarów.

• Mistrz

• Uczestnicy Ligi Mistrzów

• Uczestnicy kwalifikacji Ligi Mistrzów

• Uczestnicy Ligi Europy

• Szara strefa

• Miejsce barażowe

• Zespoły spadkowe

Każdy z tych obszarów można umieścić w oddzielnym elemencie tbody i następnie formatować je różnie za pomocą CSS.

Zdefiniowane kolumny

To, w jaki sposób tabela jest wyświetlana w przeglądarkach, zależy oczywiście głównie od liczby wierszy i kolumn. Proces wyświetlania tabeli nie jest dla przeglądarki łatwy. Faktycznie przeglądarka musi najpierw odczytać całą tabelę, zanim będzie mogła ją wyświetlić. Szczególnie w przypadku bardzo obszernych tabel może to oczywiście zająć pewien czas. Ten problem można obejść, informując przeglądarkę bezpośrednio, z ilu kolumn faktycznie składa się tabela.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Tytuł</th>
     <th>Cena</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Krótka historia prawie wszystkiego</td>
     <td>29,95 euro</td>
   </tr>
 </table>

Zdefiniowanie wstępne kolumn jest wprowadzane przez element colgroup. Zauważ, że większość atrybutów dostępnych w wcześniejszych wersjach HTML dla colgroup nie jest już dozwolona w HTML5. Dozwolony jest teraz tylko atrybut span. Jako wartość ten atrybut oczekuje liczby kolumn zawartych w tabeli.

Element colgroup znajduje się bezpośrednio za rozpoczynającym <table>. Kolumny same są potem definiowane przez poszczególne elementy col.

Przy użyciu colgroup istnieją zasadniczo dwie możliwości:

• Ze atrybutem span

• Bez atrybutu span

Jeśli nie używamy atrybutu span, dla każdej kolumny, przez którą powinna się rozciągać grupa kolumn, wewnątrz elementu colgroup musi zostać zdefiniowany osobno element col. Zauważ, że col jest samodzielnym elementem.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Tytuł</th>
     <th>Cena</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Krótka historia prawie wszystkiego</td>
     <td>29,95 euro</td>
   </tr>
 </table>

Istnieje także forma mieszana.

<table> 
 <colgroup> 
 <col> 
 </colgroup> 
 <colgroup span="2"></colgroup>
 …

Jest to zawsze praktyczne, gdy jedna kolumna ma być zdefiniowana osobno, a pozostałe chcemy zgrupować razem.