INFORMATICS

Tabele kurs w 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>

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>

  ---

  11	12
  21	22

  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>

  ---

  11	12
  21	22

• 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>

  ---

  11	12
  21	22

• 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>

  ---

  11	12
  21	22

• 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>

  ---

  11	12
  21	22

  
  

  11	12
  21	22

• 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>

  ---

  11	12
  21	22

• 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>

  ---

  11	12
  21	22

• 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>

  ---

  11	12
  21	22

• 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

  ---

  11	12
  21	22

  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>

  ---

  11	12
  21	22

• 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>

  ---

  11	12
  21	22

• 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>

  ---

  11	12
  21	22

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>

  ---

  11	12
  21	22

• 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>

  ---

  11	12
  21	22

• 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>

  ---

  11	12
  21	22

  
  

  11	12
  21	22

• 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>

  ---

  11	12
  21	22

  
  

  11	12
  21	22

• 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>

  ---

  11	12
  21	22

• 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>

  ---

  11	12
  21	22

• 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>

  ---

  11	12	13
  21,22		23
  31	32	33

• 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>

  ---

  11	12,22	13
  21		23
  31	32	33

  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>

  ---

  11,12,21,22		13
  		23
  31	32	33

• 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>

  Ponieważ przykład ten spowodowałby "zepsucie" wyglądu tej strony, został umieszczony w osobnym pliku - kliknij tutaj aby go obejrzeć.

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">
<caption style="text-align: right">Tytuł tabeli</caption>
<tr>
<td>11</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>

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>

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.
W poniższym przykładzie w tabeli będą dwie grupy kolumn: w pierwszej grupie będą trzy kolumny, z których dwie pierwsze będą miały parametry podane w znaczniku <colgroup> (odpowiadający im znacznik <col> służy jedynie do określenia liczby kolumn), zaś ostatnia ma zmienione wszystkie parametry. Druga grupa zaś zawiera jedną kolumnę, dla której zostały zdefiniowane także wszystkie parametry.

<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>

Sterowanie wyświetlaniem krawędzi tabeli

Możliwe jest także sterowanie sposobem rysowania obramowania zewnętrznego tabeli, za pomocą parametru frame znacznika <table>.
Uwaga: Ten parametr interpretuje jedynie Internet Explorer (wszystkie wersje), Netscape (wersja 6) i Firefox.

Parametr ten przyjmować może następujące wartości:

• void - brak obramowania

  <table width="60" style="height: 60px" border="1" frame="void">
  <tr>
  <td>11</td><td>12</td>
  </tr><tr>
  <td>21</td><td>22</td>
  </tr>
  </table>

  ---

  11	12
  21	22

• above - tylko górna krawędź

  <table width="60" style="height: 60px" border="1" frame="above">
  <tr>
  <td>11</td><td>12</td>
  </tr><tr>
  <td>21</td><td>22</td>
  </tr>
  </table>

  ---

  11	12
  21	22

• below - tylko dolna krawędź

  <table width="60" style="height: 60px" border="1" frame="below">
  <tr>
  <td>11</td><td>12</td>
  </tr><tr>
  <td>21</td><td>22</td>
  </tr>
  </table>

  ---

  11	12
  21	22

• lhs - tylko lewa krawędź

  <table width="60" style="height: 60px" border="1" frame="lhs">
  <tr>
  <td>11</td><td>12</td>
  </tr><tr>
  <td>21</td><td>22</td>
  </tr>
  </table>

  ---

  11	12
  21	22

• rhs - tylko prawa krawędź

  <table width="60" style="height: 60px" border="1" frame="rhs">
  <tr>
  <td>11</td><td>12</td>
  </tr><tr>
  <td>21</td><td>22</td>
  </tr>
  </table>

  ---

  11	12
  21	22

• hsides - górna i dolna krawędź

  <table width="60" style="height: 60px" border="1" frame="hsides">
  <tr>
  <td>11</td><td>12</td>
  </tr><tr>
  <td>21</td><td>22</td>
  </tr>
  </table>

  ---

  11	12
  21	22

• vsides - lewa i prawa krawędź

  <table width="60" style="height: 60px" border="1" frame="vsides">
  <tr>
  <td>11</td><td>12</td>
  </tr><tr>
  <td>21</td><td>22</td>
  </tr>
  </table>

  ---

  11	12
  21	22

• box - wszystkie krawędzie
• border - wszystkie krawędzie

  <table width="60" style="height: 60px" border="1" frame="box">
  <tr>
  <td>11</td><td>12</td>
  </tr><tr>
  <td>21</td><td>22</td>
  </tr>
  </table>

  ---

  11	12
  21	22

Istnieje też możliwość sterowania rysowaniem wewnętrznych krawędzi tabeli. Służy do tego parametr rules znacznika <table>. Parametr ten może przyjmować następujące wartości:

• none - brak linii wewnętrznych

  <table width="60" style="height: 60px" border="1" rules="none">
  <tr>
  <td>11</td><td>12</td>
  </tr><tr>
  <td>21</td><td>22</td>
  </tr>
  </table>

  ---

  11	12
  21	22

• all - wszystkie linie wewnętrzne są rysowane

  <table width="60" style="height: 60px" border="1" rules="all">
  <tr>
  <td>11</td><td>12</td>
  </tr><tr>
  <td>21</td><td>22</td>
  </tr>
  </table>

  ---

  11	12
  21	22

• rows - rysowane są tylko linie oddzielające wiersze

  <table width="60" style="height: 60px" border="1" rules="rows">
  <tr>
  <td>11</td><td>12</td>
  </tr><tr>
  <td>21</td><td>22</td>
  </tr>
  </table>

  ---

  11	12
  21	22

• cols - rysowane są tylko linie oddzielające kolumny

  <table width="60" style="height: 60px" border="1" rules="cols">
  <tr>
  <td>11</td><td>12</td>
  </tr><tr>
  <td>21</td><td>22</td>
  </tr>
  </table>

  ---

  11	12
  21	22

• 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>)

  <table width="100" border="1" rules="groups">
  <colgroup span="2"></colgroup><colgroup></colgroup>
  <thead>
  <tr>
  <td>11</td><td>12</td><td>13</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td>61</td><td>62</td><td>63</td>
  </tr>
  </tfoot>
  <tbody>
  <tr>
  <td>21</td><td>22</td><td>23</td>
  </tr><tr>
  <td>31</td><td>32</td><td>33</td>
  </tr>
  </tbody>
  <tbody>
  <tr>
  <td>41</td><td>42</td><td>43</td>
  </tr><tr>
  <td>51</td><td>52</td><td>53</td>
  </tr>
  </tbody>
  </table>

  ---

  11	12	13
  61	62	63
  21	22	23
  31	32	33
  41	42	43
  51	52	53

Uwagi na koniec

W komórkach tabeli oprócz tekstu można umieszczać dowolne inne elementy, jak np. grafikę:

<table border="1" cellpadding="10">
<tr>
<td><img src="/odie.gif" width="72" height="84" alt="piesek"></td>
<td><img src="/dog.gif" width="35" height="35" alt="piesek"></td>
</tr>
</table>

W ten sposób można także stworzyć menu graficzne służące do nawigacji na stronie, stosując do tego pocięty na kawałki większy obrazek, zamiast umieszczania na nim mapy odnośników. Przy tworzeniu czegoś takiego należy jednak zwrócić uwagę, aby pomiędzy znacznikami definiującymi poszczególne komórki (<td> lub <th>) i wewnątrz nich nie umieszczać spacji ani innych znaków które są podobnie interpretowane (enter, tabulator). Także nie należy wstawiać tych znaków pomiędzy definicjami komórek, gdyż jedna ze starszych przeglądarek (chyba Netscape) miała niemiły zwyczaj wstawiania wtedy dodatkowych odstępów pomiędzy poszczególnymi komórkami, co prowadziło do powstania nieestetycznych "szpar" pomiędzy poszczególnymi częściami obrazka, które powinny dokładanie do siebie przylegać.
W komórce tabeli można także umieścić kolejną tabelę, co pozwala w wielu przypadkach na łatwiejsze uzyskanie pożądanego rozłożenia komórek niż z użyciem parametrów colspan i rowspan znaczników <td> i <th>.

Jeżeli jedna z komórek tabeli jest pusta, to przeglądarka zwykle wyświetla ją w odrębny sposób:

<table border="1" width="100">
<tr>
<td></td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>

Można się tego zachowania pozbyć wstawiając do tej komórki tzw. niełamalną spację (jej kod to  ):

<table border="1" width="100">
<tr>
<td>&nbsp;</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>
</tr>
</table>

Tworząc tabele należy także się starać podawać zawsze ich szerokość oraz szerokości poszczególnych komórek. W przypadku komórek niekiedy warto także określić ich wysokość, co można także wykonać w odniesieniu do całej tabeli. Warto także podawać parametry kolumn za pomocą znaczników <col> i >colgroup>, dzięki czemu przeglądarka będzie mogła taką tabelę wyświetlić znacznie szybciej. Ma to znaczenie zwłaszcza wtedy gdy cała strona jest umieszczona w tabeli, i rozmiar strony nie jest mały.