Web Tasarım ve Programlama #5-: Tablolar (Tables)
HTML- Tablolar
<Table> Tablo eklemek için kullanılan etikettir.
<TR> Tablo içerisinde satır oluşturmak için kullanılır.
<TD> Tablo içerisinde sütun oluşturmak için kullanılır.
<TH> Tablonun istenilen hücrelerine başlık ekler.
Border: Border parametresi, hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. Border=0 olduğu zaman çerçeve tarayıcıda görünmez. Web sayfası hazırlama sürecinde bu seçenek sıklıkla kullanılmaktadır.
ÖRNEK:
<table border=”1″>
<tr>
<th>Program</th>
<th>Üretici</th>
<th>Açıklama</th>
</tr>
<tr>
<td>Dreamweaver</td>
<td>Adobe</td>
<td>Kod editörü</td>
</tr>
<tr>
<td>Photoshop</td>
<td>Adobe</td>
<td>Resim düzenleme programı</td>
</tr>
<tr>
<td>Filezilla</td>
<td>GNU</td>
<td>FTP istemcisi</td>
</tr>
<tr>
<td>Notepad++</td>
<td>GNU</td>
<td>Kod editörü</td>
</tr>
</table>
Bordercolor: Border parametresi ile kalınlığı belirlenen çerçevenin rengini ayarlamak için kullanılır.
Bgcolor: Tablonun veya istediğimiz hücre veya hücrelerin arka plân rengini değiştirmek için kullanılır.
Background: Tablonun veya istenilen hücrenin arka plânına resim eklemek için kullanılır.
Width: Tablonun veya hücrenin pixel cinsinden genişliğini belirlemek için kullanılır. <table width=”200”> Tablo genişliğini belirlemek için kullanılır. <td width=”200”> Hücre genişliğini belirlemek için kullanılır.
Height: Tablonun pixel cinsinden yüksekliğini belirlemek için kullanılır. <table height=”200”> Tablo geniĢliğini belirlemek için kullanılır. <td height=”200”> Hücre geniĢliğini belirlemek için kullanılır.
Colspan: Colspan, aynı satırdaki hücreleri birleştirmek için kullanılır.
Rowspan: Rowspan, aynı sütundaki hücreleri birleştirmek için kullanılır.
Cellspacing: Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel türünden ayarlamak için kullanılır.
Cellpadding: Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar olacağını belirlemek için kullanılır.
Örnek:
<table border=”3″ bordercolor=”red” bgcolor=”blue” >
<tr>
<th width=”200″ height=”70″>Program</th>
<th width=”200″ height=”70″>Üretici</th>
<th width=”200″ height=”70″>Açıklama</th>
</tr>
<tr>
<td bgcolor=”yellow”>Dreamweaver</td>
<td rowspan=”2″>Adobe</td>
<td>Kod editörü</td>
</tr>
<tr>
<td bgcolor=”purple”>Fireworks</td>
<td>Resim düzenleme programı</td>
</tr>
<tr>
<td bgcolor=”pink”>Filezilla</td>
<td>GNU</td>
<td>FTP istemcisi</td>
</tr>
<tr>
<td bgcolor=”green”>Notepad++</td>
<td colspan=”2″ align=”center”>Kod editörü</td>
</tr>
</table>
//border etiketi ile çerçeve kenarlığını 3, bordercolor etiketi ile çerçeve rengini kırmızı, bgcolor etiketi ile tablo rengini mavi
//tr ile 1. satırı açtık.
//1. satır 1.sütunu th ile açtık. hücre genişliği(width) 200, yüksekliği(height)70 olarak ayarlandı.
//1. satır 2.sütunu th ile açtık. hücre genişliği(width) 200, yüksekliği(height)70 olarak ayarlandı.
//1. satır 3.sütunu td ile açtık. hücre genişliği(width) 200, yüksekliği(height)70 olarak ayarlandı.
//1. satırı kapattık
//2. satırı açtık
//td ile 2.satır 1.sütunu açtık. bgcolor ile 2.satır 1. sütunu sarı olarak ayarladık
// td ile 2.satır 2.sütunu açtık.rowspan ile aynı sütundaki 2 hücre birleştirildi
// td ile 2.satır 3.sütunu açtık.
//2.satırı kapattık
//3. satırı açtık
//td ile 3.satır 1.sütunu açtık. bgcolor ile 3.satır 1. sütunu mor olarak ayarladık
// td ile 3.satır 3.sütunu açtık.
//3.satırı kapattık
//4. satırı açtık
//td ile 4.satır 1.sütunu açtık. bgcolor ile 4.satır 1. sütunu pembe olarak ayarladık
// td ile 4.satır 2.sütunu açtık.
// td ile 4.satır 3.sütunu açtık.
//4.satırı kapattık
//5. satırı açtık
//td ile 5.satır 1.sütunu açtık. bgcolor ile 5.satır 1. sütunu yeşil olarak ayarladık
// td ile 5.satır 2.sütunu açtık.colspan ile aynı satırdaki 2 hücre birleştirildi
//5.satırı kapattık