Anasayfa / Html / Htmlde Tablo Oluşturmak

Htmlde Tablo Oluşturmak

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;

 

tablo

 

Ş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ı

tablo satir-sutun birlestirme

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.

Hakkında Mehmet Kirazlı

İstanbul Eyüp'te ikamet ediyorum. Giresun Alucra'lıyım. Bilgisayar Mühendisi bölümünden 2013 yılında mezun oldum. "Yeni Başlayanlar için Java 8" kitabının yazarıyım. Şuanda özel bir firmada Mobil Yazılım Geliştirme Uzmanı olarak çalışıyorum.

İlginizi Çekebilir

html dersleri

Html Listeleme Yapısı

Yapacağımız html sayfalarında bazı yazılarımızı maddeler halinde yazmak isteyebiliriz. Yazacağımız maddeleri sıralı ve sırasız olarak …

Bir Cevap Yazın

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