HTML Tablolar (Temel)

[turkmedia]

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...

Konuya eklenmiş linkleri görmek için kayıt olmalısınız.

1 2 3 4 5

<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.

Konuya eklenmiş linkleri görmek için kayıt olmalısınız.

1 2 3 4 5 6 7 8 9 10

<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...

Konuya eklenmiş linkleri görmek için kayıt olmalısınız.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<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.