REKLAM ALANI

Sıfırdan HTML Öğreniyorum (Tablolar) #5

avatar ^Phoenix^
քɦօɛռɨӼ ɖɨʐǟʏռ
767
#1
Yorumu Paylaş

Merhaba Arkadaşlar Tablolar konusuna hoşgeldiniz ( Tercihen Gece Modu Kullanın )

Not : Arkadaşlar "#1 - #5" arasındaki konularımız HTML Basit Kodlama'dır.Temel atmak amaçlı hazırlanmıştır.Sonraki paylaşımlarım tam anlamıyla HTML dersi olarak adlandırabilirsiniz.5 konuda anlattığım dersleri iyi bilmeniz ve anlamanız gerekiyor.Bu yüzden anlamadığınız yerleri sorun lütfen!
Şimdi konumuza geçelim.İyi Okumalar Gülümse


Ön Bilgi;
Soru : HTML’de neden tablo oluştururuz?

» Bir şeyleri düzene sokmak için
» Kategoriler oluşturmak için
» Versiyon, ay, yıl, gelir, gider, toplam v.b konuları açıklamak için

Ve bunun gibi birçok şey için web tasarımlarımızda tablolar oluştururuz.
Tablo oluşturabilmek için bize 4 adet etiketimiz var.
Bunlar: <table> etiketi başta olmak üzere <tr>,<th> ve <td> etiketleridir.

Şimdi bu etiketler ne işe yarar bunları açıklayalım;
<table> » Bu etiket; içerisindeki kodların tablo oluşturmak için kullanılacağını tarayıcıya bildirir.
<tr> » Bu etiket oluşturduğumuz tabloların satırlarını oluşturmak için kullanılır.
<th> » Bu etiket ile tablolarda belirtmek istediğimiz başlıklar için kullanılır.
<td> » Bu etiketimiz ise tabloların hücrelerini belirler.

Bunları da öğrendiğimize göre başlıkları tek tek ele alalım.Genel olarak örneklerle anlatmaya çalışacağım.Böylelikle daha iyi anlarsınız Gülümse

Table Etiketi
Hazırlamış olduğunuz web sayfanıza tablo eklemek için kullanılan etikettir. Bir tablo <Table> etiketi ile başlayıp </Table> etiketi ile biter. Tablolar satır ve sütunlardan oluşur. Satırların ve sütunların kesiştikleri kutuya “hücre” adı verilir.
Aşağıdaki örnekte 1x1’lik (1 satır ve 1 sütundan oluşan) bir tablo gösterilmiştir.
Kod:
<table border="2">
<tr>
<td>Kitap<td> // Bu kod satırının etiketi kapanmaz!
</tr>
</table>

TR Etiketi
Tabloda satır oluşturmak için kullanılır.
Örnek:
Kod:
<table border="2">
<tr>
<td>1.Satır</td>
<tr>
</tr>
<td>2.Satır</td>
</tr>
</table>

TD Etiketi
Tabloda sütun oluşturmak için kullanılır.
Örnek:
Kod:
<table border="2">
<tr>
<td>1.Sütun</td>
<td>2.Sütun</td>
</tr>
</table>

Border Etiketi
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:
Kod:
<table border="5">
<tr>
<td>HTML</td>
<tr>
</tr>
<td>PHP</td>
</tr>
</table>

Bordercolor Etiketi
Border parametresi ile kalınlığı belirlenen çerçevenin rengini ayarlamak için kullanılır.
Örnek 1:
Kod:
<table border="1" bordorcolor="red">
<tr>
<td>HTML</td>
<tr>
</tr>
<td>PHP</td>
</tr>
</table>

Örnek 2:
Kod:
<table border="1" bordorcolor="red">
<tr>
<td bordorcolor="blue">HTML</td>
<tr>
</tr>
<td bordorcolor="blue">PHP</td>
</tr>
</table>

Bgcolor Etiketi
Tablonun veya istediğimiz hücre veya hücrelerin arka plân rengini değiştirmek için kullanılır.
Örnek 1:
Kod:
<table border="2" bgcolor="pink">
<tr>
<td>HTML</td>
</tr>
</table>

Örnek 2 :
Kod:
<table border="2">
<tr>
<td bgcolor="pink">HTML</td>
</tr>
</table>

Background Etiketi
Tablonun veya istenilen hücrenin arka plânına resim eklemek için kullanılır.
Örnek:
Kod:
<html>
<head>
<title>Background Etiketi</title>
</head>
<body>
<table background="resim.jpg" border="5">
<tr>
<td>HTML</td>
<td>PHP</td>
</tr>
<tr>
<td>CSS</td>
<td>JAVA</td>
</tr>
</table>
</body>
</html>

Width Etiketi
Tablonun veya hücrenin pixel cinsinden genişliğini belirlemek için kullanılır.
Kod:
<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 Etiketi
Tablonun pixel cinsinden yüksekliğini belirlemek için kullanılır.
Kod:
<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.

Örnek:
Kod:
<table border="1">
<tr><td width="70">HTML</td></tr>
<tr><td height="50">PHP</td></tr>
<tr><td height="100">CSS</td></tr>
</table>

Bu dersimizde bitmiş bulunmakta.Geriye dönük olarak alttaki konuları tekrar ederseniz bu iş tamamdır.Yeni konularımız HTML Dersleri olarak gelecektir.Lütfen takipte kalınız!
Parmak At Emeğe saygı için beğenmeyi unutmayın  Parmak At  

Önceki Konular Listesi «
» Sıfırdan HTML Öğreniyorum (Temel Etiketler) #1
» Sıfırdan HTML Öğreniyorum (Listeleme Etiketler) #2
» Sıfırdan HTML Öğreniyorum (Metin ve Görünüm Düzenleme Etiketleri) #3
» Sıfırdan HTML Öğreniyorum (Bağlantı Oluşturma) #4
deneme
քɦօɛռɨӼ ɖɨʐǟʏռ

Konuda Ara

4 Yorum

^Phoenix^

քɦօɛռɨӼ ɖɨʐǟʏռ

Aktif Üye
avatar
^Phoenix^
25-11-2019, Saat: 21:20
25-11-2019, Saat: 21:20
#2
Yorumu Paylaş
Merhaba arkadaşlar;
Sıfırdan HTML Öğreniyorum konularının sonlarına eğitim akıcılığı amacıyla,konular arası geçiş linkleri eklenmiştir.
Konu sonlarında;

  Sonraki Konular Listesi »
» Sıfırdan HTML Öğreniyorum (Temel Etiketler) #1
» Sıfırdan HTML Öğreniyorum (Listeleme Etiketler) #2
» Sıfırdan HTML Öğreniyorum (Metin ve Görünüm Düzenleme Etiketleri) #3
» Sıfırdan HTML Öğreniyorum (Bağlantı Oluşturma) #4
» Sıfırdan HTML Öğreniyorum (Tablolar) #5

Benzer şekilde konular arası geçiş linkleri eklenmiştir.
Derslere olan ilgi için teşekkür ederim.Sağlıcakla kalın Gülümse

anill

Aktif Üye

Aktif Üye
avatar
anill
26-11-2019, Saat: 07:00
26-11-2019, Saat: 07:00
#3
Yorumu Paylaş
+reppp

^Phoenix^

քɦօɛռɨӼ ɖɨʐǟʏռ

Aktif Üye
avatar
^Phoenix^
06-12-2019, Saat: 20:11
06-12-2019, Saat: 20:11
#4
Yorumu Paylaş
İlginiz için teşekkür ederim Gülümse

Baran Yılmaz

Aktif Üye

Aktif Üye
avatar
Baran Yılmaz
30-01-2020, Saat: 10:58
30-01-2020, Saat: 10:58
#5
Yorumu Paylaş
Teşekkür ederiz broom Gülümse


Konuyu Okuyanlar:
1 Ziyaretçi