Bir tablo temel olarak, belirli sayıdaki satır ve sütunlardan oluşur. Keşişme noktalarının(satır, sütun) arasında kalan dörtgen alanlara hücreler(cells, gözler) adı verilir.
Tablo, hücreleri içinde bulunduran ve içersine resim, yazı ve form yerleştirilebilen bir şablondur.
Tablo hazırlanırken <table>...</table> tag’ı kullanılır.
Bir tabloda herbir satır için <tr>table row..</tr>
Herbir sütun için <td> table data cell..</td> parametreleri kullanılır.
Başlık belirtmek içinde, <th> table header..</th> parametresi kullanılır.
Tabloya çerçeve yerleştirmek için, border parametresi kullanılır. Border parametresine verilen sıfır ve üstü bir değer tablonun border(çerçeve, sınır çizgileri) kalınlığını belirtir.
<table border=”2”>
Tablo’nun satır ve sütunlarının birbirlerinden çizgiler ile ayrılmasını sağlar.
<table>Tablonun başını </table> Tablonun sonunu belirler.
<tr> Bir satırın başını </tr> Bir satırın sonunu belirler.
<th> Bir hücre başlığının başını </th> Bir hücre başlığının sonunu belirler.
Th tag’ı etkisi açısından td tag’ı ile benzerlik gösterir. Genellikle tablonun ilk satırında kullanılır ve metin otomatik olarak ortalanır.
<td>Bir hücrenin başını </td> Bir hücrenin sonunu belirler.
<table border=”2”>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table> Tablo Hizalama
<table align=#>....</table>
#=left, right, center
Tablo sayfanın soluna, sağına yada ortasına hizalanır.
Örnek kod aşağıda verilmiştir.
<html>
<table align="right" border="10" width="50% bordorcolor=”black”>
<tr bgcolor="yellow">
<td> </td>
<td> </td>
Bir harflik aralık
None-Breaking Space
Ekstra yatay boşluk
<td> </td> None-Breaking Space
Ekstra yatay boşluk
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<h5> Align="right" parametresi kullanıldığında,<br>
örnektende görüldüğü gibi, <br>
tablo sayfanın sağına hizalanacaktır.<br>
tablodan sonra gelen<br>
yazılar ise tablonun soluna hizalanacaktır.</h5>
</html> Tablo Başlığı
<caption align=#>......</caption>
#=left, center, right
Tablo başlığını, tablonun soluna, ortasına yada sağına yerleştirir.
<caption valign=#>....</caption>
#=top, bottom
Tablo başlığını, tablonun üst ya da alt kısmına yerleştirir.
<p><font face="Arial">
<h1><center>HTML'de Tablo</center></h1>
<table align=center border=10 bordercolor="black" bgcolor="pink" width=80%>
<caption align=bottom><b>Bu tablomuzun Alt-yazısı (caption)</b><br>
<h2>Tablo-1:Örnek Tablo</h2>
</caption>
<thead align=center>
<h2>Bu tablomuzun Başlığı (thead) DENEME TABLO</h2>
</thead>
<tr>
<th>Birinci sütun başlığı (th)<br><b>Sütun 1</b></th>
<th>İkinci sütun başlığı(th)<br><b>Sütun 2</b></th>
<th>Üçüncü sütun başlığı(th)<br><b>Sütun 3</b></th>
<th>Dördüncü sütun başlığı(th)<br><b>Sütun 4</b></th>
</tr>
<tr>
<td>Satır 1 Sütun 1</td>
<td>Satır 1 Sütun 2</td>
<td>Satır 1 Sütun 3</td>
<td>Satır 1 Sütun 4</td>
</tr>
<tr>
<td>Satır 2 Sütun 1</td>
<td>Satır 2 Sütun 2</td>
<td>Satır 2 Sütun 3</td>
<td>Satır 2 Sütun 4</td>
</tr>
</table>
Tablo Kenar Rengi
<table bordercolor=#>
Tablo çerçevesinin tüm kısımlarını aynı renk yapar.
<table border="4" bordercolor="#333333" width=150 height=75>
<th>vizeort</th>
<th>final</th></tr>
<tr><td>9901</td>
<td>80</td>
<td>90</td></tr>
</table> <table bordercolorlight=#>
Tablo çerçevesinin ışığa bakan kısmının rengi.
<table bordercolordark=#>
Tablo çerçevesinin gölgeli kısmının rengi.
#=hexadecimal renk kodu yada rengin İngilizce adı
<table border="3" width=50% height=25%
bordercolorlight="red" bordercolordark="blue"><tr><th>ögno</th>
<th>vizeort</th>
<th>final</th></tr>
<tr><td>9901</td>
<td>80</td>
<td>90</td>
</tr>
</table>
Tablo Rengi
<table bgcolor=#>
Tablo arka planı(zemin) rengini oluşturulur.
<table background="URL">
Tablo arka planına(zemin) resim oluşturulur.
#=rrggbb Hex Numarasi veya rengin İngilizce adı
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia,, White, Green, Purple, Silver, Yellow, Aqua
Tablonun Boyutları
<table width=#>
Tablo sütun hücrelerinin genişliğini belirler.
<table height=#>
Tablo satır hücrelerinin yüksekliğini belirler.
#=piksel olarak 300, 150 v.b.gibi. ya da genişlik ve yükseklik % olarak 50%, 75% v.g.gibi değerler(web tarayıcısı sayfasına göre, tablonun ekran boyuna göre genişlik yüzdesi) verilir.
Width ve height parametreleri ile hücrenin boyutları belirlenir. Yalnız height komutu ile tek sütunlu bir tabloda her hücrenin yüksekliğini değiştirebilirken, width komutu ile her hücreyi değiştirilemez. En büyük width değeri tüm sütun için geçerli olacaktır. Aynı şekilde tek satırlı tabloda width değerini her hücre için değiştirebilirken en büyük height değeri tüm satır için geçerli olacaktır.
<table border="3" bordercolor="#333333" width=170 height=100>
<th>vizeort</th>
<th>final</th></tr>
<tr><td>9901</td>
<td>80</td>
<td>90</td></tr>
</table> Tablo Metin Düzeni
<tr align=#> #=left, center, right
Satır içinde, sağa, sola ortaya hizalar.
<th align=#>
Başlık hücresi içinde, sağa, sola ortaya hizalar.
<td align=#>
Hücre içinde, sağa, sola ortaya hizalar.
<html>
<table border=2 bordercolor="#000000" width=300>
<tr> <th align=center>Adı</th>
<th align=right>Göbekadı</th>
<th align=left>Soyadı</th>
<tr> <td align=left>Ertuğrul</td>
<td align=center>Gökhan</td>
<td align=right><b>KAÇAN</b></td>
</table>
</html>Bir satır yada hücre içindeki bilgilerin dikey(düşey) hizalanması söz konusu olduğunda aşağıda belirtilen tag’lar kullanılır.
<tr valign=#> #=top, middle, bottom
Satır içinde bilgileri üste, alta yada ortaya dikey hizala.
<th valign=#>
Satır içinde bilgileri üste, alta yada ortaya dikey hizala.
<td valign=#>
Satır içinde bilgileri üste, alta yada ortaya dikey hizala.
<html>
<table border=2 bordercolor="#000000" width=300 height=100>
<tr> <th valign=top>Adı</th>
<th valign=middle>Göbekadı</th>
<th valign=bottom>Soyadı</th>
<tr> <td valign=middle>Ertuğrul</td>
<td valign=top>Gökhan</td>
<td valign=bottom>KAÇAN</td>
</table>
</html>Tablo Satır ve Sütun Hücrelerinin Birleştirilmesi
Column Span <tr colspan=#> #=Birleştirilecek hücre sayısı
Sütun hücrelerini birleştirir.
Row Span <tr rowspan=#>
Satır hücrelerini birleştirir.
Aynı satırdaki hücreleri birleştirmek için colspan, aynı sütundaki hücreleri birleştirmek için de rowspan parametresini kullanılır. Birleştirilen hücreye ait <td>..</td> etiketi silinir.
<html>
<table border=2 bordercolor="#000000" width=300 height=150><tr><th colspan=4>Kişişel Bilgiler</th> </tr>
<tr><td align=left>Adı</td>
<td align=center>Göbekadı</td>
<td align=right>Soyadı</td>
<td align=center>Medeni Durumu</td> </tr>
<tr> <td valign=middle>Ertuğrul</td>
<td valign=top>Gökhan</td>
<td valign=bottom>KAÇAN</td>
<td valign=middle>Evli</td> </tr>
</table></html>
<html>
<table border=2 bordercolor="#000000" width=300 height=150>
<tr align=left> <th rowspan=2>Kişişel Bilgiler</th>
<td >Adı</td>
<td>Göbekadı</td>
<td>Soyadı</td>
<td>Medeni Durumu</td> </tr>
<tr valign=middle><td >Ertuğrul</td>
<td>Gökhan</td>
<td>KAÇAN</td>
<td>Evli</td> </tr>
</table>
</html>
Hücre Aralığı
<table cellspacing=#> #=piksel olarak verilen değer
İki hücre arasındaki mesafeyi piksel olarak ayarlar. Bir başka ifadeyle, hücreler arasında yatay ve düşey doğrultuda bir mesafe ayarlar.
<html>
<table cellspacing=20 border=2 bordercolor="#000000"
width=400 height=200>
<tr align=center> <th colspan=3>Kişişel Bilgiler</th> </tr>
<tr> <td >Adı</td> <td>Göbekadı</td> <td>Soyadı</td> </tr>
<tr valign=middle><td >Ertuğrul</td> <td>Gökhan</td><td>KAÇAN</td> </tr>
</table> </html>
Colspec
Sütunların ebadını ayarlar. Sütunlar soldan sağa, bir büyük harf ve onu izleyen bir sayı ile listelenirler (örneğin <COLSPEC="L20 C8 L10" > ). Hücrenin ihtiva etttiği yazıları L harfi sola, R harfi sağa alır. C harfi ortalamak için kullanılır. Burada belirteç opsiyonları mutlaka büyük harfle yazılır.
Hücre ile Veri Aralığı
<table cellpadding=#> #=piksel olarak verilen değer
Hücredeki veri ile hücre ve sınırlar arasındaki mesafeyi ayarlar.
<html>
<table cellpadding=15 cellspacing=20 border=2 bordercolor="#000000" width=400 height=200>
<tr align=center> <th colspan=3>Kişişel Bilgiler</th> </tr>
<tr> <td >Adı</td>
<td>Göbekadı</td>
<td>Soyadı</td> </tr>
<tr valign=middle><td >Ertuğrul</td>
<td>Gökhan</td>
<td>KAÇAN</td> </tr>
</table>
</html>
Tabloda başlık ve gövde
<thead> ... </thead> - Table Header<tbody> ... </tbody> - Table Body
<tfoot> .... </tfoot> - Table Footer
Tablolar da HTML sayfasında olduğu gibi başlık (head) ve gövde (body) bölümlerine ayrılabilir. Tabloda başlığı <thead> gövdeyi <tbody> etiketleri arasına yazarız. <caption> etiketi ile ikinci bir açıklama vermek mümkündür.
Sütun başlıklarına gelince, her bir başlık <th> etiketi ile belirtilir ve bunlar etiketinde olduğu gibi <tr>...</tr> arasına yazılır. Tabloda satır ve sütunları belirten <tr> ve <td> etiketleri <tbody>...</tbody> arasına alınır.
<html>
<table border="3" width=300 bordercolor="#000000">
<thead>Tablo Başlığı (thead)</thead>
<caption align="bottom">alt-yazı (caption)<caption>
<tr>
<th>1.Sütun</th> <th>2.Sütun</th> <th>3.Sütun</th>
</tr><tbody>
<tr><td>hücre1</td> <td>hücre2</td> <td>hücre3</td>
</tr>
<tr>
<td>hücre4</td> <td>hücre5</td> <td>hücre6</td>
</tr>
<tr>
<td>hücre7</td> <td>hücre8</td> <td>hücre9</td>
</tr>
</tbody>
</table>
</html>
<html>
<table border=3 bordercolor="#000000" width=300>
<thead>
<tr>
<th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr>
<td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr>
<td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi</td>
</tbody>
<tfoot>
<tr><td colspan=2 align=right>Kişi Adedi: </td>
<td>2</td>
</tfoot>
</table>
</html>
kolonlu grup
<colgroup align=#> #=left, right, center<html>
<table border=3 bordercolor="#000000" width=400>
<colgroup align=left> <colgroup align=center> <colgroup align=right>
<thead>
<tr> <th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr> <td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr> <td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi</td>
</tbody>
<tfoot>
<tr><td colspan=2 align=right>Kişi Adedi: </td> <td>2</td>
</tfoot> </table>
</html>
kolon özellikleri
<col span=#> #=birleştirilecek sütun hücresi sayısı
<col align=#> #=left, right, center
<html>
<table border=3 bordercolor="#000000" width=400>
<colgroup> <col align=center span=2> <colgroup align=right>
<thead>
<tr> <th>ÖĞ_NO</th><th>ADI_ SOYADI</th><th>DURUMU</th>
</thead>
<tbody>
<tr> <td>1990</td><td>Ali VELİ</td><td>Katılım Belgesi</td>
<tr> <td>1991</td><td>Ayşe FATMA</td><td>Başarı Belgesi</td>
</tbody>
<tfoot>
<tr><td colspan=2 align=right>Kişi Adedi: </td> <td>2</td>
</tfoot>
</table>
</html>
Hiç yorum yok:
Yorum Gönder