Tabele

  • Post category:HTML

Tabele

Tabele służą do tworzenia zestawień danych tabelarycznych.  Definicja tabeli musi być umieszczona między tymi dwoma znacznikami, które stanowią jej delimitery. W ich ramach są umieszczane definicje rzędów, definicje komórek w rzędach, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i kolumn.

<TABLE> </TABLE>

Wiersze tabeli wprowadzamy za pomocą polecenia:

<tr> </tr>

Wiersz tabeli jest jej konkretyzacją, a sam tworzy ramy dla komórek z danymi.

W ramach <table> </table> można umieścić wiele kolejnych definicji wierszy <tr> </tr>. Dopiero zdefiniowanie komórek,  pozwoli wyświetlić tabelaryczny układ danych.

<table>
    <tr> </tr>
    <tr> </tr>
    <tr> </tr>
</table>

Komórki tabeli wprowadzamy za pomocą polecenia:

<td> </td>

Komórka zawiera już konkretne dane. Między jej znacznikami można umieszczać tekst. Konkretne komórki są umieszczane między znacznikami wybranego wiersza

<table>
    <tr> <td> </td><td> </td><td> </td></tr>
    <tr> <td> </td><td> </td><td> </td></tr>
    <tr> <td> </td><td> </td><td> </td></tr>
</table>

Obramowanie tabeli

Aby tabela zawierała naokoło obramowanie, wystarczy rozszerzyć definicję o atrybut border. Jeśli nie podamy szerokości obramowania, przyjmowana jest jej domyślna wartość.

<table border> </table>

lub

<table border=”15″> </table>

 

Odległości między komórkami

Aby odległości miedzy komórkami w pikselach były inne niż domyślne, możemy użyć atrybutu cellspacing. Powoduje to pogrubienie obramowania między nimi.

<table border cellspacing=”6″> </table>

 

Marginesy dla komórek

Jeśli uznamy, że odstęp między zawartością komórki a jej obramowaniem jest zbyt mały, możemy użyć parametru CELLPADDING (domyślnie wynosi on 1).

<TABLE BORDER CELLSPACING=6  CELLPADDING=14> </TABLE>

 

Szerokość tabeli

Atrybut width daje nam możliwość samodzielnego zdefiniowania szerokości tabeli.

<table border width=”500″> </table>

Spowoduje to wyświetlenie tabeli o podanej szerokości w pikselach.

Zamiast wartości  w pikselach możemy także użyć wartości procentowej, np. pół szerokości nadrzędnego pojemnika, w którym mieści się tabela.

<table border width=”50%”> </table>

 

Szerokość komórki

Szerokość komórki jest określana za pomocą stylów, a konkretnie szerokości elementu.

<td style=”width: 150px; “>zawartość komórki</td>

Wyrównanie tabeli

<table style=”float:right; “></table>

W efekcie tabela zostanie przesunięta w prawo i oblana z lewej strony tekstem.

Wysokość tabeli

 

<table border style=”height: 180px; width: 60%; “>

 

Pionowe wyrównanie danych w komórkach

Atrybut valign  służy do pionowego wyrównania zawartości komórki – do górnego brzegu, do środka i do dolnego brzegu.

<td valign=”top”> </td>
<td valign=”middle”> </td>
<td valign=”bottom”> </td>

Kolor tła tabeli

 

<table style=”background-color: red”>
<tr style=”background-color: beige”>
<td style=”background-color: green”>

Kolor obramowania tabeli

 

Przykładowy kod:

<table border cellspacing=”1″ cellpadding=”5″ style=”border: 14px outset #D26E; “>
    <tr> <td> </td><td> </td><td> </td></tr>
    <tr> <td> </td><td> </td><td> </td></tr>
    <tr> <td> </td><td> </td><td> </td></tr>
</table>

Tytuł tabeli

Tabela powinna  zawierać tytuł, wyjaśniający jej treść. Należy go umieścić zaraz za ogólnymi ramami tabeli. Przykład:

<table border style=”width: 300px; “>
<caption>Tytuł tabeli</caption>

<table border style=”width: 300px; “>
<caption>Tytuł tabeli</caption>
    <tr> <td> 1</td><td> 1</td><td> 1</td></tr>
    <tr> <td>2 </td><td>2 </td><td> 2</td></tr>
    <tr> <td> 3</td><td> 3</td><td> 3</td></tr>
</table>

 

Nagłówek wiersza i kolumny

Zazwyczaj w tabelach są umieszczane nagłówki wierszy i kolumn, obrazujące ich treść. Domyślnie nagłówki są pokazywane za pomocą czcionki pogrubionej i w przypadku kolumn pozycjonowane na środku.

<th> </th>
<table border style=”width: 300px; “>
<caption>title of the table</caption>
<tr> <th>2000</th> <th>2001</th><th>2002</th> </tr>
    <tr> <td> 1</td><td> 1</td><td> 1</td></tr>
    <tr> <td>2 </td><td>2 </td><td> 2</td></tr>
    <tr> <td> 3</td><td> 3</td><td> 3</td></tr>
</table>
<table border cellpadding=”10″ width=”500″>
<caption>Table title</caption>
<tr><td></td><th>2000</th> <th>2001</th> <th>2002</th> <th>2003</th> <th>2004</th> </tr>
<tr style=”text-align: center; “><th>Element 1</th> <td>115</td><td>124</td><td>138</td><td>147</td><td>204</td></tr>
<tr style=”text-align: center; “><th>Element 2</th> <td>80</td><td>90</td><td>77</td><td>11</td><td>16</td></tr>
</table>

Sekcje tabeli – nagłówek, ciało i stopka

Tabela może mieć sekcje – część nagłówkową, część główną i stopkę. Elementy te są  przydatne przy określaniu wyglądu tabeli i wyświetlaniu tabeli.

<table width=”300″ border cellpadding=5>
<thead><tr><td colspan=”2″>Headline</td></tr></thead>
<tfoot><tr><td colspan=”2″>Footer</td></tr></tfoot>
<tbody>
<tr>
<td>Cell 1</td><td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td><td>Cell 4</td>
</tr>
</tbody>
</table>