HTML Tablo Oluşturma

[bLastX]

Web sayfasında verilerin sıralı bir şekilde tablo halinde görünmesini istersek bunu bir HTML tagı olan <table> ile yaparız. HTML tablolar satır ve sütunlardan oluşur. Bu satır ve sütunların sayılarını tablo oluştururken biz belirleriz.

Tablolarda satırlar ve sütunlar <table> tagı içinde blirtilir. Satır için <tr>, sütun için ise <td> tagları kullanılır.

Tablo örneği HTML kodu:

<table>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
    </tr>           
</table>

HTML Tablo Başlığı​

Çoğu zaman tablonun en üstünde sütunların içeriği hakkında bilgi veren başlıklar kullanılır. HTML tablolarda bu ihtiyaç için özel <th> tagı kullanılır.

Örnek tablo başlığı HTML kodu:

<table>
    <tr>
        <th>1.Sütun</th>
        <th>2.Sütun</th>
    </tr>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
    </tr>           
</table>

rowspan Özelliği​

Tablolarda bir hücrenin kaplayacağı genişliği satır olarak belirlemek için kullanılır.

rowspan örnek kodu:

<table border="1">
    <tr>
        <th>1.Sütun</th>
        <th>2.Sütun</th>
        <th>3.Sütun</th>
    </tr>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td rowspan="2">2.1,3.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr> 
    <tr>
        <td>3.2</td>
        <td>3.3</td>
    </tr>     
</table>

colspan Özelliği​

tabloda her hücrenin kaplayacağı sütun sayısını belirlemek için kullanılır.

colspan örnek kodu:

<table border="1">
    <tr>
        <th>1.Sütun</th>
        <th>2.Sütun</th>
        <th>3.Sütun</th>
    </tr>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td colspan="2">2.1,2.2</td>
        <td>2.3</td>
    </tr> 
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>     
</table>

cellspacing özelliği hücreler arası boşluk vermek için kullanılır.

cellspacing örnek HTML kodu:

<table border="1" cellspacing="20">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>     
</table>

cellpadding özelliği hücre içeriği ile hücre kenarı arasındaki boşluğu (padding) ayarlar.

cellpadding örnek HTML kodu:

<table border="1" cellpadding="20">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>     
</table>

Tablolarda kullanılan diğer özellikler:

width: Tablo genişliğini belirler.

height: Tablo yüksekliğini belirler.

align: Tablonun sayfadaki pozisyonunu belirler.

border: Tabloyu ve hücreleri çerçeve içine alır.

Ayrıca bu özelliklerin dışında CSS ile tabloya style verilebilir.

 

[Kehanet]

Paylaşım için teşekkürler.

 

[Kralbenimmmm]

Paylaşim İçin Teşekürler İyi Forumlar.

 

[GUNNERIUS]

Paylaşım için teşekkürler.

 

[Carissa]

Paylaşım için teşekkürler.