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.
<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 |
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 |
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 |
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 |
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 |
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 |
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
|
Bu hücreler | başka | ||||
veriler | içerir |
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 da iki satırlı bir tablodur |
Sayfanın sağına hizalanmıştır |
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 |
10)
A HTML 3.2 table
<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><BASE ...></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><BASEFONT ...></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><BGSOUND ...></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>
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) |