Genel

Ders-11 Html5 Tablolar

Merhaba arkadaşlar. Bu yazımızda sizlere Html5 ile tablo tanımlamayı göstereceğim. Şimdi sizlere kısaca tablo elementlerini tanıtacağım ve ardından bir örnek yaparak konuyu daha iyi anlamanıza yardım edeceğim.

Tablo tanımlamak için <table> elementini kullanırız. Table elementi arasına tabloda kullanılan diğer elementleri yazarız. Her tablo satırını <tr> elementi ile oluştururuz. <th> etiketi ile tablo başlığını oluştururuz. Tablo başlıklarının varsayılan değeri kalın ve ortalanmıştır. Tablonun her hücresi ise <td> etiketi ile tanımlanır. Şimdi öğrendiklerimiz ile basit bir tablo oluşturalım

Yukarda dikkat etmeniz gereken husus border yani kenarlık özelliklerini biz tanmladık . Style elementini head elementleri arasına yazarak içine stil tanımlama kodlarımızı yazabiliriz. Kodumuzun çıktısı :

Birçok Sütunu Kaplayan Hücreler

Bir başlığın altına birden fazla sütun tanımlamak için colspan özniteliğini kullanırız. bir örnekle açıklayalım.

Kodumuzun çıktısı :

Birden Fazla Satırı Kaplayan HÜcreler

Bir hücrenin birden çok satırda gösterilebilmesi için rowspan özniteliğini kullanılırız. Bunu örnekle anlatalım

Kodumuzun çıktısı :

Tabloya Başlık Eklemek

Tablomuza başlık eklemek için caption elementini kullanırız. Kullanım şekli ise :

Bu elementi table elementinin hemen altına yazmalıyız unutmayalım.

Yorum yapmak için tıklayın

Cevap bırakın

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

Popüler

En üste