HTML’de Tablo Oluşturma

Yükleniyor

Bu ders sayılamayacak kadar kaba anlatımımda html’de tablo yapımını anlatmaya çalışacağım (kısmetse).

Tablo oluşturmanın WordPress’teki en kolay yolu Excel’de oluşturduğunuz bir tabloyu kopyalayıp Görsel Editör kısmına yapıştırmaktır. Ancak tabloları temanızda bir yerlerde oluşturacaksanız, tablolar için kullanılan kodları bilmeniz gerekmekte.

Adım 1:

Neredeyse her html kodunda olduğu gibi bir kod <> ile başlar </> ile biter. Tablo oluştururken de, tablo kodumuz <table> ile başlar ve </table> ile biter. Tablomuzun elemanları bu iki kod arasında yer alır. <table> ve </table> kodlarının arasında tablomuzun elemanları yer almadıkça tablomuz görünmeyecektir.


<table>

</table>

Adım 2:

<tr> kodu, tablomuzun içinde sıraları oluşturmamızı sağlar. Tablomuzu oluştururken önce sıraları, sonra sıraların içine sütunları yerleştiririz. Sadece table ve tr kodları varken de tablomuz görülebilir değildir. Görülebilmesi için sütunları eklememiz gerekmektedir.


<table>

<tr>
</tr>

</table>

Adım 3:

<td> kodu ile sütunları oluşturacağız ve tr kodlarının arasına bu td kodlarını yerleştireceğiz. Ne kadar çok td kodu varsa, o kadar sütun oluşturmuş oluruz.


<table>

<tr>

<td>Burası bir sütun</td>

<td>Burası da bir sütun</td>

</tr>

</table>

Görünümü:

Burası bir sütun Burası da bir sütun

Adım 4:

tr kodlarını arttırarak tablomuzda sıra sayısını, içlerindeki td kodlarını arttırarak da her sıra içindeki sütun sayısını arttırabiliriz. Ancak yukarıdaki önizlemeden de anlaşıldığı üzere tablomuzun kenarlıkları yok. Bunun için table kodumuza bir “border” özelliği eklemeyi kullanabiliriz.

<table border="1px">
<tr>

<td>Burası bir sütun</td>

<td>Burası da bir sütun</td>

</tr>
</table>

Görünümü:

Burası bir sütun Burası da bir sütun

Adım 5 (opsiyonel):

HTML kodlarında birçok kişinin bildiği ve kodları tablolarda da mevcut ancak html sayfalarda head kısmı görülmezken tablolarda head kısmı görülür ve başlıktır. Tablolarda bu head ve body kodları thead ve tbody şeklindedir.

<table border="1px">
<thead>
</thead>
<tbody>
<tr>

<td>Burası bir sütun</td>

<td>Burası da bir sütun</td>

</tr>
</tbody>
</table>

Adım 6 (bu da opsiyonel):

Tablonuzda bir başlık olsun istiyorsanız, thead kısmına bir th kodu eklemeniz gerekmekte. Birçok sıranın olduğu bir tabloda “colspan” parametresini kullanmanızı şiddetle tavsiye ederim.

<table border="1px">
<thead>
<tr>
<th colspan="2">Padişahlar ve Lakapları</th>
</tr>
<tr>
<th>Padişah</th>
<th>Lakap</th>
</tr>
</thead>
<tbody>
<tr>
<td>II. Mehmet</td>
<td>Fatih</td>
</tr>
<tr>
<td>I. Selim</td>
<td>Yavuz</td>
</tr>
</tbody>
</table>

Görünüm:

Padişahlar ve Lakapları
Padişah Lakap
II. Mehmet Fatih
I. Selim Yavuz

Gördüğünüz üzere en üstteki th kodunda colspan parametresini kullanarak iki sıralık yer kaplamasını sağladık. Aşağıdaki iki th’de ise bunu yapmadığımız için böyle bir durum olmadı.
th ya da td’leri ortalamak istiyorsanız, aşağıdaki gibi bir parametre kullanabilirsiniz.

<td style="padding:5px;">Burası sütun</td>

ya da

<th style="padding:5px;">Burası tablo başlığı</th>

Benden bu kadar. Sorunuz ve eklemek istedikleriniz olursa yorum kutusunu kullanmayı ihmal etmeyin :)

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir