Tablo Örnekleri

Aşağıdaki örnekler HomeSite Help dosyasından alınmıştır.

NOT : 5 inci ve 6-ıncı tablolarda <TH> öğeleri <TD> öğeleri içine yuvalanmıştır. Örnekler doğru olmakla birlikte, başlıkları veri hücreleri içine yerleştirmek çok uygun değildir.

İçindekiler

1) Basit bir Tablo



<TABLE BORDER>

<TR> <TD>Veri Hücresi 1</TD><TD>Veri Hücresi 2</TD> </TR> 

<TR><TD>Veri Hücresi 3</TD><TD>Veri Hücresi 4</TD> </TR>

</TABLE>

Veri Hücresi 1 Veri Hücresi 2
Veri Hücresi 3 Veri Hücresi 4

top

2) Satır Germe: ROWSPAN

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>komutu iki satırı geriyor:</TD>
<TD>Bu hücrelers</TD><TD>başka</TD>
</TR>
<TR>
<TD>veriler</TD><TD>içerir</TD>
</TR>
</TABLE>
Bu hücre 2 satır geriyor Bu hücreler başka
veriler içerir

top

3) Kolon Germe: COLSPAN

<TABLE BORDER>
<TR>
<TD>Veri Hücresi 1</TD>
<TD COLSPAN=2>Bu hücre 2 kolon geriyor:</TD>
</TR>
<TR>
<TD>Veri Hücresi 2</TD><TD>Veri Hücresi 3</TD><TD>Veri Hücresi 4</TD>
</TR>
</TABLE>
Veri Hücresi 1 Bu hücre 2 kolon geriyor:
Veri Hücresi 2 Veri Hücresi 3 Veri Hücresi 4

top

4) Tabloya Başlık Yazma:

<TABLE BORDER>
<TR>
<TH>Netscape</TH><TH>Internet Explorer</TH><TH>Mosaic</TH>
</TR>
<TR>
<TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR>
<TD>X</TD><TD>-</TD><TD>X</TD>
</TR>
</TABLE>
Netscape Internet Explorer Mosaic
X X -
X - X

top

5) Örnek:

<TABLE BORDER>
<TR>
<TD><TH ROWSPAN=2></TH>
<TH COLSPAN=3>Browser</TH></TD>
</TR>
<TR>
<TD><TH>Netscape</TH><TH>Internet Explorer</TH>
<TH>Mosaic</TH></TD>
</TR>
<TR>
<TH ROWSPAN=2>Element</TH>
<TH><DFN></TH><TD>-</TD><TD>X</TD>
<TD>-</TD>
</TR>
<TR>
<TH><DIR></TH><TD>X</TD><TD>X</TD>
<TD>X</TD>
</TR>
</TABLE>
Browser
Netscape Internet Explorer Mosaic
Element <DFN> - X -
<DIR> X X X

top

6) Yatay/Düşey Hizalama: ALIGN/VALIGN
Bu tablo, yukarıdakine ALIGN ve VALIGN nitelemelerini ekleyerek, görünümü iyileştirmektedir. 

<TABLE BORDER>
<TR>
<TD><TH ROWSPAN=2></TH>
<TH COLSPAN=3>Browser</TH></TD>
</TR>
<TR>
<TD><TH>Netscape</TH><TH>Internet Explorer</TH>
<TH>Mosaic</TH></TD>
</TR>
<TR>
<TH ROWSPAN=2 VALIGN=top>Element</TH>
<TH><DFN></TH>
<TD ALIGN=center>-</TD>
<TD ALIGN=center>X</TD>
<TD ALIGN=center>-</TD>
</TR>
<TR>
<TH><DIR></TH>
<TD ALIGN=center>X</TD>
<TD ALIGN=center>X</TD>
<TD ALIGN=center>X</TD>
</TR>
</TABLE>
Browser
Netscape Internet Explorer Mosaic
Element <DFN> - X -
<DIR> X X X

top

7) İç-içe Tablolar
Tablolar iç-içe yuvalanabilir. Bu tablo ROWSPAN nitelemesini kullanarak, hücrelerinde 'basit' bir tablo içermiş oluyor. 

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>Bu hücre 2 satır geriyor
<TABLE BORDER>
<TR>
<TD>Veri Hücresi 1</TD><TD>Veri Hücresi 2</TD>
</TR>
<TR>
<TD>Veri Hücresi 3</TD><TD>Veri Hücresi 4</TD>
</TR>
</TABLE>
</TD>
<TD>Bu hücreler</TD><TD>başka</TD>
</TR>
<TR>
<TD>veriler</TD><TD>içerir</TD>
</TR>
</TABLE>
Bu hücre 2 satır geriyor
Veri Hücresi 1 Veri Hücresi 2
Veri Hücresi 3 Veri Hücresi 4
Bu hücreler başka
veriler içerir

top

8) Kayan Tablolar

<TABLE ALIGN=left BORDER WIDTH=50%>
<TR> <TD>Bu iki satırlı bir tablodur</TD>
</TR>
<TR>
<TD>Sayfanın soluna hizalanmıştır </TD>
</TR>
</TABLE>
Bu text tablonun saðına düzenli olarak yerleşir.
<BR CLEAR=all>
<HR>
<P><br>
<TABLE ALIGN=right BORDER WIDTH=50%>
<TR>
   <TD>Bu da iki satırlı bir tablodur </TD>
</TR>
<TR>
   <TD>Sayfanın saðına hizalanmıştır </TD>
</TR>
</TABLE>
Bu text tablonun soluna düzenli olarak yerleşir.
<BR CLEAR=all>
<HR>

 
 
 
Bu 2 satırlı bir tablodur 
Sayfanın soluna hizalanmıştır 

Bu text tablonun
saðına düzenli olarak yerleşir.



Bu da iki satırlı bir tablodur 
Sayfanın sağına hizalanmıştır

Bu text tablonun soluna
düzenli olarak yerleşir.


top

9) Tabloyu Renklendirme
NOTE :Netscape bu tablonun kenarlarını renklendirmez. 

<TABLE BORDER BGCOLOR=Silver BORDERCOLOR=Black WIDTH=50%>
<TR>
<TD>Bu birinci hücredir</TD>
<TD>Bu ikinci hücredir</TD>
</TR>
<TR BORDERCOLOR=Red BGCOLOR=Green>
<TD>Bu üçüncü hücredir</TD>
<TD>Bu dördüncü hücredir</TD>
</TR>
<TR BORDERCOLOR=Red BGCOLOR=Green>
<TD BORDERCOLOR=Yellow>Bu beşinci hücredir</TD>
<TD BGCOLOR=White>Bu altıncı hücredir</TD>
</TR>
</TABLE>
Bu birinci hücredir Bu ikinci hücredir
Bu üçüncü hücredir Bu dördüncü hücredir
Bu beşinci hücredir Bu altıncı hücredir

top

IEx10) A HTML 3.2 tableIEx

<TABLE BORDER FRAME=hsides RULES=cols>
<COL ALIGN=left>
<COLGROUP SPAN=3 ALIGN=center VALIGN=middle>
<THEAD>
<CAPTION ALIGN=center><FONT SIZE=+1><B>
A section of the Comparison Table</B></FONT>
</CAPTION>
<TR>
<TD>Element</TD><TD><B>Internet Explorer</B></TD>
<TD><B>Netscape</B></TD><TD><B>Mosaic</B></TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD><B></TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD>&lt;BASE ...&gt;</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD> ...HREF</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD> ...TARGET</TD><TD>X</TD><TD>X</TD><TD></TD>
</TR>
<TR>
<TD>&lt;BASEFONT ...&gt;</TD><TD>X</TD><TD>X</TD><TD></TD>
</TR>
<TR>
<TD VALIGN=top> ...SIZE</TD><TD>X<BR><FONT SIZE=-1>
(only visible<BR>when FONT<BR>SIZE= used<BR>
as well)</FONT></TD><TD VALIGN=top>X</TD>
<TD></TD>
</TR>
<TR>
<TD> ...FACE</TD><TD>X</TD><TD></TD><TD></TD>
</TR>
<TR>
<TD VALIGN=top>&lt;BGSOUND ...&gt;</TD><TD VALIGN=top>X</TD>
<TD></TD><TD>X<BR><FONT SIZE=-1>(will spawn<BR>player for<BR>
.mid files)</FONT></TD>
</TR>
</TBODY>
<TFOOT></TFOOT>
</TABLE>
Browserları Mukayese Eden Bir Tablo

Element Internet Explorer Netscape Mosaic
<B> X X X
<BASE ...> X X X
...HREF X X X
...TARGET X X
<BASEFONT ...> X X
...SIZE X
(Ancak
FONT
SIZE= ...
kullanılırsa görünür)
X
...FACE X
<BGSOUND ...> X X
(.mid dosyaları
yardımıyla
çalışır)

top

© 1995-1998, Stephen Le Hunte