Tablo Oluşturma

Kod

<table>
    <thead> Dünyanın En Zengin 3 İnsanı </thead>
    <th> İsmi </th>
    <th> Mesleği </th>
    <tr>
        <td> Bill Gates </td>
        <td> Microsoft'un Kurucusu </td>
    </tr>
    <tr>
        <td> Larry Ellison </td>
        <td> Oracle'ın Kurucusu </td>
    </tr>
    <tr>
        <td> Larry Page </td>
        <td> Google'un Kurucu Ortağı </td>
    </tr>
    <tr>
        <td colspan="2">Bu veriler 2014 yılına aittir.</td>
    </tr>
</table>

<table border="0" width="50%" height="50%" background="tablo.jpg" cellpadding="30" cellspacing="30" align="center">
    <thead> Dünyanın En Zengin 3 İnsanı </thead>
    <th bgcolor="red"> İsmi </th>
    <th bgcolor="yellow"> Mesleği </th>
    <tr>
        <td> Bill Gates </td>
        <td> Microsoft'un Kurucusu </td>
    </tr>
    <tr>
        <td> Larry Ellison </td>
        <td> Oracle'ın Kurucusu </td>
    </tr>
    <tr>
        <td> Larry Page </td>
        <td> Google'un Kurucu Ortağı </td>
    </tr>
    <tr>
        <td colspan="2">Bu veriler 2014 yılına aittir.</td>
    </tr>
</table>

Açıklama

Basit Kullanım

1. <thead> … </thead> etiketi tablo başlığını belirtmek amacıyla kullanılmaktadır.
2. <th> … </th> etiketi sütun başlıklarını belirtmek amacıyla kullanılmaktadır.
3. <tr> … </tr> etiketi yeni bir satır oluşturmak amacıyla kullanılmaktadır.
4. <td> … </td> etiketi yeni bir sütun oluşturmak amacıyla kullanılmaktadır.
5. colspan özelliği kullanılarak sütunlar birleştirilebilir. Yukarıdaki örnekte iki sütun birleştirilerek yeni bir sütun oluşturulmuştur.
6. colspan özelliği yerine rowspan özelliği kullanılarak bir sütunun kaç satırın birleşiminden oluşacağı da ayarlanabilir.

Özelleştirilmiş Kullanım

1. border özelliği ile tablonun çerçeve kalınlığını ayarlayabiliriz. Eğer “0” yazarsak tablo çerçevesiz olacaktır.
2. width ve height özellikleri ile tablonun genişliğini ve yüksekliğini ayarlayabiliriz. Sayısal değerler verebileceğimiz gibi yüzdelik değerler vererek tablonun genişliğini ve yüksekliğini, tablonun bulunduğu sayfanın genişlik ve yükseklik değerlerine göre ölçeklendirebiliriz. Yukarıdaki örnekte tablo, sayfanın genişliğinin yarısı kadar bir genişliğe, sayfanın yüksekliğinin yarısı kadar bir yüksekliğe sahip olacaktır.
3. background özelliği ile tablonun arkaplanına bir resim yerleştirebiliriz.
4. cellpadding özelliği ile hücre çerçeveleri ile yazılar arasındaki mesafeyi ayarlayabiliriz.
5. cellspacing özelliği ile hücre çerçeveleri arasındaki mesafeyi ayarlayabiliriz.
6. align özelliği ile tablonun konumunu belirtebiliriz.
   center (Ortala) || left (Sola daya) || right (Sağa daya)
7. valign özelliği ile hücre içerisindeki yazının dikey konumunu belirtebiliriz.
   top (Yukarı daya) || middle (Ortala) || bottop (Aşağı daya)
8. bgcolor özelliği ile özelliğin kullanıldığı etiketin arkaplan rengini değiştirebiliriz.
   <tr bgcolor=”red”> (İlgili satırın arkaplan rengini kırmızı yapar.)
   <td bgcolor=”red”> (İlgili sütunun arkaplan rengini kırmızı yapar.)
   <table bgcolor=”red”> (Tablonun arkaplan rengini kırmızı yapar.