Bu yazımızda Tablo oluşturma ile ilgili detayları inceleyeceğiz. Tablolarımızı oluştururken başlık, dipnot, kolonlar ve satırlarla ilgili detaylara göz atacağız. Öncelikle bir web uygulamasında neden tablo oluştururuz ve hangi alanlarına ihtiyaç duyarız. Bunları bir inceleyelim.

Tabloları birden fazla satır ve sütunları web sayfamızda görüntüleyebilmek için kullanırız. Bu kayıtlarımızı görüntülerken elimizdeki alanlara göre kolonlar oluşturur kayıt sayımıza göre de satırlar halinde listeleriz. Tablo oluşturabilmek için <Table> etiketini kullanırız.  Bu etiketin içerisinde tablomuzun başlığı için <caption> etiketinden faydalanırız. Tablomuzdaki kolon başlıklarını <th> veya <thead> etiketleri ile yazabiliriz. Tablomuzun içerisinde satırları <tr> etiketi ile oluşturur ve bu etiketlerin arasında kolonlar oluşturmak istersek <td> etiketleri kullanırız. Şimdi isterseniz bunların nasıl kullanıldığını örneklerle görelim.

<table>
	<caption>Muşteri Kartları</caption>
	<tr>
		<th>Kodu</th> 
		<th>Ünvanı</th>
		<th>Yetkili Adı</th>
	</tr>
	<tr>
		<td>120.100.010</td>
		<td>XYZ Yazılım</td>
		<td>S. Durak</td>
	</tr>
	<tr>
		<td>120.100.020</td>
		<td>ABC Yazılım</td>
		<td>M.Aslan</td>
	</tr>
</table>

 Yukarıdaki tabloda tablo etiketi kullanarak bir tablo oluşturduk. Her satır için tr etiketleri kullandık. Başlık (header) için th etiketini kullanarak diğer kolonlardan farklı bir kolon tipi olduğunu belirttik. ikinci ve üçüncü satırlarda ise td etiketi kullanarak kayıtlarımızı görüntüledik. Ancak burada tablomuzun genişlik ayarları, kenar çizgileri gibi bölümler için herhangi bir işlem yapmadık. Bunları;

<table width=90% cellpadding=0 cellspacing=0 border=1 >
	<caption>Muşteri Kartları</caption>
	<tr>
		<th>Kodu</th> 
		<th>Ünvanı</th>
		<th>Yetkili Adı</th>
	</tr>
	<tr>
		<td>120.100.010</td>
		<td>XYZ Yazılım</td>
		<td>S. Durak</td>
	</tr>
	<tr>
		<td>120.100.020</td>
		<td>ABC Yazılım</td>
		<td>M.Aslan</td>
	</tr>
</table>

 Şimdi ise her müşterimiz için bir adres satırı bir de kayıt numarası kolonu açacağız. Bir müşteriye ait bilgiler iki satırda oluşacak. Adres satırı ise üç kolonun birleşmesinden oluşacak. Böylelikle satır ve kolon birleştirmenin nasıl yapıldığını göreceğiz.

<table width=90% cellpadding=0 cellspacing=0 border=1 >
	<caption>Muşteri Kartları</caption>
	<tr>
		<th>Kayıt No.</th>
		<th>Kodu</th> 
		<th>Ünvanı</th>
		<th>Yetkili Adı</th>
	</tr>
	<tr>
		<td rowspan=2>1.</td>
		<td>120.100.010</td>
		<td>XYZ Yazılım</td>
		<td>S. Durak</td>
	</tr>
	<tr>
		<td colspan=3>Adres : Büyükdere Cd. Maya Plaza Şişli / İstanbul </td>
	</tr>
	<tr>
		<td rowspan=2>2.</td>
		<td>120.100.020</td>
		<td>ABC Yazılım</td>
		<td>M.Aslan</td>
	</tr>
	<tr>
		<td colspan=3>Adres : Gülbağ Mah. Altan Erbulak Sok. Şişli / İstanbul</td>
	</tr>
</table>

 Yukarıdaki tabloda bir kayda ait iki satır görüyoruz. Birinci satırda müşteri kodu, ünvanı, yetkili adı bilgileri yer alıyor. İkinci satırda ise müşteriye ait adres bilgileri bulunuyor. Adres bilgilerini üç kolonu colspan ile birleştirerek yazdık. İlk kolonda ise kayıt numarası yer alıyor. Bir kaydın iki satırdan oluştuğunu biliyoruz. Bunun için kayıt numarası iki satırı birleştirerek yazmamız gerekiyor. Bu satırları birleştirebilmek için de rowspan kullandık.

Bu yazımızda tabloları inceledik. İyi çalışmalar,