HTML Tabele - Lekcija 4

Nastavljamo dalje. Prvo uklonimo CELLPADDING i CELLSPACING, pa se vratimo jednostavnoj tabeli.

<TABLE BORDER=3>

<TR>
<TD>Pera</TD>
<TD>Laza</TD>
<TD>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima Đole

Korisna funkcija je zadavanje boja pozadine za pojedinačne ćelije, redove, ili čitave tabele. Za to se koristi atribut BGCOLOR (kao kod <BODY> taga).

<TABLE BORDER=3 BGCOLOR="#FFCC66">

<TR>
<TD>Pera</TD>
<TD>Laza</TD>
<TD>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima Đole

<TABLE BORDER=3>

<TR BGCOLOR="#FF9999">
<TD>Pera</TD>
<TD>Laza</TD>
<TD>Mika</TD>
</TR>

<TR BGCOLOR="#99CCCC">
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima Đole

<TABLE BORDER=3>

<TR BGCOLOR="#FFCCFF">
<TD>Pera</TD>
<TD>Laza</TD>
<TD>Mika</TD>
</TR>

<TR>
<TD BGCOLOR="#FF0000">Gaga</TD>
<TD>Sima</TD>
<TD BGCOLOR="#3366FF">Đole</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima Đole

Ovde se nalazi priručna lista boja, koju sam koristio za biranje pozadinskih boja. Takođe, možete koristiti i Color Picker za dodatno eksperimentisanje sa bojama.

Još jedna stvar u vezi sa ovim bojama... atribut za boju u <TD> tagu jači je od onog u <TR> tagu, a ovaj od onog u <TABLE> tagu. Mislim da će sledeći primer ovo razjasniti dodatno:

<TABLE BORDER=3 BGCOLOR="#FF6633">

<TR BGCOLOR="#009900">
<TD BGCOLOR="#9999FF">Pera</TD>
<TD>Laza</TD>
<TD>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima Đole

Pređimo na sledeće atribute - COLSPAN i ROWSPAN. Pretpostavimo da je Pera prebio Lazu i da ga je izbacio iz tabele. U tom slučaju, kôd i tabela će izgledati ovako:

<TABLE BORDER=3>

<TR>
<TD>Pera</TD>
<TD>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Mika
Gaga Sima Đole
Rezultat: ostaje jedno prazno mesto.

Ali, šta ako Pera želi da zauzme i Lazinu ćeliju i priključi je svojoj? Pa, ništa posebno... moraće da koristi atribut COLSPAN.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=2>Pera</TD>
<TD>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Mika
Gaga Sima Đole

Mika se uplašio, te pobeže (nikad i nije bio baš previše hrabar). Pera je to iskoristio, tako što je zauzeo i njegovu (tj. Mikinu) ćeliju. Kad je već uradio to, odlučio je da stane u sredinu.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER>Pera</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera
Gaga Sima Đole

Uzgred, sva ostala HTML formatiranja mogu se primeniti unutar ćelije. Podebljajmo Peru, na primer.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER><B>Pera</B></TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera
Gaga Sima Đole

Takođe, Pera Vas može odvesti direktno na moj sajt.

<TABLE BORDER=3>

<TR>
<TD COLSPAN=3 ALIGN=CENTER>
<A HREF="http://zoniweb.cjb.net">Pera</A></TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera
Gaga Sima Đole

Dobro... sada možemo da vratimo Lazu i Miku, pa da zaronimo u neistražene tajne atributa <ROWSPAN>.

<TABLE BORDER=3>

<TR>
<TD>Pera</TD>
<TD>Laza</TD>
<TD>Mika</TD>
</TR>

<TR>
<TD>Gaga</TD>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Laza Mika
Gaga Sima Đole

Verovatno ste i sami pretpostavili... atribut <ROWSPAN> je sličan atributu <COLSPAN>, osim što ovaj prvi deluje na redove (a ne na kolone).
Ako Gaga pobegne, a Pera zauzme njegovu ćeliju, rezultat će izgledati ovako:

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>Pera</TD>
<TD>Laza</TD>
<TD>Mika</TD>
</TR>

<TR>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Laza Mika
Sima Đole

Naravno, i ovi atributi se mogu koristiti istovremeno.

<TABLE BORDER=3>

<TR>
<TD ROWSPAN=2>Pera</TD>
<TD COLSPAN=2>Laza</TD>
</TR>

<TR>
<TD>Sima</TD>
<TD>Đole</TD>
</TR>

</TABLE>

Pera Laza
Sima Đole

<--Lekcija 3        Lekcija 5-->

Sadržaj Lekcije
Uvod - 1 - 2 - 3 - 4 - 5 - 6 - 7		 Indeks "Barebones"
HTML vodič
Z o N i . W e b !