Tabele - Kurs języka HTML
Bardzo wiele danych wygodnie jest prezentować w formie tabelarycznej, np. różnego rodzaju zestawienia. Z tego powodu w języku HTML wprowadzono zestaw znaczników pozwalających na tworzenie tabel. Jak się okazało później, te znaczniki pozwoliły także na precyzyjne rozmieszczenie poszczególnych elementów na stronie, przez co możliwe stało się tworzenie stron których szata graficzna wykraczała poza to co oferowały pozostałe znaczniki.
Podstawy tworzenia tabel w HTML
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>
| 11 |
12 |
13 |
| 21 |
22 |
23 |
| 31 |
32 |
33 |
Sposób w jaki rozłożone są znaczniki w przykładzie powyżej nie jest obowiązkowy - można także zapisać wszystko w jednej linii, można również umieścić definicję każdej komórki w jednym wierszu. Tutaj rozmieściłem to tak aby było to w miarę czytelne. Także z tego powodu wstawiłem spacje pomiędzy definicjami poszczególnych komórek i wierszy.
Modyfikowanie wyglądu tabeli
Wygląd gotowej tabeli można modyfikować na wiele sposobów, na przykład za pomocą parametrów znacznika <table>. Dostępne są atrybuty pozwalające na określenie następujących parametrów tworzonej tabeli:
- grubość obramowania wokół tabeli - atrybut
border. Jako wartość podaje się jakie grube ma być to obramowanie (w pikselach):
<table border="5">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
W przypadku gdy nie poda się wartości, przeglądarka przyjmie wartość domyślną, która jest zależna od przeglądarki:
<table border>
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
- wielkość odstępu pomiędzy komórkami (w pikselach) - atrybut
cellspacing:
<table border="1" cellspacing="10">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
- wielkość odstępu pomiędzy zawartością komórki a jej obramowaniem (w pikselach) - atrybut
cellpadding:
<table border="1" cellpadding="10">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
- 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):
<table border="1" width="200">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<br>
<table border="1" width="50%">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
- wysokość tabeli (w pikselach) - atrybut
height.
Uwaga: Atrybut ten nie jest co prawda oficjalną częścią standardu HTML, ale jest interpretowany przez większość przeglądarek. Zamiast niego powinno się jednak stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<table border="1" height="100">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table> <table border="1" style="height: 100px">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
- kolor tła tabeli - atrybut
bgcolor. Jako wartość należy podać nazwę koloru lub jego kod szesnastkowy (przykładową listę kodów kolorów znajdziesz w artykule Bezpieczna paleta kolorów). Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<table border="1" bgcolor="yellow">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table> <table border="1" style="background-color: yellow">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
- obrazek jako tło tabeli - atrybut
background.
Uwaga: Atrybut ten nie jest co prawda oficjalną częścią standardu HTML, ale jest interpretowany przez większość przeglądarek. Zamiast niego powinno się jednak stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<table border="1" background="tlo.gif">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table> <table border="1" style="background: url(tlo.gif)">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
- 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. Dodatkowo przy zastosowaniu tego parametru tekst będzie odpowiednio "oblewał" tabelę. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<table border="1" align="right">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
tekst tekst<br>
tekst tekst<br>
tekst tekst <table border="1" style="float: right">
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
tekst tekst<br>
tekst tekst<br>
tekst tekst
tekst tekst
tekst tekst
tekst tekst
Kolejne parametry - dotyczące sposobu rysowania obramowania oraz linii wewnętrznych tabeli - zostaną podane poniżej, po podaniu metody grupowania kolumn.
Modyfikowanie wyglądu wierszy
znacznik <tr> (definiujący wiersz tabeli) także może posiadać parametry. Oto one:
- wyrównanie tekstu w komórkach w wierszu - atrybut
align. Dostępne są wartości: left, center i right. Przykład:
<table border="1" width="200">
<tr align="center">
<td>11</td><td>12</td>
</tr><tr align="right">
<td>21</td><td>22</td>
</tr>
</table>
- 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. Przykład:
<table border="1" width="200" style="height: 100px">
<tr valign="top">
<td>11</td><td>12</td>
</tr><tr valign="bottom">
<td>21</td><td>22</td>
</tr>
</table>
- kolor tła komórek w wierszu - atrybut
bgcolor. Jako wartość należy podać nazwę koloru lub jego kod szestnaskowy. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<table border="1">
<tr bgcolor="red">
<td>11</td><td>12</td>
</tr><tr bgcolor="yellow">
<td>21</td><td>22</td>
</tr>
</table> <table border="1">
<tr style="background-color: red">
<td>11</td><td>12</td>
</tr><tr style="background-color: yellow">
<td>21</td><td>22</td>
</tr>
</table>
Modyfikowanie wyglądu komórek
Znaczniki definiujące komórki tabeli - <td> i <th> - także posiadają parametry. Oto one:
- wyrównanie tekstu w komórce - atrybut
align. Dostępne są następujące wartości: left, center i right. Przykład:
<table border="1" width="200">
<tr>
<td align="right">11</td><td align="center">12</td>
</tr><tr>
<td align="left">21</td><td>22</td>
</tr>
</table>
- wyrównanie zawartości komórki w pionie - atrybut
valign. Dostępne są wartości: top, middle i bottom. Przykład:
<table border="1" width="200" style="height: 100px">
<tr>
<td valign="top">11</td><td valign="middle">12</td>
</tr><tr>
<td valign="bottom">21</td><td>22</td>
</tr>
</table>
- szerokość komórki (w pikselach lub w procentach szerokości tabeli) - atrybut
width. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<table border="1">
<tr>
<td width="50">11</td><td width="100">12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<br>
<table border="1" width="200">
<tr>
<td width="30%">11</td><td width="70%">12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table> <table border="1">
<tr>
<td style="width: 50px">11</td><td style="width: 100px">12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
<br />
<table border="1" width="200">
<tr>
<td style="width: 30%">11</td><td style="width: 70%">12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
- wysokość komórki (w pikselach lub w procentach wysokości tabeli) - atrybut
height. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<table border="1">
<tr>
<td height="20">11</td><td>12</td>
</tr><tr>
<td height="40">21</td><td>22</td>
</tr>
</table>
<br>
<table border="1" height="100">
<tr>
<td height="30%">11</td><td>12</td>
</tr><tr>
<td height="70%">21</td><td>22</td>
</tr>
</table> <table border="1">
<tr>
<td style="height: 20px">11</td><td>12</td>
</tr><tr>
<td style="height: 40px">21</td><td>22</td>
</tr>
</table>
<br>
<table border="1" style="height: 100px">
<tr>
<td style="height: 30%">11</td><td>12</td>
</tr><tr>
<td style="height:70%">21</td><td>22</td>
</tr>
</table>
- kolor tła w komórce - atrybut
bgcolor. Jako jego wartość należy podać nazwę koloru lub jego kod szestnastkowy. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS:
<table border="1">
<tr>
<td bgcolor="red">11</td><td bgcolor="green">12</td>
</tr><tr>
<td bgcolor="yellow">21</td><td bgcolor="blue">22</td>
</tr>
</table> <table border="1">
<tr>
<td style="background-color: red">11</td>
<td style="background-color: green">12</td>
</tr><tr>
<td style="background-color: yellow">21</td>
<td style="background-color: blue">22</td>
</tr>
</table>
- obrazek użyty jako tło komórki - atrybut
background.
Uwaga: Ten atrybut nie jest częścią standardu HTML, jednakże jest interpretowany przez najpopularniejsze przeglądarki. Zalecane jest użycie poleceń kaskadowych arkuszy stylów CSS zamiast niego. Przykład:
<table border="1">
<tr>
<td background="tlo.gif">11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table> <table border="1">
<tr>
<td style="background: url(tlo.gif)">11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>
- 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. Po połączeniu, zawartość "większej" komórki podaje się jednokrotnie:
<table border="1" width="100" style="height: 100px">
<tr>
<td>11</td><td>12</td><td>13</td>
</tr><tr>
<td colspan="2">21,22</td><td>23</td>
</tr><tr>
<td>31</td><td>32</td><td>33</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:
<table border="1" width="100" style="height: 100px">
<tr>
<td>11</td><td rowspan="2">12,22</td><td>13</td>
</tr><tr>
<td>21</td><td>23</td>
</tr><tr>
<td>31</td><td>32</td><td>33</td>
</tr>
</table>
Ponieważ równocześnie można podać kilka parametrów, możliwe jest połączenie kilku komórek w sąsiadujących wierszach i kolumnach w jedną, co wymaga podania równocześnie parametrów colspan i rowspan:
<table border="1" width="100" style="height: 100px">
<tr>
<td colspan="2" rowspan="2">11,12,21,22</td><td>13</td>
</tr><tr>
<td>23</td>
</tr><tr>
<td>31</td><td>32</td><td>33</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.
<table border="1">
<tr><td>11</td><td>12</td>
</tr><tr>
<td>21</td><td nowrap>bardzo długi tekst bardzo długi tekst bardzo długi tekst bardzo długi tekst bardzo długi tekst bardzo długi tekst bardzo długi tekst bardzo długi tekst bardzo długi tekst bardzo długi tekst bardzo długi tekst bardzo długi tekst bardzo długi tekst</td></tr>
</table>
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ł ten można także wyrównać do jednego z brzegów tabeli, stosując parametr align, który może przyjmować wartości: left, center (wartość domyślna) i right. Atrybut ten nie jest zalecany - zamiast niego powinno się stosować odpowiednie polecenie kaskadowych arkuszy stylów CSS. Dodatkowo atrybut ten nie działa wszędzie poprawnie - Netscape (wersja 6) nie interpretuje w ogóle tego parametru, a Opera (wersja 6) ma z nim problemy - przy wyrównaniu do prawej napis jest na wysokości pierwszego wiersza tabeli w połowie szarego pola po prawej stronie tabeli, przy wyrównaniu do lewej jest w podobnej odległości od tabeli na białym polu po lewej. W przypadku użycia stylów CSS tytuł jest wyświetlany poprawnie.
<table border="1" width="400">
<caption align="right">Tytuł tabeli</caption>
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table> <table border="1" width="400 | 
