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 2x2'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
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 2x2'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
