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.
–><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> 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.
Merhaba. Firebase Events'e istatistik attığınızda not set şeklinde bir değer görüyorsanız olası çözümünü göstereceğim. (daha&helliip;) Daha Fazla Oku
Merhaba. Android cihazlar için hazırladığım Namaz Vakitleri uygulaması ile 200'e yakın ülkede tüm namaz-ezan vakitlerini… Daha Fazla Oku
Selamlar. İnsanlar için faydalı olması amacıyla geliştirdiğim Kaza Namazı ve Oruç Takip Uygulamasını sizlere tanıtmak… Daha Fazla Oku
Volley, Android uygulamalarımızda kullandığımız AsyncTask'ın alternatifi olarak ortaya çıkarılan, Google I/O 2013 sunumunda duyurulan bir… Daha Fazla Oku
Merhaba. Bu yazımda Android platformunda kullanıma sunulan, bazı kod bloklarını basitleştiren ve okunabilirliği arttıran ButterKnife… Daha Fazla Oku
Merhaba. Bu yazımda artık baş belası olmuş TikTok reklamlarını, Android uygulamalarımızdaki Admob reklamlarından nasıl kaldıracağımızı… Daha Fazla Oku