Tablolar (Temel) - Zinzinzibidi

Tablolar (Temel)

Bu dersimizde "tablolar" konusuna giriş yapacağız. Temel etiketlerini öğrendikten sonra çok basit örnekler ile tabloları kavrayacağız.

Tablolar

Tablolar, bilim insanlarının elde ettikleri verileri web sitelerinde paylaşabilmek için geliştirilmiş bir HTML özelliğidir. 2000'li yılların ortalarına kadar web tasarımında en çok kullanılan yöntemdi. Bugün ise artık tablo yöntemi yerine div yöntemini kullanıyoruz. Yine de bilmekte fayda var.

<table>, <tr> ve <td> etiketleri

Tablo tasarımında kullanılan temel etiketler <table>, <tr> ve <td>'dir. Table dilimizde "tablo" anlamına gelmektedir. <tr> etiketi tablonun "satır"ını belirtir. Açılımı table row'dur. Dilimizde "tablo satırı" anlamına gelir. <td> etiketi ise tablonun "sütun"unu belirtir. Açılımı table data'dır. Dilimizde "tablo verisi" anlamına gelir.

Şimdi basit bir örnekle bu üç etiketi kullanalım ve 1x1'lik (1 satır ve 1 sütundan oluşan) bir tablo oluşturalım...

<table border="1"> <tr> <td>hücre</td> </tr> </table>

table etiket adından sonra yazılan border atfı bize tablonun sınır genişliğini vermektedir. Buradaki 1 sayısı 1 piksel'e eşittir.

Şimdi de çıktımıza bakalım.

hücre

Şimdi de 2x2'lik bir tablo oluşturalım... Sınır genişliği ise 2 olsun.

<table border="2"> <tr> <td>hücre 1</td> <td>hücre 2</td> </tr> <tr> <td>hücre 3</td> <td>hücre 4</td> </tr> </table>

Çıktımıza bakalım...

hücre 1	hücre 2
hücre 3	hücre 4

Görüldüğü gibi tablo oluşturmak oldukça kolay.

<th> etiketi

Açılımı table header olan, dilimizde "tablo başlığı" anlamına gelen <th> etiketi oluşturduğumuz tabloların hücrelerine başlık vermek için kullanılır.

Aşağıdaki örneği inceleyelim...

<table border="1"> <tr> <th>başlık a</th> <th>başlık b</th> <th>başlık c</th> </tr> <tr> <td>hücre 1</td> <td>hücre 2</td> <td>hücre 3</td> </tr> <tr> <td>hücre 4</td> <td>hücre 5</td> <td>hücre 6</td> </tr> </table>

Çıktısına bakalım...

başlık a	başlık b	başlık c
hücre 1	hücre 2	hücre 3
hücre 4	hücre 5	hücre 6

3x3'lük bir tablo oluşturduk ve bunların ilk satırına hücre başlıkları verdik. Ben HTML'in <code> özelliği ile size bunların çıktılarını gösterdiğim için sizin çalışmalarınızdan daha farklı görünecektir. Yani eğer boş bir html dosyasına yukarıdaki kodları yazar ve tarayıcınızda çalıştırırsanız daha anlamlı sonuçlar elde edeceksiniz.

Şimdi sizden isteğim bu son yazdığım örneği ya da kendi oluşturduğunuz bir örneği Notepad++ yardımı ile kendiniz yazmanız ve tarayıcı ekranında sonucu görmeniz.

Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.

Diğer derse geçmek için tıklayınız. >>>