HTML   Lekcja 2.2   - Tabele jako element konstrukcyjny stron WWW

Na podstawie poznanych już znaczników moglibyśmy wykonać prostą stronę WWW, jednakże przy zmianie wielkości okna nasza strona będzie się zmieniać, dopasowując się jak płyn do kształtu naczynia. Ta sytuacja w większości przypadków nie będzie nam odpowiadać...

Do utrzymania stałych relacji wzajemnego położenia elemetów strony, a także ewentualnego zapewnienia jej sztywnej konstrukcji służą tabele. Wszystkie tabele wywodzą się z konstrukcji regularnych zbudowanych na siatce wzajemnie prostopadłych linii tworzących wiersze i kolumny.



Jak widać, tabelę wprowadzamy za pomocą znaczników <table> i </table> zaznaczających odpowiednio początek i koniec tabeli. Za wiersze tabeli odpowiedzialne są znaczniki  <TR> i  </TR> zaznaczające odpowiednio początek i koniec wiersza.
Kolumny nie są definiowane osobno, zamiast tego definiujemy poszczególne komórki tabeli. W każdy wierszu tabeli powinna znajdować się taka sama liczba komórek. Za komórki odpowiedzialne są znaczniki <TD></TD> zaznaczające odpowiednio początek i koniec komórki. Pomiędzy tymi znacznikami znajduje się zawartość komórki tabeli. Może nią być dowolny fragment dokumentu, tekst , grafika, a także inna tabela <TD>zawartość komórki</TD>.

Komórki tabeli można ze sobą łączyć, jednakże tylko tak, że w wyniku łączenia powstaje prostokąt. Efekt łączenia komórek uzyskujemy przez wprowadzenie do komórki atrybutów <colspan> i <rowspan> podając przy tym ilość połączonych w pionie lub poziomie komórek. Atrybut <colspan> łączy sąsiadujące ze sobą komórki znajdujące się w tym samym wierszu np. <colspan=3> połączy trzy komórki. Ma to wpływ na kod opisujący tabelę ponieważ z trzech par znaczników opisujących trzy komórki pozostaje tylko jedna para. Podobnie dzieje się w przypadku użycia atrybutu <rowspan>, który łączy komórki znajdujące się w tych samych kolumnach.
I w tym przypadku również pozostają jedynie znaczniki pierwszej komórki. Pokażemy to na przykładzie:

1 2 34
5678 12 16
91011
13 14 17 1815
1920
21222324

<table border=1 width=200 height=100 bgcolor=#FFFFEF align=left>
<TR><TD colspan=3>1 2 3</TD><TD>4</TD> </TR>
<TR><TD>5</TD><TD>6</TD><TD>7</TD><TD rowspan=3 bgcolor=aqua>8 12 16</TD> </TR>
<TR><TD>9</TD><TD>10</TD><TD>11</TD></TR>
<TR><TD colspan=2 rowspan=2>13 14 17 18</TD><TD>15</TD></TR>
<TR><TD>19</TD><TD>20</TD> </TR>
<TR><TD>21</TD><TD>22</TD><TD>23</TD><TD>24</TD> </TR>
</table>

Zauważmy, że wymiary niektórych komórek uległy zmianie dopasowując się do powiększonej zawartości, inne zaś dopasowały swoje wymiary do tych pierwszych. Wymiary komórek podobnie jak wymiary całej tabeli będziemy definiować za pomocą atrybutów width oraz height. Decydujące znaczenie ma jednak zawartość komórki i jeśli będzie ona zbyt duża komórka ulegnie rozszerzeniu wprowadzając zmiany w kolumnie i wierszu w którym się znajduje. Dlatego powinniśmy dostosowywać wymiary komórek do zawartości którą chcemy w nich zamieścić.

Ten sam atrybut wpisany w znacznik <TD> działa podobnie lecz odnosi się do zawartości komórki

Atrybuty odnoszace się do znacznika <table> to :
border - brak tego atrybutu lub przyrównanie go do zera powoduje zniknięcie siatki tabeli.
align - działa jak przy obrazku, może miec też wartość center, i wtedy centruje tabelę na stronie.
width- ustawia szerokość tabeli
height- ustawia wysokość tabeli
bgcolor - powoduje wyświetlenie tła tabeli w odpowiednim kolorze.
background - powoduje odpowiednio wstawienie do tabeli tła w postaci obrazka.
cellspacing - wstawia dodatkowe odstępy pomiędzu komórkami tabeli (w pixelach)
cellpadding - wstawia odstępy pomiędzy ściankami, a zawartością komórki (w pixelach)

Atrybuty odnoszace się do znacznika <TD> to:
widthUstawia szerokość komórki
heightUstawia wysokość komórki
bgcolor> - powoduje wyświetlenie tła komórki w odpowiednim kolorze.
background - powoduje odpowiednio wstawienie do komórki tła w postaci obrazka.
alignodnosi się do zawartości komórki i może mieć wartość left, right lub center
valignodnosi się do zawartości komórki i może mieć wartość top, middle lub bottom


[dalej]