HTML’ de tablolar


Html için tablolar 3 ana etikette tanımlanır.

Bir tablo yaratmak için bu etiketi açmanız gerekir:

Bir tablo oluşturalım.

bilgius bilgius
bilgius bilgius

Satır ve sütün belirtmemiz gerekiyor. Sadece satır belirtirsek yazılan metinler tablo dışında görünür. Mutlaka satır ve sütun belirtmek zorundayız. Her satır sütun içerisinde belirtilir. Satır belirtmeden sütun belirtemezsiniz. Öncelikle satır çizgileri çekiyoruz ve sonra sütünlara bölüyoruz. Bu şekilde mantığını aklınızda tutabilirsiniz. Satır çizgisini sonsuza kadar gittiğini düşünün. Sütun belirttiğiniz yerde satır biter. Düz mantıkla kodları ezberlerseniz karıştırma ihtimaliniz daha fazladır.

Ve gördüğünüz gibi ilk table etiketinde border özelliğini kullanmışız. Eğer orada border özelliğini kullanmazsak tablo çerçevesi görünmez. Onun için border özelliğini en az 1 veriyoruz. Sıfır verirsek yine tablo çerçevesi görünmez.

Mesala bir tablo yaptık şu şekilde:

Tablomuzda bir futbol takımını, mevkilerini ve doğum tarihleri göstereceğiz.

Satır veya sütunları birleştirmek

Satır veya bir sütunu birleştirmek istiyorsak mutlaka sütun oluşturan etiketlerle oynamamız gerekir.

etiketleri içerisine satırları birleştirmek istiyorsak rowspan özelliğini veriyoruz.

Tablo içindeki sütünları birleştirmek için colspan özelliği ile yapılır. Örneğin colspan özelliğine 2 değerini verirsek 1 satır içinde 2 kolun birleşir. Bir örnek verirsek tam olarak anlayacaksınız.

Birde satın birleştirme örneği yapalım.

Tablo özellikleri

Tablo oluştururken bir kaç özellik kullanırız. Bu özellikleri ilk

etiketi içerisinde kullanırız. Şimdi onlardan bahsedelim. Tablo çerçeve ayarlarıBorder özelliğinden yukarda bahsetmiştik. Border özelliği çerçevenin kalınlığını belirtir. Border özelliğine sıfır değerini verirsek çerçeve ortadan kalkar.

bilgius bilgius

Tablo yaratırken sütun sayılarını her satırda eşit olarak verin. Yoksa tablonuzda boşluklar oluşacaktır. Orada var olan hücre görünmeyecektir. 

Tablo genişliği ve yüksekliği ayarlama

width ve height özelliklerini kullanarak tablo genişlik ve yükseliğini ayarlarayabiliriz.

Tabloların genişliğini ve yüksekliğini sayısal olarak verdiğimiz gibi yüzdelik olarakta verebiliriz. Yüzdelik olarak verdiğimiz zaman sayfaya göre yüzde alır. Yani diyelimki yüzde kırk olarak belirtiyseniz sayfanın yüzde 40′ lık kısmını kapsar.

Şu şekilde bir örnek yapabilirsiniz:

Tablo arkaplanı belirleme
tablo arkaplan rengini bgcolor özelliği ile yapıyoruz.


Başlık

bilgius bilgius
bilgius bilgius

Bütün hücreleri aynı renk yaptığımız gibi her hücrenin arkaplan rengini farklıda yapabiliriz. Yine satır etiketi ile değil sütun etiketi ile bunu yapıyoruz.

Tablo arkasına resim ekleme

Tablomuzun arkaplan rengini değiştirebildiğimiz gibi tablomuzun arkaplanına resimde ekleyebiliyoruz. Bunun için background özelliğini kullanacağız.

Ancak tablomuzu büyük yapmamız gerekir. Resimleri daha rahat yerleştirebilmek için. Tablo arkasına resim atıyorsanız öncelikle resim boyutuna bakın. Ondan sonra tablonuzun boyutunu ayarlayın.


Başlık

Seçeceğiniz resmin boyutu ile tablonuzun boyutunu aynı yapın.

bilgius bilgius
bilgius bilgius

Her hücrenin arkaplan rengini farklı yapabildiğimiz gibi resminide farklı yapabiliriz. 


Başlık

Her bir resim 250 px genişliğinde, 250 px yüksekliğindedir

bilgius bilgius
bilgius bilgius

hüce içindeki yazıları silebilirsiniz.

Hücre ve veri arasındaki mesafeyi ayarlama

Hüce kenarları ile içindeki veriler arasındaki mesafeyi cellpadding özelliği ile yapılır.


Başlık

bilgius bilgius
bilgius bilgius
bilgius bilgius
bilgius bilgius

Hücre çerçeveleri arasındaki mesafeyi ayarlama

Hüce çerçeveler arasındaki uzaklığı cellspacing özelliği ile yapıyorsunuz.


Başlık

bilgius bilgius
bilgius bilgius

Tablonun sayfa içindeki konumunu ayarlama

Tablonun sayfadaki yerini align özelliği ile yapılır.

Tabloyu sayfadaki yerini 3 şekilde belirleyebileceğiz.

left, right ve center değerlerini verebilirsiniz.


Başlık

bilgius bilgius
bilgius bilgius

Hücre içindeki verinin yerini belirleme

Valign özelliği hücre içindeki metnin dikey şekilde yerini belirler ve 3 şekilde değer alır:

1.top

2.middle

3.bottom

3 değerinde bi arada olduğu bir örnek:


Başlık

bilgius bilgius
bilgius bilgius

d

İç içe tablo kullanımı

bilgius bilgius
bilgius bilgius
bilgius


Author: Ali Göksel Bektaş

Simenty kurucu ortağı. Küçüklüğünden beri website yapan Ali bulunduğu web sektöründe 10 yıldan fazla tecrübesı vardır. Bisiklet sürmeyi, kek yemeyi ve rahat koltukları sever.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.