HTML’de Tablolar Oluşturmak

Tablolar ile web sitenizin içeriğini daha organize hale getirebilir, farklı bilgiler ekleyebilirsiniz.

Tabloları oluşturmak için 3 temel etiket kullanıyoruz:

  • <table> :tablo oluşturmak için
  • <tr> :tabloda satırlar oluşturmak için
  • <td> :hücreleri oluşturmak için

The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells.

Örnek web sayfasının “body” bölümüne aşağıdaki kodu yazarak siz de ilk tablonuzu oluşturabilirsiniz.

<table border=1>
    <tr>
        <td>Satır 1, Hücre 1</td>
        <td>Satır 1, Hücre 2</td>
    </tr>
    <tr>
        <td>Satır 2, Hücre 1</td>
        <td>Satır 2, Hücre 2</td>
    </tr>
    <tr>
        <td>Satır 3, Hücre 1</td>
        <td>Satır 3, Hücre 2</td>
    </tr>
    <tr>
        <td>Satır 4, Hücre 1</td>
        <td>Satır 4, Hücre 2</td>
    </tr>
</table>

Bu HTML kodu ile aşağıdaki gibi bir sonuç oluşturduysanız devam daha detaylı incelemeye geçebiliriz.

Satır 1, Hücre 1 Satır 1, Hücre 2
Satır 2, Hücre 1 Satır 2, Hücre 2
Satır 3, Hücre 1 Satır 3, Hücre 2
Satır 4, Hücre 1 Satır 4, Hücre 2

 

  • “border” niteliği tablonun kenarlıklarını belirler. “border=0″ ile kenarlıksız tablolar oluşturursunuz.

Tablolara Başlık Eklemek

Tablolara başlık satırı eklemek için hücreler oluşturmak için kullanılan <td> etiketi yerine, <th> etiketini kullanılır. Aşağıdaki örneği siz de “body” ögesinin içine yerleştirin.

<table border=1>
    <tr>
        <th>İsim</th>
        <th>Ücret</th>
    </tr>
    <tr>
        <td>Bisiklet</td>
        <td>1000 TL</td>
    </tr>
    <tr>
        <td>Paten</td>
        <td>200 TL</td>
    </tr>
</table>

Sonuç ise aşağıdaki gibi olacaktır.

İsim Ücret
Bisiklet 1000 TL
Paten 200 TL

 

Hücre büyüklüğü ve hücreler arası boşlukları ayarlamak

Hücreni büyüklüğünü “cellpading” hücrelerin arasındaki boşluğu “cellspacing” ayarlayan niteliklerdir.

<table border="1" cellpadding="5" cellspacing="5">

şeklinde <table> etiketi içinde düzenlenirler.

Tablolarda satır ve sütunları birleştirme

“colspan” ve “rowspan” niteliklerini kullanarak tablolarda sırasıyla sütun ve satırları birleştirebilirsiniz.

Aşağıdaki örnek tabloyu oluşturan kodları siz de örnek web sayfanızda deneyebilirsiniz.

<table border="1">
    <tr>
       <th>Sütun 1</th>
       <th>Sütun 2</th>
       <th>Sütun 3</th>
    </tr>
    <tr>
        <td rowspan="2">Satır 1, Hücre 1</td>
        <td>Satır 1, Hücre 2</td>
        <td>Satır 1, Hücre 3</td>
     </tr>
     <tr>
        <td>Satır 2, Hücre 2</td>
        <td>Satır 2, Hücre 3</td>
     </tr>
     <tr>
        <td colspan="3">Satır 3</td>
     </tr>
</table>

Yukarıdaki örnek kod aşağıdaki tabloyu oluşturur:

Sütun 1 Sütun 2 Sütun 3
Satır 1, Hücre 1 Satır 1, Hücre 2 Satır 1, Hücre 3
Satır 2, Hücre 2 Satır 2, Hücre 3
Satır 3

 

Bunlar dışından da tablolarda aşağıdaki özellikleri kullanabilirsiniz:

  • “bgcolor”: Bu nitelikle bütün tabloya ya da tek bir hücreye arka plan rengi ekleyebilirsiniz.
<table border="1" bordercolor="green" bgcolor="yellow">
  • “background” : Bu nitelikle arkaplan görüntüsü ekleyebilirsiniz.
  • “bordercolor” : Bu nitelikle kenarlıkların rengini değiştirebilirsiniz.
  • “width” ve “height” nitelikleri ile piksel veya ekranda kapladığı alanın yüzdesi olarak girerek hücrelerin ve tablonun boyutunu değiştirebilirsiniz.

No Comments

Leave a Comment

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked