Anasayfa / Web Tasarım / HTML / HTML Table Kullanımı

HTML Table Kullanımı

Bu Derste, nasıl Tablo ekleyebileceğimizi ve tabi ki eklediğimiz tabloları nasıl biçimlendirebileceğimizi anlatmaya çalışacağım.

Tablo ,Tr ve Td etiketleri

1. Her tablo için bir Table etiketi açılır ve tablo bittiğinde bu etiket kapatılır.

2.Tabloda yer alan her bir satır için Tr etiketleri açılır.

3.O satırda bulunan sütun sayısı kadar Td etiketi açılır. (tr içerisinde)

4.Tablonun içinde yer alan veriler sadece td etiketleri arasına yazılmalıdır.

Kullanımı:

Th etiketi kullanımı :

Bu örnekteki gibi tabloda başlık hücrelerini oluşturmak için kullanabiliyoruz. Yani başlık olmasını istediğimiz tablo hücrelerinde td yerine th kullanmalıyız.

çıktısı:

Tablo Hücrelerini Birleştirme :

Tablolarda bulunan hücrelerden bazılarını birleştirmemiz gerekebilir. Bu durumda rowspan ve colspan parametrelerini td veya th etiketine eklemeliyiz.

Yukarıdaki kodu acıklayalım

colspan:  Yataydaki  satırları birleştirir.

 

çııktısı :

 

rowspan:  Dikeydekistunları birleştirir.

 

çıktısı :

 

 

colspan ve rowspan birlikte kulanırsak

Çıktısı:

yukarıda gördüğünüz kelimeleri acıklayalım

width: Genişliği ayarlamamıza yarar . Genişliğini ayralamak istediğimiz bir şeyi width ile  yapabiliriz

height: Yüksekliği ayarlamaya yarar . Yüksekliğini ayarlamak istediğimiz bir şeyi height yazarak istediğimiz kadar ayarlayabiliriz

border: Çerceve icin kullanılır

     

 

Rowspan ve colspan parametrelerinden hangisi hangisiydi diye bir karışıklığa düşerseniz aşağıdaki resim hatırmanıza yardımcı olacaktır:

Görüldüğü üzere rowspan aşağı doğru, colspan ise sağa doğru hücre birleştiriyor. Birleştirilmiş hücreleri oluştururken bu adımları yapmanız gerekiyor.

CAPTİON:

TABLO kısmına baslık eklemek için caption etiketi kullanılır.(TABLO etiketinden hemen sonra kullanılır.)

<b> etiketi  yazılan baslıkları kalın yazar.

çıktısı :

 

 

 

 

 

yazıları yukarıda gördüğünüz gibi kalın yapar

<i>: Ekrandaki yazıları eğik yazar

<u>: Ekranda yazılan yazıların altını cizer.

<i>   Hello World!!!
<u> Hello World!!!

 

🙂 🙂 🙂 🙂

About Melek Çetinbaş

Bir cevap yazın

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

%d blogcu bunu beğendi: