Ders 5: Tablolar (Tables)

Erkan DÖŞHTML0 Yorum16 Aralık 2012

<Table> Tablo eklemek için kullanılan etikettir.

<TR> Tablo içerisinde satır oluşturmak için kullanılır.

<TD> Tablo içerisinde sütun oluşturmak için kullanılır.

<TH> Tablonun istenilen hücrelerine başlık ekler.

Border: Border parametresi, hücrenin ve tablonun etrafındaki çerçevenin kalınlığını ayarlamak için kullanılır. Border=0 olduğu zaman çerçeve tarayıcıda görünmez. Web sayfası hazırlama sürecinde bu seçenek sıklıkla kullanılmaktadır.

ÖRNEK:

<table border=”1″>
<tr>
<th>Program</th>
<th>Üretici</th>
<th>Açıklama</th>
</tr>
<tr>
<td>Dreamweaver</td>
<td>Adobe</td>
<td>Kod editörü</td>
</tr>

<tr>
<td>Photoshop</td>
<td>Adobe</td>
<td>Resim düzenleme programı</td>
</tr>

<tr>
<td>Filezilla</td>
<td>GNU</td>
<td>FTP istemcisi</td>
</tr>

<tr>
<td>Notepad++</td>
<td>GNU</td>
<td>Kod editörü</td>
</tr>

</table>

Bordercolor: Border parametresi ile kalınlığı belirlenen çerçevenin rengini ayarlamak için kullanılır.

Bgcolor: Tablonun veya istediğimiz hücre veya hücrelerin arka plân rengini değiştirmek için kullanılır.

Background: Tablonun veya istenilen hücrenin arka plânına resim eklemek için kullanılır.

Width: Tablonun veya hücrenin pixel cinsinden genişliğini belirlemek için kullanılır. <table width=”200”> Tablo genişliğini belirlemek için kullanılır. <td width=”200”> Hücre genişliğini belirlemek için kullanılır.

 Height: Tablonun pixel cinsinden yüksekliğini belirlemek için kullanılır. <table height=”200”> Tablo geniĢliğini belirlemek için kullanılır. <td height=”200”> Hücre geniĢliğini belirlemek için kullanılır.

Colspan: Colspan, aynı satırdaki hücreleri birleştirmek için kullanılır.

Rowspan: Rowspan, aynı sütundaki hücreleri birleştirmek için kullanılır.

 Cellspacing: Tablonun içerisindeki hücrelerin, birbirlerinden ve tablo sınırlarından uzaklığını pixel türünden ayarlamak için kullanılır.

 Cellpadding: Hücrelerin içindeki verilerin, hücre sınırlarından uzaklığının ne kadar olacağını belirlemek için kullanılır.

 Örnek:

<table border=”3″ bordercolor=”red” bgcolor=”blue” >
<tr>
<th width=”200″ height=”70″>Program</th>
<th width=”200″ height=”70″>Üretici</th>
<th width=”200″ height=”70″>Açıklama</th>
</tr>

<tr>
<td bgcolor=”yellow”>Dreamweaver</td>
<td rowspan=”2″>Adobe</td>
<td>Kod editörü</td>
</tr>

<tr>
<td bgcolor=”purple”>Fireworks</td>
<td>Resim düzenleme programı</td>
</tr>

<tr>
<td bgcolor=”pink”>Filezilla</td>
<td>GNU</td>
<td>FTP istemcisi</td>
</tr>

<tr>
<td bgcolor=”green”>Notepad++</td>
<td colspan=”2″ align=”center”>Kod editörü</td>
</tr>
</table>

//border etiketi ile çerçeve kenarlığını 3, bordercolor etiketi ile çerçeve rengini kırmızı, bgcolor etiketi ile tablo rengini mavi

//tr ile 1. satırı açtık.
//1. satır 1.sütunu th ile açtık. hücre genişliği(width) 200, yüksekliği(height)70 olarak ayarlandı.
//1. satır 2.sütunu th ile açtık. hücre genişliği(width) 200, yüksekliği(height)70 olarak ayarlandı.
//1. satır 3.sütunu td ile açtık. hücre genişliği(width) 200, yüksekliği(height)70 olarak ayarlandı.
//1. satırı kapattık

//2. satırı açtık
//td ile 2.satır 1.sütunu açtık.  bgcolor ile 2.satır 1. sütunu sarı olarak ayarladık
// td ile 2.satır 2.sütunu açtık.rowspan ile aynı sütundaki 2 hücre birleştirildi
// td ile 2.satır 3.sütunu açtık.
//2.satırı kapattık

//3. satırı açtık
//td ile 3.satır 1.sütunu açtık.  bgcolor ile 3.satır 1. sütunu mor olarak ayarladık
// td ile 3.satır 3.sütunu açtık.
//3.satırı kapattık

//4. satırı açtık
//td ile 4.satır 1.sütunu açtık.  bgcolor ile 4.satır 1. sütunu pembe olarak ayarladık
// td ile 4.satır 2.sütunu açtık.
// td ile 4.satır 3.sütunu açtık.
//4.satırı kapattık

//5. satırı açtık
//td ile 5.satır 1.sütunu açtık.  bgcolor ile 5.satır 1. sütunu yeşil olarak ayarladık
// td ile 5.satır 2.sütunu açtık.colspan ile aynı satırdaki 2 hücre birleştirildi
//5.satırı kapattık

Etiketler: , , , , ,

Ders 5: Tablolar (Tables) Hakkında Yorum Yaz

Sponsor Reklam Sponsor Reklam Sponsor Reklam Sponsor Reklam
SINAV ANALİZ PROGRAMI 2013-2014

SINAV ANALİZ PROGRAMI 2013-2014

...

Erkan DÖŞ42 Yorum3 Aralık 2013
2013-2014 SINAV ANALİZ PROGRAMI V2

2013-2014 SINAV ANALİZ PROGRAMI V2

Yeni yönetmeliğe göre sınav sonrası sınıf, şube ve soru bazında sınav analizleri...

Erkan DÖŞ27 Yorum7 Aralık 2013
Bilgi ve İletişim Teknolojileri Dersi Ders Notları(Tüm Üniteler)- Özetleri- Soru Bankası

Bilgi ve İletişim Teknolojileri Dersi Ders Notları(Tüm Üniteler)- Özetleri- Soru Bankası

    Bilgi ve iletişim teknolojileri dersi için tüm ünitleri bir arada...

Erkan DÖŞ23 Yorum7 Nisan 2013
Bilişim Mesleki Yabancı Dil Modülleri ve Çevirileri

Bilişim Mesleki Yabancı Dil Modülleri ve Çevirileri

Bilişim Teknolojiler Alanı Mesleki Yabancı Dil Modülleri bildiğiniz gibi ingilizce. Derslerde...

Erkan DÖŞ15 Yorum23 Ekim 2013
Açık Kaynak İsletim Sistemleri 1.Sınav Çalışma Soruları

Açık Kaynak İsletim Sistemleri 1.Sınav Çalışma Soruları

İşletim Sistemi Nedir? İşletim sistemi, bilgisayar donanımının doğrudan denetimi ve...

Erkan DÖŞ15 Yorum31 Ekim 2013
Flutter İle Mobil Uygulama Geliştirme-FLUTTER KURULUMU

Flutter İle Mobil Uygulama Geliştirme-FLUTTER KURULUMU

Flutter İle Mobil Uygulama Geliştirme-FLUTTER KURULUMU Bu yazımızda Flutter İle Mobil...

Erkan DÖŞ0 Yorum29 Mayıs 2020
2016-2017 Proje Takip ve Değerlendirme Formu

2016-2017 Proje Takip ve Değerlendirme Formu

Derslerinizden verilen proje ödevlerini takip ve değerlendirmesini yapmak için form...

Erkan DÖŞ0 Yorum22 Mart 2017
Bilgisayar Eğitim ve Ögretim

Bağlantılarım

E-Bülten

E-Posta adresinizi aşağıdaki bölümden bültenimize ekleyerek yeni yazılarımızdan haberdar olabilirsiniz!


Aboneliğinizin onaylanması için lütfen verdiğiniz mail adresini kontrol ediniz.!

İletişim Formu

Kaynak göstermeden paylaşım yapmak yasaktır. 2012© ERKAN DÖŞ KİŞİSEL WEB SİTESİ