XHTML tablolar dersimizde sayfamıza nasıl tablo ekleyeceğimizi ve Rowspan, Colspan nedir? sorularının cevaplarını uygulamalı örnekler ile öğreneceğiz. Konuya geçmeden önce çok önemli bir noktaya değineceğim günümüzde bir web sitelerinde hız olmazsa olmazdır. Sayfa içerisinde tablo kullanmakta sayfanın hızını ciddi anlamda etkilemektedir, bu yüzden sayfa içerisinde olabildiğince az tablo kullanmaya dikkat edin deyip dersimize başlıyorum. XHTML tablo eklemek için table etiketini kullanırız. Tabloya başlık eklemek için caption etiketini kullanırız. Tabloya satır eklemek için tr etiketini, sütun eklemek için td etiketini kullanırız.
Tablo eklendiğinde çerçeve kalınlığı belirtilmediği sürece çerçeve gözükmez, çerçeveye kalınlık vermek için border etiketini kullanırız.
Cellpadding öz niteliği, hücre çerçevesi ile hücre içerisindeki metin arasında boşluk bırakmamızı sağlar.
Cellspacing öz niteliği, tablo içerisindeki hücreler arasında boşluk bırakmamızı sağlar.
Bir uygulama yapalım, aşağıdaki kodu metin editörüne yapıştırın, inceleyin, kaydedin ve tarayıcıda görüntüleyin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML Dersleri</title>
</head>
<body>
<h1>Web Ağı: Web'in En Faydalı Bilgi Ağı</h1>
<!-- table etiketi tablo eklememizi sağlar. -->
<!-- border etiketi tablonun çerçevesini kalınlaştırır. -->
<table border="1" cellpadding="25" cellspacing="5">
<caption>Web Ağında Neler Var?</caption> <!--tabloya başlık ekledik-->
<tr>
<!--1. satırı ekledik-->
<td>İnternet</td> <!--1. sütunu ekledik-->
<td>Teknoloji</td><!--2. sütunu ekledik-->
<td>Yazılım</td><!--3. sütunu ekledik-->
<td>Excel Eğitimi</td><!--4. sütunu ekledik-->
</tr>
<tr>
<!--2. satırı ekledik-->
<td>Seo</td>
<td>Xbee</td>
<td>Xhtml</td>
<td>Excel'de Grafik Ekleme</td>
</tr>
</table>
</body>
</html>
Aşağıdaki resimde yukarıdaki kodun tarayıcı üzerinde nasıl görüldüğünü
inceleyebilirsiniz..
Rowspan nedir?
XHTML’de rowspan öz niteliği satırları birleştirmemizi sağlar. Bir uygulama yapalım; ünvan, adı soyadı, branşı ve bildiği diller gibi bilgilerin tutulduğu bir tablomuz bulunsun. Profesör ve Doç. Dr. Ünvanları bulunsun, profesör ünvanın da 2 kişi bulunsun ve biz profesör satırını birleştirelim.
Aşağıdaki kodu metin editörüne yapıştırın, inceleyin, kaydedin ve tarayıcıda görüntüleyin.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML Dersleri</title>
</head>
<body>
<h1>Web Ağı: Web'in En Faydalı Bilgi Ağı</h1>
<!-- table etiketi tablo eklememizi sağlar. -->
<!-- border etiketi tablonun çerçevesini kalınlaştırır. -->
<table border="1">
<caption>Rowspan Uygulama</caption> <!--tabloya başlık ekledik-->
<tr>
<td>Ünvan</td>
<td>Adı Soyadı</td>
<td>Branşı</td>
<td>Bildiği Diller</td>
</tr>
<tr>
<!--profesör ünvanında iki kişi var bu yüzden iki satırı birleştireceğiz. Bunun için rowspan="2" yazdık-->
<td rowspan="2">Profesör</td>
<td>Ferhat Şirin</td>
<td>Kripto</td>
<td>İngilizce</td>
</tr>
<tr>
<td>Serhat Şirin</td>
<td>Veritabanı Yönetimi</td>
<td>İngilizce,Almanca</td>
</tr>
<tr>
<td>Doç. Dr.</td>
<td>Murat Şirin</td>
<td>Genetik</td>
<td>İngilizce,Rusça</td>
</tr>
</table>
</body>
</html>
Aşağıdaki resimde yukarıdaki kodun tarayıcı üzerinde nasıl görüldüğünü
inceleyebilirsiniz.
Colspan Nedir?
XHTML’de colspan öz niteliği sütunları birleştirmemizi sağlar. Bir senaryo üzerinden uygulama yapalım, programlama dersini alan öğrenciler içerisinden başarılı olan 3 başarısız olan 2 öğrenci olsun. Başarılı ve başarısız olan öğrencilerin adı soyadı ve not ortalamalarının tutulduğu ayrı iki tablo oluşturalım.
Aşağıdaki kodu metin editörüne yapıştırın, inceleyin, kaydedin ve tarayıcıda görüntüleyin.
. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML Dersleri</title>
</head>
<body>
<h1>Web Ağı: Web'in En Faydalı Bilgi Ağı</h1>
<table border="1">
<caption>Colspan Uygulama</caption> <!--tabloya başlık ekledik-->
<tr>
<!--başarılı olan 3 öğrenciyi tek sütun altında colspan ile birleştridik-->
<td colspan="3">Programlama Dilleri Dersinden Başarılı Olan Öğrenciler ve Not Ortalamaları</td>
</tr>
<tr>
<td>Ferhat Şirin</td>
<td>98</td>
</tr>
<tr>
<td>Serhat Şirin</td>
<td>96</td>
</tr>
<tr>
<td>Murat Şirin</td>
<td>90</td>
</tr>
<tr>
<!--başarısız olan 2 öğrenciyi tek sütun altında colspan ile birleştridik-->
<td colspan="2">Programlama Dilleri Dersinden Başarısız Olan Öğrenciler ve Not Ortalamaları</td>
</tr>
<tr>
<td>Nihat Şirin</td>
<td>40</td>
</tr>
<tr>
<td>Gazi Şirin</td>
<td>38</td>
</tr>
</table>
</body>
</html>
.
Aşağıdaki resimde yukarıdaki kodun tarayıcı üzerinde nasıl görüldüğünü inceleyebilirsiniz.
Evet arkadaşlar XHTML 8. dersimizde XHTML’de tablolar nasıl oluşturulur? Rowspan, colspan etiketleri nedir öğrenmiş olduk. XHTML ile ilgili bütün derslerime aşağıdaki linkten erişebilirsiniz. İnşAllah faydalı bir ders olmuştur bir sonraki derste görüşmek duası ile…
Faydalı bilgiler için teşekkür ederim, emeğinize sağlık.
ferhat bey emeğinize sağlık dersleri takipteyim ücretsiz olmasına rağmen ayrıntılı anlatım için ayrıca teşekkür ediyorum.