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