Tablo Ekleme

Tablo Etiketi (<table>…</table>)

Web sayfamıza ekleyeceğimiz tablo ile ilgili tüm içerik bu etiket çifti içerisine yazılır.

<table>…</table>

Bu etiket çifti tek başına bir tablo oluşturmaya yeterli değildir. Bildiğimiz gibi tablolar satır ve sütunlardan oluşuyor. Satır ve sütunları göstermek için başka etiketler kullanacağız. Satır ve sütunlar için kullanacağımız etiketler de bu etiket çifti içerisinde yer alacaklar. Örnek kodlarda görülmediklerine bakmayın, zamanı gelince onları da göreceğiz.

border Niteliği (<table border="...">...</table>)

Normalde border niteliğini kullanmazsak tablonun satır ve sütunlarını görsel olarak ayırdetmemizi sağlayan çerçeve görüntülenmez.

test test test
test test test

border niteliği bu çerçevenin görüntülenmesini sağlar.

<table border="1">…</table>

test test test
test test test

bgcolor Niteliği (<table bgcolor="...">...</table>)

Tablomuza arka plan rengi vermek için kullanırız.

<table bgcolor="red" border="1">…</table>

Böyle bir tablo aşağıdaki şekilde görüntülenecektir.

test test test
test test test

width Niteliği (<table width="...">...</table>)

Tablomuzun genişliğini belirtmek için kullanırız.

<table width="150px" border="1">…</table>

Bu şekilde tanımladığımız tablomuzun genişliği 150 piksel olacaktır.

test test test
test test test

İstersek tablo genişliğini, tablonun içinde bulunduğu sayfanın belli bir oranında olacak şekilde de atayabiliriz.

<table width="75%" border="1">…</table>

Yukarıda görüldüğü gibi daha önceki örnekte px yazdığımız yere bu kez % yazarak, tablonun içinde bulunduğu sayfanın %75'i kadar yer kaplamasını istediğimizi belirtmiş olduk. Bu tablo aşağıdaki gibi görüntülenir. Sayfanın genişliğini değiştirdikçe tablonun genişliği de değişecektir.

test test test
test test test

cellspacing Niteliği (<table cellspacing="...">...</table>)

Tablonun hücreler arasındaki aralığı (tablo çerçevesinin genişliği) bu nitelik ile ayarlanır.

<table cellspacing="10" border="1">…</table>

cellspacing niteliği bu şekilde belirtilmiş bir tablonun çerçeve genişliği 10 piksel olarak ayarlanır:

test test test
test test test

cellpadding Niteliği (<table cellpadding="...">...</table>)

Tablo hücreleri içeriğinin çerçeve ile arasında bırakılacak boşluğu belirtmek için bu nitelik kullanılır.

<table cellpadding="10" border="1">…</table>

test test test
test test test

Aynı tabloyu cellpadding özelliği 20 piksel olacak şekilde ayarlarsak aşağıdaki şekilde görülecektir:

test test test
test test test



Tablo Satırı Etiketi (<tr>...</tr>)

Tablo içerisine eklemek istediğimiz her bir satır için bu etiket çifti kullanılır. Tablo etiket çifti (<table>...</table>) içerisinde yer alır. Görüntülenmek istenen satır sayısı kadar tablo satırı etiket çifti yazılmalıdır. 

  <table border="1">
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </table>

Bu şekilde tanımlanmış bir tablo 3 satırdan oluşmaktadır:

test test test
test test test
test test test

bgcolor Niteliği (<tr bgcolor="...">...</tr>)

İlgili satıra arka plan rengi vermek için kullanırız.

<tr bgcolor="red">…</tr>

Böyle bir satır aşağıdaki şekilde görüntülenecektir.

test test test
test test test
test test test

height Niteliği (<tr height="...">...</tr>)

İlgili satırın yüksekliğini ayarlamak için kullanırız.

<tr height="200px">…</tr>

Böyle bir satır aşağıdaki şekilde görüntülenecektir.

test test test
test test test
test test test



Tablo Hücresi Etiketi (<td>...</td>)

Tablo içerisine eklemek istediğimiz her bir sütun için bu etiket çifti kullanılır. Tablo satırı etiket çifti (<tr>...</tr>) içerisinde yer alır. Görüntülenmek istenen sütun sayısı kadar tablo hücresi etiket çifti yazılmalıdır. 

  <table border="1">
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>test</td>
      <td>test</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </table>

Bu şekilde tanımlanmış bir tablo 4 sütundan oluşmaktadır:

test test test test
test test test test
test test test test

bgcolor Niteliği (<tr bgcolor="...">...</tr>)

İlgili hücreye arka plan rengi vermek için kullanırız.

<td bgcolor="red">…</td>

Böyle tanımlanmış bir hücre aşağıdaki şekilde görüntülenecektir.

test test test
test test test
test test test

width Niteliği (<td width="...">...</td>)

İlgili hücreye istenilen genişliği vermek için kullanılır. Bir hücreye uygulanan genişlik farklı satırlarda yer alan aynı hizadaki hücrelerin de genişliğini değiştirir.

<td width="100px">…</td>

Böyle tanımlanmış bir hücre aşağıdaki şekilde görüntülenecektir.

test test test
test test test
test test test

height Niteliği (<td height="...">...</td>)

İlgili hücreye istenilen yüksekliği vermek için kullanılır. Bir hücreye uygulanan yükseklik içinde bulunduğu satırın yüksekliğini değiştirir.

<td height="100px">…</td>

Böyle tanımlanmış bir hücre aşağıdaki şekilde görüntülenecektir.

test test test
test test test
test test test

colspan Niteliği (<td colspan="...">...</td>)

İlgili hücrenin kendinden sonra gelen hücreler ile birleştirilerek tek bir hücre oluşturmalarını sağlamak için kullanılır.

<td colspan="2">…</td>

Böyle tanımlanmış bir hücre aşağıdaki şekilde görüntülenecektir.

test test test
test test
test test test

Buradaki örnekte 2. satırda yer alan 2. hücre kendinden sonra gelen hücre ile birleştirilmiştir. İlk hücreyi kendinden sonra gelen hücre ile birleştirseydik şu şekilde görüntülenecekti:

test test test
test test
test test test

rowspan Niteliği (<td rowspan="...">...</td>)

İlgili hücrenin sonraki satırda aynı hizaya denk gelen hücreler ile birleştirilerek tek bir hücre oluşturmalarını sağlamak için kullanılır.

<td rowspan="2">…</td>

Böyle tanımlanmış bir hücre aşağıdaki şekilde görüntülenecektir.

test test test
test test
test test test

2 yerine 3 yazarsak 3 satırdaki hücreler birleştirilecek ve aşağıdaki şekilde görüntülenecekti.

test test test
test test
test test

colspan ve rowspan niteliğini kullandığımız zaman niteliğe atadığımız değer kadar eksik tablo hücresi çifti tanımlamamız gerekmektedir. Bu sayfanın sonundaki kod içerisindeki ilgili yerleri inceleyebilirsiniz.



Sütun Grubu Etiketi (<colgroup>...</colgroup>)

Bir tabloya ait sütunların bazı özelliklerini topluca düzenlemek için colgroup etiketini kullanırız. Bu etiket sayesinde her satır ve her hücre için tek tek özellik belirtmek zorunluluğundan kurtulmuş oluruz. 

    <table border="1">
      <colgroup bgcolor="red">
      </colgroup>
      <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>

Bu şekilde yazılmış bir tablo tanımına göre tablonun ilk sütununun arkaplan rengi kırmızı olacaktır.

test test test
test test test

span Niteliği (<colgroup span="...">...</colgroup>)

Bir tablonun baştan istediğimiz sütun sayısı kadar sütunun bazı özelliklerini topluca değiştrimek için span niteliğini kullanırız. 

    <table border="1">
      <colgroup span="2" bgcolor="red">
      </colgroup>
      <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>

Bu şekilde yazılmış bir tablonun ilk iki sütununun arka plan rengi kırmızı olur.

test test test
test test test



Sütun Etiketi (<col>)

colgroup etiketi ile istediğimiz sütunların özelliklerini değiştiremiyoruz. Sadece tablonun baş tarafındaki sütunların özelliklerini yönetebiliyoruz.

col etiketi ile ise istediğimiz sütunun özelliklerini değiştirme imkanımız var.

Not: col etiketi colgroup etiket çifti içerisinde yer alacak şekilde kullanılır. 

    <table border="1">
      <colgroup>
        <col bgcolor="red">
        <col bgcolor="white">
        <col bgcolor="blue">
      </colgroup>
      <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>

Bu şekilde yazılan bir tablo aşağıdaki şekilde görüntülenecektir.

test test test
test test test

span Niteliği (<col span="...">)

Bu niteliği kullanarak birden fazla sütunun özelliğini aynı anda değiştirebiliriz. 

    <table border="1">
      <colgroup>
        <col span="2" bgcolor="red">
        <col bgcolor="blue">
      </colgroup>
      <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>

Bu şekilde yazılan bir tablo aşağıdaki şekilde görüntülenecektir.

test test test
test test test

Bu sayfada öğrendiğimiz etiket ve niteliklerden oluşan HTML sayfamızın bir örneği aşağıdaki şekildedir: 

    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="keywords" content="HTML,tags,etiketler,tablo">
        <title>Tablo Ekleme</title>
    </head>
    <body>
        <table>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1" bgcolor="red">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1" width="150px">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1" width="75%">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1" cellspacing="10">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1" cellpadding="10">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1" cellpadding="20">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr bgcolor="red">
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr height="200px">
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td bgcolor="red">test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td width="100px">test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td height="100px">test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td colspan="2">test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td colspan="2">test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td rowspan="2">test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <tr>
                <td rowspan="3">test</td>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
                <td>test</td>
            </tr>
        </table>
        <br />
        <table border="1">
            <colgroup bgcolor="red">
      	    </colgroup>
      	    <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
      	    </tr>
      	    <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
      	    </tr>
        </table>
        <br />
        <table border="1">
            <colgroup>
                <col span="2" bgcolor="red">
                <col bgcolor="blue">
      	    </colgroup>
      	    <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
      	    </tr>
      	    <tr>
                <td>test</td>
                <td>test</td>
                <td>test</td>
            </tr>
    	</table>
    </body>
</html>

<< Bağlantı Ekleme <<   >> Liste Ekleme >>

Yorumlar

Yorum Gönder