Tabele


Przy tworzeniu tabeli podstawę stanowią następujące znaczniki:

  • <table> – ten znacznik stanowi „ramę” wewnątrz której zawiera się cała definicja tabeli;
  • <tr> – ten znacznik służy do zdefiniowania pojedynczego wiersza tabeli. W jego obrębie muszą znajdować się definicje poszczególnych komórek tabeli;
  • <td> – ten znacznik z kolei służy do zdefiniowania pojedynczej komórki tabeli;
  • <th> – znacznik ten podobnie jak znacznik <td> definiuje pojedynczą komórkę tabeli. Różnica jest jednak taka że znacznik <th> tworzy komórkę nagłówka – test w takiej komórce jest pogrubiony.

Przykładowa tabela może zatem wyglądać następująco:

<table>
    <tr>
        <th>11</th>        <th>12</th>        <th>13</th>
    </tr>
    <tr>
        <td>21</td>        <td>22</td>        <td>23</td>
    </tr>
    <tr>
        <td>31</td>        <td>32</td>        <td>33</td>
    </tr>
</table>
Wynik:
11 12 13
21 22 23
31 32 33

 

 

 

 

Dostępne atrybuty tabeli <table>:

  • grubość obramowania wokół tabeli – atrybut border. Jako wartość podaje się jakie grube ma być to obramowanie (w pikselach):
  • wielkość odstępu pomiędzy komórkami (w pikselach) – atrybut cellspacing
  • wielkość odstępu pomiędzy zawartością komórki a jej obramowaniem (w pikselach) – atrybut cellpadding
  • szerokość tabeli – atrybut width. Można ją określić w pikselach lub w procentach szerokości elementu wewnątrz którego tabela jest umieszczona (jeżeli nie jest w żadnym, to brana jest szerokość okna przeglądarki)
  • wysokość tabeli (w pikselach) – atrybut height.
  • kolor tła tabeli – atrybut bgcolor.
  • obrazek jako tło tabeli – atrybut background.
  • wyrównanie tabeli do brzegów dokumentu – atrybut align. Dostępne są wartości: left – wyrównanie do lewej (wartość domyślna), center – wyrównanie do środka, right – wyrównanie do prawej strony.

 

Dostępne atrybuty wiersza <tr>:

  • wyrównanie tekstu w komórkach w wierszu – atrybut align. Dostępne są wartości: left, center i right.
  • wyrównanie tekstu w pionie w komórkach w wierszu – atrybut valign. Dostępne są wartości: top – wyrównanie do góry komórki, middle – wyrównanie do połowy wysokości komórki (wartość domyślna), bottom – wyrównanie do dołu komórki.
  • kolor tła komórek w wierszu – atrybut bgcolor.

 

Dostępne atrybuty wiersza <td> oraz <th>:

  • wyrównanie tekstu w komórce – atrybut align. Dostępne są następujące wartości: left, center i right.
  • wyrównanie zawartości komórki w pionie – atrybut valign. Dostępne są wartości: top, middle i bottom.
  • szerokość komórki (w pikselach lub w procentach szerokości tabeli) – atrybut width.
  • wysokość komórki (w pikselach lub w procentach wysokości tabeli) – atrybut height.
  • kolor tła w komórce – atrybut bgcolor. Jako jego wartość należy podać nazwę koloru lub jego kod szestnastkowy.
  • obrazek użyty jako tło komórki – atrybut background.
  • połączenie komórek w wierszu – atrybut colspan. Niekiedy konieczne jest stworzenie tabeli, gdzie zachodzi potrzeba połączenia kilku komórek w jedną. Za pomocą tego parametru można połączyć kilka komórek w wierszu – jako parametr podaje się liczbę łączonych komórek.

Poziome łączenie komórek: Dla pierwszej komórki <td colspan="2"> (druga komórka nie istnieje, ponieważ została połączona z pierwszą)

komórki1,2
komórka3 komórka4

Aby otrzymać powyższą tabelę, należy wpisać:

<table border="1">
<tr>
	<td colspan="2">komórki1,2</td>
</tr>
<tr>
	<td>komórka3</td>  <td>komórka4</td>
</tr>
</table>

  • połączenie komórek w kolumnie – atrybut rowspan. Za pomocą tego parametru łączy się komórki w kolumnie w jedną większą – obowiązują te same reguły co przy atrybucie colspan

 

 

Pionowe łączenie komórek: Dla pierwszej komórki <td rowspan="2"> (trzecia komórka nie istnieje, ponieważ została połączona z pierwszą)

  komórka2

 

komórki1,3
komórka4

Aby otrzymać powyższą tabelę, należy wpisać:

<table border="1">
<tr>
	<td rowspan="2">komórki1,3</td> <td>komórka2</td>
</tr>
<tr>
	<td>komórka4</td>
</tr>
</table>

 

  • wyłączenie łamania tekstu w komórce – atrybut nowrap. Użycie tego atrybutu powoduje że zdania wpisane do komórki nie powinny być łamane w celu podziału na wiersze, ale pozostać w jednym wierszu. Może to spowodować że przeglądarka będzie musiała wyświetlić tabelę szerszą niż okno przeglądarki, co zmusi osobę oglądającą co przewijania strony.

 

Nagłówek tabeli

Tabelę można także zaopatrzyć w tytuł, wstawiany za pomocą znacznika <caption>. Znacznik ten umieszcza się zaraz po znaczniku <table>:

<table border="1" width="400">
    <caption>Tytuł tabeli</caption>
    <tr>
        <td>11</td>    <td>12</td>
    </tr>
    <tr>
        <td>21</td>    <td>22</td>
    </tr>
</table>
Tytuł tabeli
11 12
21 22

 

 

 

 

 

Dostępne atrybuty <caption>: align, który może przyjmować wartości: left, center (wartość domyślna) i right.

Podział tabeli na części logiczne

Tabelę można także podzielić na części odpowiadające jej funkcjom – nagłówek, stopkę i „ciało”. Służą do tego znaczniki: <thead> (definicja nagłówka tabeli), <tfoot> (definicja stopki tabeli) i <tbody> (definicja ciała tabeli). Każda z takich sekcji musi zawierać co najmniej jeden wiersz tabeli, zdefiniowany z użyciem znacznika <tr>. Znaczniki zamykające we wszystkich tych znacznikach nie są wymagane, ale warto je podać. Przy znaczniku <tbody> nie trzeba również podawać znacznika otwierającego jeżeli definicja tabeli nie zawiera znaczników <thead> i <tfoot> (tak jak to było we wszystkich wcześniejszych przykładach). Tabela może zawierać kilka „ciał” zdefiniowanych znacznikami <tbody> jeżeli zawierają one odrębne grupy danych, co można później wykorzystać do obramowania tabeli w miejscach gdzie łączą się ze sobą poszczególne grupy (szczegóły poniżej). Stopkę tabeli należy umieścić przed ciałem tabeli, co pozwoli wykorzystać ją przeglądarce w odpowiedni sposób zaraz po jej wczytaniu, gdyż dane w tabeli mogą być obszerne i co za tym idzie ich wczytanie i przetworzenie może zająć dużo czasu. Przeglądarki interpretujące te polecenia stopkę tabeli przenoszą zawsze na jej koniec przy wyświetlaniu tabeli.

<table border="1" width="200">
<thead>
<tr>
<th colspan="2">Nagłówek tabeli</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="2">Stopka tabeli</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>11</td><td>12</td>
</tr>
</tbody>
</table>
Nagłówek tabeli
Stopka tabeli
11 12
11 12

 

 

 

 

 

 

 

 

 

 

 

W tabeli można także zaraz na jej początku zdefiniować ile kolumn ma ona zawierać. Służy do tego znacznik <col>. Może mieć on mieć następujące parametry:

  • span – pozwala na równoczesne zdefiniowanie kilku kolumn, a także ich parametrów. Domyślana wartość to jeden;
  • align – wyrównanie zawartości komórek w poziomie. Dostępne są wartości: left, center i right;
  • valign – wyrównanie zawartości komórek w pionie. Dostępne są wartości: top, middle i bottom;
  • width – pozwala na zdefiniowanie szerokości komórek.
<table border="1" width="200" style="height: 100px"> 
    <col width="25%" align="right" valign="top"> 
    <col width="75%" align="center" valign="bottom"> 
    <tr> <td>11</td><td>12</td> </tr>
    <tr> <td>21</td><td>22</td> </tr> 
</table>
 Kolumny tabeli można także połączyć w grupy używając do tego znacznika <colgroup>. Znacznik ten posiada identyczne parametry jak opisany wyżej znacznik <col>. Jeżeli w obrębie grupy istniałaby konieczność indywidualnego definiowania pewnych parametrów kolumn, można to zrobić umieszczając wewnątrz znacznika <colgroup> znaczniki <col> z odpowiednimi parametrami. Jeżeli tak się zrobi, parametr span znacznika <colgroup> jest ignorowany.
<table border="1" width="300" style="height: 100px">
    <colgroup width="100" align="center" valign="top">
        <col span="2"><col width="50" align="right" valign="middle">
    </colgroup>
    <colgroup width="50" align="left" valign="bottom"></colgroup>
    <tr><td>11</td><td>12</td><td>13</td><td>14</td></tr>
    <tr><td>21</td><td>22</td><td>23</td><td>24</td></tr>
</table>

 Krawędzie zewnętrzne tabeli

Parametr frame znacznika <table> przyjmować może następujące wartości:

  • void – brak obramowania
  • above – tylko górna krawędź
  • below – tylko dolna krawędź
  • lhs – tylko lewa krawędź
  • rhs – tylko prawa krawędź
  • hsides – górna i dolna krawędź
  • vsides – lewa i prawa krawędź
  • box – wszystkie krawędzie
  • border – wszystkie krawędzie

Krawędzie wewnętrzne tabeli

Parametr rules znacznika <table> może przyjmować następujące wartości:

  • none – brak linii wewnętrznych
  • all – wszystkie linie wewnętrzne są rysowane
  • rows – rysowane są tylko linie oddzielające wiersze
  • cols – rysowane są tylko linie oddzielające kolumny
  • groups – rysowane są tylko linie rozdzielające grupy wierszy (zdefiniowane za pomocą znaczników <thead>, <tfoot> i <tbody>) i grupy kolumn (zdefiniowane za pomocą znacznika <colgroup>)

 

Zadania do wykonania: http://slawekrokicki.vizz.pl/technikum_cwiczenia/cwiczenia/html/cwiczenie_5.html