Tablolar,verilerimizi bölümler halinde görüntülemek için kullanılırlar.Htmlde tablo oluşturmak için kullanacağımız etiket <table>..</table> dir.
Oluşturacağımız tabloların çerçevelerini,her hücredeki elemanların konumunu değiştirmek isteyebiliriz.Bunun için bu etikette border,cellspacing,cellpadding özelliklerini kullanmalıyız.Öğrendiğimiz üzere bu özellikleri,etiketin içine yerleştiriyoruz.Şimdi bu özelliklerin ne işe yaradıklarından bahsedelim;
align özelliği,tablomuzun konumunu belirler
border özelliği,tablomuzun çerçevesini belirlemek için kullanılır.Vereceğimiz değerlerle çerçeve kalınlığı belirlenir
bordercolor özelliği,çerçeve çizgilerinin rengini belirler
bgcolor özelliği,tablonun arka plan rengini belirler
width, tablomuzun genişliğini belirler
height, tablomuzun yüksekliğini belirler
Rowspan, satırları birleştirmek için kullanılan özelliktir
Colspan, sütunları birleştirmemize yarar
cellspacing özelliği,tablomuzdaki her hücrenin birbirine uzaklığını piksel cinsinden ifade eder
cellpadding ise hücrelerdeki elemanların hücre içindeki konumunu belirtir
Tablolarımızı hangi etiket yardımıyla oluşturabileceğimizi öğrendik.Şimdi tablolara satır bazında eleman eklememiz gerekiyor.Bunun için <tr> .. </tr> etiketini kullanacağız.Bu etiketi kullandığımızda tablomuzda bir satırlık yer ayırmış oluruz.Oluşturduğumuz satırlara elemanları eklemek için <td> .. </td> etiketinin kullanacağız.Eklemek istediğimiz her elemanı bu etiket içine yazacağız
–>Şunu da dipnot olarak düşmek gerekir.<td> etiketlerini,satır oluşturmak için kullanılan <tr> etiketlerinin arasına yazmalıyız.
–>2.dipnot olarak şunu söyleyelim.Öğrendiklerimizle oluşturacağımız tablolarda iki sütunu arada boşluk bırakmadan birleştirir.Bunun için <table> etiketinin style özelliğinden faydalanmalıyız.
<table style=”width: 30%”> yazarsak iki sütun arasında 30 piksek boşluk bırakacaktır.
Anlattıklarımıza 2 satır ve 2 sütunluk tablo oluşturan bir örnek verelim;
<html> <head> <title>Tablo Oluşturma</title> </head> <body> <table style="width: 30%"> <tr> <td>1.satırın 1. elemanı</td> <td>1.satırın 2.elemanı</td> </tr> <tr> <td>2.satırın 1. elemanı</td> <td>2.satırın 2.elemanı</td> </tr> </table> </body> </html>
Yazdıklarımız sonucunda çıktımız ;
Satır sayısını artırmak için <tr> etiketlerinden faydalanmalısınız.5 satır için 5 <tr> etiketi kullanın.Her satıra 5 eleman ( yani 5 sütun ) koymak istiyorsanız her <tr> etiketinin içine <td> etiketlerinden 5 tane koymalısınız.
Ek Bilgiler :
–><td> etiketinin bgcolor özelliği ile elemanın arka planına renk verebiliriz
Örneğin : <td bgcolor=”orange”>
–><td> etiketinin background özelliği ile hücrenin arka planına resim ekleyebiliriz
Örneğin : <td background=”mehmet.jpg”>
Htmlde tablo oluşturmamıza yarayan özelliklerin çoğunu kullanarak yazdığım bir html tablo oluşturma kodunu paylaşmak istiyorum;
<html> <head> <title>Tablo oluşturma-genel</title> </head> <body> <table style="width: 30%" bgcolor="red" border="8" bordercolor="blue" align="left" > <tr> <td>1.satırın 1. elemanı</td> <td>1.satırın 2.elemanı</td> </tr> <tr> <td>2.satırın 1. elemanı</td> <td>2.satırın 2.elemanı</td> </tr> </table> </body> </html>
Bu html sayfamızı Notepadde uzantısını .html olarak kaydedip üzerine çift tıkladığımızda tarayıcıdaki çıktımız;
Şimdi ise son olarak satır ve sütun birleştirmelere örnek verelim.Hatırladığımız üzere satır birleştirmek için Rowspan, sütun birleştirmek için ise Colspan özellikleri kullanılıyordu.Bunun için bir html bloğunu gösterelim ve çıktısıyla birlikte inceleyelim;
<html> <head> <title>Tablo</title> <body> <table border=2 width=400> <tr><td>1</td><td>2</td><td rowspan=2>3</td></tr> <tr><td>4</td><td>5</td></tr> <tr><td rowspan=1>6</td></tr> <tr><td colspan=2>7</td></tr> </head> </html>
Çıktısı
Rowspan=2 ile 1. ve 2.satırları birleştirerek 3 adında bir hücre oluşturduk
Colspan=2 ile de 1. ve 2.sütunları birleştirerek 7 adında bir hücre oluşturduk
Ve son olarak Rowspan=1 ile aslında birleştirme yapmamış olduk.
