Bu yazıda öğrenecekleriniz:
HTML Tablo Oluşturma
Tablo oluştururken kullanacağımız temel etiketler <table> <tr> ve <td> dir. <table> tabloyu belirtir. <tr> satırları, <td> ise sütunları belirtir. Önce basit bir örnek yapalım.
<html>
<body>
<table>
<tr>
<td>Satır1, Sütun1</td>
<td>Satır1, Sütun2</td>
</tr>
<tr>
<td>Satır2, Sütun1</td>
<td>Satır2, Sütun2</td>
</tr>
</table>
</body>
</html>
Bu şekilde 2×2’lik bir tablo oluşturabiliriz. Ancak tablonun kenarları görünmeyebilir. Kenarlık kalınlığını ayarlamak için border ifadesini kullanırız. Kullanımı <table border=”1″> şeklindedir. <th> etiketinden de bahsedelim. <th> tablo başlığıdır diyebiliriz. İfadeyi kalın ve bölmenin ortasında gösterir. Bir örnek daha yapalım.
<html>
<body>
<table border=”2″>
<tr>
<th>Mavi</th>
<th>Beyaz</th>
<tr>
<td>Deniz</td>
<td>Bulut</td>
</tr>
<tr>
<td>Gökyüzü</td>
<td>Duman</td>
</tr>
</table>
</body>
</html>
Yazdığımız kodun çıktısı aşağıdaki gibi olacaktır:
Mavi Beyaz
Deniz Bulut
Gökyüzü Duman
Satır veya sütunları birleştirebiliriz. rowspan=”…” satırlar, colspan=”…” sütunlar için kullanılır.Araya da birleştirilecek satır veya sütun sayısını yazarız.Ayrıca bgcolor=”…” ifadesini kullanarak tabloların arkaplan rengini de değiştirebiliriz. Örnekle görelim:
<html>
<body>
<table border=”2″ bgcolor=”aqua”>
<tr>
<td colspan=”3″>0</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan=”2″>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
</body>
</html>
Tablolarla ilgili son olarak cellspacing ve cellpadding ifadelerinden bahsedelim.cellspacing hücreler arası, cellpadding hücre içi genişliği belirtir.Kullanımlarından gösterecek olursak:
<html>
<body>
<table border=”2″ cellspacing=”100″ cellpadding=”100″>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</body>
</html>
Evet arkadaşlar tablolar hakkında söyleyeceklerimiz şimdilik bu kadar. HTML’de önemli bir yol katetmiş durumdayız.Diğer derste görüşmek dileğiyle kendinize iyi bakın.