„TWORZENIE TABEL W HTML”

 

W „arcie” tym zajmiemy się tworzeniem tabel na stronach WWW.  Co to tabela nikomu nie trzeba chyba tłumaczyć więc od razu przejdźmy do konkretów. Ogólnie przyjęło się tak, że definicję tabel umieszcza się między

<BODY> </BODY>

Aby poinformować przeglądarkę, że ma rysować tabelę należy wpisać <TABLE></TABLE> i to właśnie między te dwa znaczniki wpisuje się wszystkie informacje dotyczące naszej tabeli np.: ilość komórek, ich szerokość, rodzaj obramowania i inne o czym później.

 

Jeżeli chcemy dodać wiersz do tabeli wpisujemy <TR></TR> i już mamy pierwszy wiersz. Jeżeli chcemy dodać drugi to wpisujemy ten znacznik jeszcze raz np.:

<TABLE>

<TR></TR>

<TR></TR>

<TR></TR>

</TABLE>

Utworzy nam to pustą tabelę z trzema pustymi wierszami. Zanim cokolwiek wpiszemy do niej wpiszemy, należy zdefiniować komórki, do których będziemy mieli możliwość wpisywać dane. Każda komórka wpisana w wiersz tworzy odrębną kolumnę. Komórki wstawia się za pomocą znacznika  <TD></TD> . Im więcej będzie komórek w wierszu tym więcej będzie w nim kolumn  np.:

 

<TABLE border width="100%" height="100%">

 <tr>

  <td> Komórka w pierwszym wierszu, w pierwszej kolumnie </td>

  <td> Komórka w pierwszym wierszu, w drugiej kolumnie </td>

  <td> K komórka w pierwszym wierszu, w trzeciej kolumnie </td>

 </tr>

<tr>

 <td> Komórka w drugim wierszu, w pierwszej kolumnie </td>

 <td> Komórka w drugim wierszu, w drugiej kolumnie </td>

</tr>

<tr>

 <td> Komórka w trzecim wierszu, w pierwszej kolumnie </td>

</tr>

</TABLE>

 

itd... Jak już pewnie zauważyliście w definicji tabeli są jeszcze jakieś polecenia. Oto niektóre z nich:

BORDER – Obramowanie. Bez parametru przyjmuje wartość domyślną, a aby nadać własną stosujemy znak = i wpisujemy wartość w cyfrach np.: BORDER=10. Dzięki powyższemu trikowi możemy nadać tylko rozmiar obramowania tabeli. A jak zmienić obramowanie komórki? Od tego jest:

CELLSPACING np.: CELLSPACING=5.

Jeżeli sądzimy, że wpisywane dane do komórek znajdują się  zbyt blisko obramowania używamy CELLPADDING =’wartość’. Domyślnie ustawiony jest na 1.

Do określenia szerokości i wysokości tabeli oraz komórek służy polecenie WIDTH i HEIGHT. Kolejno oznaczają szerokość (x) i wysokość (y). Można stosować te polecenia wpisując wartości liczbowe jak i procentowe np.: WIDTH=”60%” – szerokość zawsze wynosić będzie 60% szerokości okna. Do „wypozycjonowania” tabeli na stronie służy polecenie ALIGN =”sposób” gdzie sposób to: LEFT (wyrównaj do lewej) RIGHT (wyrównaj do prawej) CENTER (pośrodku ekranu) np.:

 <TABLE ALIGN=LEFT WIDTH=100 HEIGHT=100>

...

 

Jeżeli chcemy „wypozycjonować” dane w komórce stosujemy powyższy schemat tyle, że w sekcji komórki <TD> czyli np.: <TD align=center>Tekst</td> W tym przypadku „tekst” zostanie „wycentrowany” względem komórki.

 

Powyższa reguła odnosi się tylko do orientacji danych w poziomie. Ale co zrobić, jak chcemy umieścić tekst w lewym górny rogu komórki? Do tego służy polecenie VALIGN np.:

<TD VALIGN =top> </TD>                         Wyrównuje tekst do górnego brzegu.
<TD VALIGN =middle> </TD>                   Wyrównuje tekst do środka komórki.
<TD VALIGN =bottom> </TD>.                 Wyrównuje tekst do dolnego brzegu.

 

Do ustalania koloru tła tabeli służy polecenie BGCOLOR =”dany_kolor” np.: <TABLE bgcolor=”red”> W tym przypadku tło tabeli będzie czerwone.

 

KOLORY

Black, Blue, Olive, Teal, Red, Navy, Lime, Fuchsia, White(White – biały, ale go na białym tle ozcywiście nie widać), Gray, Green, Purple, Silver , Yellow (yellow - żólty), Aqua, Maroon,

 

Tak samo robimy w przypadku komórek. Możemy np. zrobić sobie tęczę itd. J.

Jeżeli chcemy jako tło tabeli użyć pliku graficznego piszemy w definicji tabeli: BACKGROUND =”plik_graficzny”  np.:  <table background ="Grafika/tlo.gif">

 

Gdy znudzą się już nam stare, szare obramowanie tabeli dzięki BORDERCOLOR =”kolor” możemy zmienić jej kolor na dowolny.

 

Czym byłaby tabela bez podpisu. Aby podpisać tabelę np.: z góry wystarczy od razu pod definicją <TABLE> wpisać: <CAPTION ALIGN =top> Nasz tytuł tabeli</CAPTION>. Np.

 TABLE ALIGN=LEFT WIDTH=100 HEIGHT=100>

<CAPTION ALIGN=top> Nasz tytuł tabeli</CAPTION>.

...

Oczywiście dzięki poleceniu ALIGN możemy określić miejsce i sposób jego położenia..

 

 Jeżeli zamiast tekstu chcemy wstawić do komórki plik graficzny robimy to w ten sposób: <td><img src=”nazwa_pliku”></td>

 

To wszystko, co powinieneś wiedzieć na sam początek o tworzeniu tabel. Pamiętaj, że przy ich robieniu możesz dowolnie mieszać ze sobą poznane wcześniej polecenia. Pamiętaj też, że w HTML’u wielkość liter nie ma znaczenia. Świetnym tego przykładem jest moja stronka www.rpgmaly7.prv.pl

 

 

7-MAŁY-7