DODOX

0

0

Pogoda w Łodzi


 


wtorek, 19 kwietnia 2011

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

    1112
    2122

    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>


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


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


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

    1112
    2122



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

    1112
    2122

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

    1112
    2122

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

    1112
    2122

  • 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

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

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

    1112
    2122

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

    1112
    2122

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>

    1112
    2122

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

    1112
    2122

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


    1112
    2122


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

    1112
    2122



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


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


    111213
    21,2223
    313233

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


    1112,2213
    2123
    313233

    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,2213
    23
    313233
  • 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ł tabeli
1112
2122

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>

Tytuł tabeli
1112
2122

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

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>

1112
2122

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>

11121314
21222324

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>

    1112
    2122

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

    1112
    2122

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

    1112
    2122

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

    1112
    2122

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

    1112
    2122

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

    1112
    2122

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

    1112
    2122

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

    1112
    2122

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>

    1112
    2122

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

    1112
    2122

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

    1112
    2122

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

    1112
    2122

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

    111213
    616263
    212223
    313233
    414243
    515253
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>

piesek piesek

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>

12
2122

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

<table border="1" width="100">

<tr>
<td>&nbsp;</td><td>12</td>
</tr><tr>
<td>21</td><td>22</td>

</tr>
</table>

 12
2122

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.

Brak komentarzy:

Prześlij komentarz