Y Giriş Yap

   Tarih:
Merhaba! Bu dersimizde html tabloların nasıl oluşturulduklarıyla ilgili bazı şeyleri öğreneceksiniz! Üstelik olabilecek en kolay şekilde!

Aslında Tablo kodları kolaydır. Html tablolarının tek bir zor yanı vardır: "anlatmak" :D Evet, html tablolarını anlatmak zordur. Ama anlatabilirseniz, anlamak çocuk oyuncağı olur.


Hatırlatma: küme mantığı
Daha önce HTML deki her bir elementin aslında bir küme gibi olduğundan bahsetmiştik. İç içe kümeler oluşturabiliyoruz mesela. yani bir yazı kümesi oluşturursak:

<a>              </a>

Sonra bunun içine bir resim kümesi koyarsak:

<a>  <img/> </a>

Eğer istesek, bir Div kümesine iki paragraf kümesi ve her birine ikişer yazı kümesi ekleyebiliriz:

<div>
<p>
<a> </a>
<a> </a>
</p>

<p>
<a> </a>
<a> </a>
</p>
</div>

Bunları alt alta da yazsanız, yan yana da yazsanız bir şey değişmez.

Tabloları oluştururken de, bu şekilde en az 3 farklı element kullanacağız. Şimdi istersen bir tablonun kümelenişini görelim:


Tablo Elementinin Kümelenmesi








Yukarıdaki gibi görünen bir tabloda, aslında iç içe konulmuş 7 tane element vardır.
1 adet tablo elementi. Bu tablo elementinin içine yerleştirilmiş 2 adet satır elementi ve her bir satır elementinin içine konulmuş iki tane hücre elementi.

Aslında anlaşılması gayet basit. Tablo elementimizin adı table dır.(teybıl diye okunur). satır elementi tr dir ve hücre elementi td dir.

Yukarıda soldaki tablonun kodları şunlardır:



<table>
<tr>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
</tr>

</table>

Eğer tablonuzda sadece bir tek satır, ve o satırda da 3 adet hücre olsun isteseydiniz:

<table>
<tr>
<td></td> <td></td>
<td></td>
</tr>
</table>

Bunu yapardınız. hücrelerin içine ise istediğinizi yazabilirsiniz. <td>merhaba</td> gibi.

HTML kodların önemli bir özelliği, satır atlayarak yazmanızın hiç bir anlamı olmamasıdır. yani yukarıda verdiğimiz kodu şu şekilde yazabiliriz:


<table> <tr> <td></td> <td></td> <td></td> </tr> </table>

Tüm bunların dışında, tabloların bir dezavantajı vardır:

Hücreleri hizalarlar! Yani bir satıra iki, diğer satıra üç hücre koyarsanız şöyle görünür:




Bunu aşmak ve hücrelerin genişliğini istediğimiz gibi ayarlayabilmek için hücre elementinin özelliklerini öğrenmemiz gerekir:



TD Elementinin Özellikleri




Özellik Değer Ne İşe Yarar? Örnek Kullanım
align left
right
center
justify
hücre içindekilerin sağa sola ortaya veya her iki tarafa hizalanmasını sağlar. <td align="right"> merhaba </td>
bgcolor rgb(x,x,x)
#xxxxxx
hücrenin arkaplan rengini rgb veya hex renk kodlarıyla belirler. <td bgcolor="#000000"> merhaba </td>
colspan sayı hücrenin yatay olarak kaç hücrelik yer kaplayacağını belirler. <td colspan="2"> merhaba </td>
rowspan sayı hücrenin dikey olarak kaç hücrelik yer kaplayacağını belirler. <td rowspan="8"> merhaba </td>
height piksel piksel cinsinden hücrenin yüksekliğini belirtir. <td height="40px"> merhaba </td>
width piksel piksel cinsinden hücrenin genişliğini belirtir. <td width="120"> merhaba </td>
valign top
middle
bottom
hücre içindekilerin hücrenin alt veya üst kenarına dayanmasını veya dikey olarak tam ortalanmasını sağlar. <td valign="top"> merhaba </td>



Bu derslik burada kesmek yararlı olacaktır. Bir daha ki derste tabloların tüm özelliklerini ve uygulamalarını öğreneceğiz. O zamana kadar, uygulamalarını göstermediğimiz yukarıdaki td özelliklerini deneyimlemeye çalışın.

İyi çalışmalar!
Kod Dostu
Kod Dostu tarafından eklenmiş hazır kodlar için tıklayın.

Kod Puanı: Çok
kodNinjaları: Siyah Kuşak

Yorumlar: