Etiket arşivi: table

Html ile tablo oluşturmak

Aslında html’e yeni başlamış arkadaşlar tarafından anlaşılması zor gibi görünen fakat, aslında çok basit bir yapısı olan, özellikle iletişim formları, giriş formları gibi yerlerde sıkça kullanılan bir özellik tablolar. Kısaca kullanım şeklini örnekle göstereyim.

<table>
<tr>
<td>satır 1, hücre 1</td>
<td>satır 1, hücre 2</td>
</tr>
<tr>
<td>satır 2, hücre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>

Borderları yani tablo kenarlarını css ile belirtmek kullanım açısından daha doğru olacaktır fakat istersek bunu html’den de yapabiliriz. şu şekilde:

<table border="1">
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
</table>

Burada tablo içerisinde border=”1″ parametresi bulunuyor, eğer border=”0″ yazsaydık kenarlıklar gözükmeyecekti. Hiç border parametresi girmezsek de tarayıcınızın standartları neyse ona göre kendisini ayarlayacaktır.

Bir de tablo başlıkları var onlar da <th> ile belirleniyor. Kullanımına örnek göstereyim:

<table border="1">
<tr>
<th>Başlık</th>
<th>Başka Başlık</th>
</tr>
<tr>
<td>Satır 1, Hücre 1</td>
<td>Satır 1, Hücre 2</td>
</tr>
<tr>
<td>Satır 2, Hücre 1</td>
<td>Satır 2, Hücre 2</td>
</tr>
</table>

Burada <th> </th> tagları içerisine yazdığınız kısımlar başlık şeklinde gözükecektir. Her tarayıcının standart başlık stillemesi farklı olabilir fakat bunların hepsi css ile yeniden düzenlenebilir, siz bir özellik belirtmediğinizde tarayıcı kendi css standartlarını kullanacaktır,  bu yüzden tablo ve diğer html elementlerini oluştururken css ile bunları stillemek her tarayıcıda aynı gözükmesini sağlamak açısından yararlı olacaktır.

Tablo kullanımı kısaca bu şekilde, kodları incelerseniz mantığını kavramanız pek uzun sürmeyecektir.