Podstawy tworzenia tabel w HTML.pdf

(420 KB) Pobierz
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>
819495659.058.png 819495659.069.png
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
819495659.080.png 819495659.091.png 819495659.001.png 819495659.009.png 819495659.010.png 819495659.011.png 819495659.012.png 819495659.013.png 819495659.014.png 819495659.015.png 819495659.016.png 819495659.017.png 819495659.018.png 819495659.019.png 819495659.020.png 819495659.021.png 819495659.022.png 819495659.023.png 819495659.024.png 819495659.025.png 819495659.026.png 819495659.027.png 819495659.028.png 819495659.029.png 819495659.030.png 819495659.031.png 819495659.032.png 819495659.033.png 819495659.034.png 819495659.035.png 819495659.036.png 819495659.037.png 819495659.038.png 819495659.039.png 819495659.040.png 819495659.041.png
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 ) .
819495659.042.png 819495659.043.png 819495659.044.png 819495659.045.png 819495659.046.png 819495659.047.png 819495659.048.png 819495659.049.png 819495659.050.png 819495659.051.png 819495659.052.png 819495659.053.png 819495659.054.png 819495659.055.png 819495659.056.png 819495659.057.png 819495659.059.png 819495659.060.png 819495659.061.png 819495659.062.png 819495659.063.png 819495659.064.png
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>
819495659.065.png 819495659.066.png 819495659.067.png 819495659.068.png 819495659.070.png 819495659.071.png 819495659.072.png 819495659.073.png 819495659.074.png 819495659.075.png 819495659.076.png 819495659.077.png 819495659.078.png 819495659.079.png 819495659.081.png 819495659.082.png 819495659.083.png 819495659.084.png 819495659.085.png 819495659.086.png 819495659.087.png 819495659.088.png 819495659.089.png
</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>
819495659.090.png 819495659.092.png 819495659.093.png 819495659.094.png 819495659.095.png 819495659.096.png 819495659.097.png 819495659.098.png 819495659.099.png 819495659.100.png 819495659.101.png 819495659.002.png 819495659.003.png 819495659.004.png 819495659.005.png 819495659.006.png 819495659.007.png 819495659.008.png

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin