Tabela w html

WSTAWIANIE TABELI NA STRONĘ

Tabelę wstawiamy na stronę, by zaprezentować dane liczbowe lub rozmieścić poszczególne elementy występujące na stronie.

Tabela składa się z wierszy i komórek.

Tabelę wstawiamy komendą <table> </table>

wiersze tworzy komenda <tr> </tr>

komórki tworzy komenda <td> </td>

Formatowanie tabeli:

border="x" - grubość obramowania wyrażone w pikselach

valign="middle" (top, bottom) - położenie obiektu w komórce tabeli - na środku, u góry, na dole

align="center" (left, right) - położenie obiektu w komórce tabeli, na środku, z lewej, z prawej

width="x" - szerokość komórki/tabeli wyrażona w pikselach

height="y" - wysokość komórki wyrażona w pikselach

bgcolor="angielska nazwa koloru" - kolor wypełnienia komórki

bordercolor="angielska nazwa koloru" - kolor obramowania i linii podziałów wewnętrznych tabeli

marginwidth="x" - lewy i prawy margines w komórce określony w pikselach

margineheight="y" - górny i dolny margines w komórce określony w pikselach


 Poniżej umieszczam przykład tabeli złożonej z 3 wierszy, każdy po 3 komórki. Środkowe komórki dwóch pierwszych wierszy wypełnione są kolorem szarym, a w środkowej komórce wiersza trzeciego wstawiony jest obrazek. Cała tabela otoczona jest ramką (border) w rozmiarze 4. Tekst w pozostałych komórkach jest wyśrodkowany w poziomie i pionie.


<table border="4" width="600" height="300"
<tr>
<td width="200" height="100" valign="middle" align="center"> Tekst </td>
<td width="200" height="100" valign="middle" align="center" bgcolor="gray"> Tekst </td>
<td width="200" height="100" valign="middle" align="center"> Tekst </td>
</tr>
<tr>
<td width="200" height="100" valign="middle" align="center"> Tekst </td>
<td width="200" height="100" valign="middle" align="center" bgcolor="gray"> Tekst </td>
<td width="200" height="100" valign="middle" align="center"> Tekst </td>
</tr>
<tr>
<td width="200" height="100" valign="middle" align="center"> Tekst </td>
<td width="200" height="100" valign="middle" align="center" bgcolor="gray"> <img src="obrazek.jpg"></td>
<td width="200" height="100" valign="middle" align="center"> Tekst </td>
</tr>
</table>