Html Tablo Oluşturma

Bu yazımızda Html tablo etiketleri nelerdir? Html tablo oluşturma nasıl yapılır? Html tablo birleştirme nasıl yapılır? Html tablo boyutlandırma nasıl yapılır? gibi konuları öğreneceğiz.

Html ile oluşturduğumuz tabloları genellikle birşeyleri listelerken çok kullanıyoruz. Bunları excel tablolarına benzetebiliriz. Satır ve sütunlardan oluşan, içerisinde bilgiler bulundurduğumuz öğelerdir.

Html de tablo oluşturmak için kullanmamız gereken en temel etiketler şunlardır;

► <table> : Tablolar bu etiket ile oluşturulur.

► <th> : Tablodaki başlık alanları bu etiket ile oluşturulur.

► <tr> : Tablodaki her satır bu etiket ile oluşturulur.

► <td> : Tablodaki her hücre bu etiket ile oluşturulur.

Bu etiketleri kullanarak en basit haliyle bir tablo oluşturalım.

Html Tablo Kodları

Html Tablo Görünümü

html-tablo

Gördüğünüz gibi herhangi bir kenarlık oluşmadı. Kenarlıkları oluşturmak için table etiketinin border attribute’una 1 değeri vermemiz gerekiyor. Tabiki bu değeri daha büyük de verebilirsiniz. Değer büyüdükçe tablo kenarlıklarının kalınlığıda artacaktır.

Örneğin 1 değeri verip tablonun değişimine bakalım.

Bu değer verildiğinde tablonun görünümü şu şekilde olacaktır.

html-tablo-kodlari-resimli

  Eğer kenarlık rengini değiştirmek isterseniz bordercolor attribute’unu kullanabilirsiniz.

Örneğin yellow değeri verip tablonun kenarlarının rengini sarı yapalım.

Bu değer verildiğinde tablonun görünümü şu şekilde olacaktır.

tablo-kodlari

  Eğer tablonun arkaplan rengini değiştirmek isterseniz bgcolor attribute’unu kullanabilirsiniz.

Örneğin lightblue değeri verip tablonun arkaplan rengini açık mavi yapalım.

Bu değer verildiğinde tablonun görünümü şu şekilde olacaktır.

tablo-html

  Tabloya bir arkaplan resmi yerleştirmek isterseniz background  attribute’unu kullanabilirsiniz.

Kullanımı şu şekilde;

  Eğer tablonun hücrelerinin birbirleri ile aralarında boşluklar oluşmasını isterseniz cellspacing attribute’unu kullanabilirsiniz.

Örneğin 20 değeri verip tablonun hücrelerinin birbirleri ile arasında 20px lik boşluk verelim. Bu değeri dilediğiniz gibi arttırıp azaltabilirsiniz.

Bu değer verildiğinde tablonun görünümü şu şekilde olacaktır.

html-tablo-hizalama

  Eğer tablonun hücrelerinin içerisindeki verilerin kenarlıklar ile arasında boşluk oluşmasını isterseniz cellpadding attribute’unu kullanabilirsiniz.

Örneğin 20 değeri verip tablonun hücrelerinin içerisindeki verilerle kenarlıklar arasında 20px lik boşluk verelim. Bu değeri dilediğiniz gibi arttırıp azaltabilirsiniz.

Bu değer verildiğinde tablonun görünümü şu şekilde olacaktır.

html-tablo-yapimi

  Tabloya veya bir hücreye genişlik değeri vermek isterseniz width attribute’unu kullanabilirsiniz.

Örneğin tablonun genişliğini 500px yapalım.

Şimdi de istediğimiz bir hücrenin genişliğini 40px yapalım. Hangi hücreye uygulamak istiyorsak, o <td> etiketine width attribute’u yazılmalıdır.

  Tabloyu veya bir hücre içerisindeki yazıları hizalamak isterseniz align attribute’unu kullanabilirsiniz. 

► Sağa hizalamak için right

► Sola hizalamak için left

► Ortalamak için center değerini vermeliyiz.

Örneğin bir hücre içerisindeki yazıyı ortalamak istediğimizde şu şekilde yazmalıyız. 

Hangi hücreye uygulamak istiyorsak, o <td> etiketine align attribute’u yazılmalıdır.

HTML TABLO BİRLEŞTİRME (SATIR VE SÜTUN) 

Html tablolarında satır veya sütun da bulunan hücreleri birleştirmek isteyebiliriz. Bunun için kullanmamız gereken attribute lar şunlardır;

► colspan : Sütundaki hücreleri birleştirmek için kullanılır.

► rowspan : Satırdaki hücreleri birleştirmek için kullanılır.

Örneğin tablomuzdaki başlık-2 nin iki hücrelik yer kaplamasını sağlayalım.

Html Tablo Kodları

Html Tablo Görünümü

html-sutun-birlestirme

Şimdi de 1.satır ile 2.satırdaki ilk hücreleri birleştirelim.

Html Tablo Kodları

Html Tablo Görünümü

html-tablo-birlestirme

HTML TABLOYA BAŞLIK EKLEME

► <caption> : Tabloya başlık eklemek için kullanılır. Bu etiket <table> etiketinden hemen sonra kullanılmalıdır.

  Eğer tablo içerisinde başlık, içerik ve alt bilgi kodlarının daha düzenli olmasını istiyorsak aşağıdaki etiketleri kullanabiliriz. Bu etiketlerin görünüme herhangi bir etkileri yoktur. Sadece tablo kodlarımızın daha düzenli olmasını sağlar. 

► <thead> : Tablonun başlık kısmı bu etiket içerisinde yazılır.

► <tbody> : Tablonun içerik kısmı bu etiket içerisinde yazılır.

► <tfoot> : Tablonun alt bilgisi bu etiket içerisinde yazılır.

Html Tablo Kodları

Html Tablo Görünümü

html-tablo

Farklı Html tablo örnekleri için Html Tablo Örnekleri yazımı okuyabilirsiniz.

Oluşturduğumuz tabloların görünümleri, websitelerinde gördüğümüz tablolara çok benzemiyor olabilir. Bu tabloları o hale getirebilmek için Css kodları yazmamız gerekiyor.

Tablolarınıza hangi Css özellikleri uygulayabileceğinizi öğrenmek istiyorsanız Css Tablo Özellikleri ve Kullanımı yazımı okuyabilirsiniz.

Umarım sizin için faydalı bir yazı olmuştur.

Yeni bir yazımda görüşmek üzere.

Yorum Yazın