HTML Dersi Table Kullanımı Hakkında (TR ve TD)

Geç kalanlar serisinin yeni HTML dersine hoş geldiniz. Bu dersin konusu Table kullanımıdır. Web programlama yapabilmenizi sağlayacak ders serisinin ikincisidir. 

Bir önceki HTML Nedir dersi ile neyi hedeflemiştik?

Şimdi ise binanın ikinci katını inşa edelim.  Bu dersi işaretleme detaylarına ayırdım.  Table kullanımı üzerinden konuyu ele alacağız. Bu detaylara parametre desek de olur. Bunlar (renk, biçim, en, boy, mesafe) gibi şeylerdir.

HTML etiketleri ile detaylı  işaretleme nasıl yapılır? Parametre ile aşağıdaki 7 noktaya dikkat ederek yapabiliriz.

Etiket içinde parametre kullanımı:

• Parametrelerin kendi içinde sıralaması önemsizdir.
• Etiketin açma kısmında yazılır.
• Değer ataması EŞİTTİR ile yapılır.
• Değer ÇİFT tırnak içi yazılabilir (="...").
• Değer TEK tırnak içi yazılabilir (='...').
• Parametre değeri direkt de yazılabilir (=...)

Table NEDİR?

Table, Genellikle web sayfası ile yoğun bilgi sunulacağında kullanılır. Table Kullanımı ile tablolama ihtiyacı giderilir. Tablo şeklinde bilgi sunmanın olmassa olmazı hizalama ihtiyacını bu HTML elementi giderir.



Dosya türü *.html şeklinde olan dosyaları editör ile açtığımızda bu HTML etiketini okuyabiliriz. Table etiketi içinde satır (TR) ve hücre (TD) etiketi barındırır. Hücreyi hem table hem de TR'nin kapsaması gerekir.

Geç Kalanlar

Bu serideki HTML dersleri  kimler içindi?
30 yaş üstü olan ve daha önce bu konular ile ilgisiz kalmış bay ve bayanlar için; evet sizin için! Geç kalanlar içinde siz de varsınız. Daha fazla geç kalmamak için bu dersi sonuna kadar okuyun lütfen.

HTML Parametreleri Şöyle Kullanılır

Gelin parametre mantığını HTML dilinde ele almadan önce anadil ile bunun mantığını görelim:
Yukarıda saydığım kullanımla ilgili 6 maddeyi şimdi tekrar okurmusun lütfen. Bir web sayfasında sınırsız sayıda tablo olabilir. Sayfadaki tablolar birbirinden bağımsızdır. Tablo kendi bölgesinde satırları barındırır. Satırın bölgesinde de  hücreler olur.

En az 30 yıldır uzak kaldığınız şu çağın etkileşimli kitapları olan web sitelerindeki tabloları kodlama eğlencesine başlayalım.

Table Kullanımı

Anadil vurgulu  işaret etiketleri şu şekildedir:
tablo = <tablo></tablo>
satır = <satır></satır>
hücre = <hücre></hücre>

Bu yukarıdaki kodlar henüz nem ve sıcaklık görmemiş tohum gibidir.
Anadil ile mantığını aldığınızda geriye baba dil ile ezberleme zorluğu kalacak. Sevene zorluk vız gelir. Bu zorluğun pratik yaparak üstesinden gelirsiniz. HTML ye olan sevgi ve ilginizi yüksek tutarsanız size kolaylaşır.

Yukarıdaki kodun baba dil İngilizceye anlam olarak  çevirisi şöyledir:
TABLO = table
SATIR = table row
HÜCRE = table data

HTML Çevirisi ise şunun gibi olur:
Tablo = <table></table>
Satır= <tr></tr>
Hücre=<td></td>

Tek hücreli canlıları bilmeden çok hücreli canlıları anlamaya çalışmak yürüme çağında çocuğun durup durup koşması gibidir; böyle birşey olmaz. Aşamalı öğrenmek hız ve keyif kazandırır. "Volvoxlu günlerin özlemi elbet birgün gidecek"

Anlık Ödev:
Tek hücreli tablo çiz, hücrede "Selam !" yazısı olsun.

Anadil ile bu ödevin html kodları şöyle olabilir:
<tablo>
    <satır>
        <hücre>
                Selam!
        </hücre>
    </satır>
</tablo>

Baba dil ile ise kod şunun gibi olur;
<table><tr><td>Selam! </td></tr></table>

Birinci dersten hatırladınız mı?
HTML Kodları tek satırda yazılabilir.  Yukarıda tek satırda yazdığımız kodu aşağıda "white space" küme elemanları olan; boşluk, tab ve enter tuşları ile görsel hale getirelim.

Şu yazım da doğrudur:
<table> <tr> <td>Selam! </td> </tr> </table>

HTML Table Kullanımı Örnekleri:

Hadi! Bu konuda HTML örneklerine geçelim.  Table kod örneklerinin ekran görüntüleri aşağıdaki gibidir. Kodların tarayıcıda oluşturduğu görüntülere alıcı gözle bakarsanız zihin kendini kodlara hazırlar.

Örnek [1] Görüntüsü:



Örnek [2] Görüntüsü:



Örnek [3] Görüntüsü: ()



Örnek [4] Görüntüsü:



HTML etiketlerinden  biri olan table kodları ile tasarıma başladık.

Az önce tarayıcı görüntü resimlerini verdiğimiz örnek HTML tablo kodları şu şekildedir:

Örnek [1]
HTML Table Border
<table border=7> <tr> <td>Selam! </td> </tr> </table>
Örnek [2]
HTML Table Width Height
<table border=7 width='100%' height="50%"> <tr> <td>Selam! </td> </tr> </table>
Örnek [3]
HTML Table valign align
<table border=7 width='50%' height="100%" align=center> <tr> <td valign="middle"> Selam! </td> </tr> </table>
Örnek [4]
HTML Table Bgcolor
<table border=7 width='50%' height="100%" align=center bgcolor=lightgreen> <tr> <td valign=top align=left> HEY! </td> <td valign=bottom align=right bgcolor=lightblue> Selam! </td> </tr> </table>
Color parametresi de tablodaki yazıya renk verir. Renklerin ingilizce isimlerinin listesini sizler için hazırlıyorum... Renkleri anlamanız için ayrıca renklerin anlaşılmasına yönelik bir ders hazırlığım var.

Bazı çocuklar apalamadan yürür!
Hacker olmak isteyen arkadaş da gelmiş HTML ders 2'ye.
Ne yapsam etsem de dersin havasını konusunu bozmadan arkadaşa da iki kelam etsem.

Hacker Olmak İsteyene HTML Table

Bak hacker yolcusu arkadaş; ne dedik Tablo TR leri yani satırları barındırır. Satır da hücreleri barındırır. Peki ya iki hücreli tek TR li bir tablo kodu ile şu aşağıdaki görüntü nasıl oluşuyor? 

İlk Hücre

İkinci Hücre

Yukarıdaki tablo görüntüsünün HTML kodu şu şekildedir:
<table class="table_hack"> <tr> <td class="block"> İlk Hücre </td> <td class="block"> İkinci Hücre </td> </tr> </table>
Böyle bir kod ile altlı üstlü iki hücre olur mu? Yan yana iki hücre olması gerekmiyor muydu? Source incelemesi yapar mısınız; Bakalım olayı çözmeniz kaç dakikada sürecek.

Bir hacker için olanaksız kelimesi yoktur. "Acaba şunu nasıl yapabilirim?" diye bir cümlenin peşinde gider. Programcı için 1 çabalama yeterli iken hacker 2 çabalar.

İleride CSS den bahsederken şunu tekrar söyleyeceğim:
Hangi biçim koleksiyonu hangi etiketi etkiler? Bu CSS ile HTML bağlaması class parametresi ile yapılır.

Hacker olmak isteyen arkadaş lütfen iyi bir takipçi ol. Class daki isimlendirme seni <style> </style> etiketine götürecek. Orada hacker olmak isteğin kadar çalışırsan çözersin. Ben HTML dersi öğrencilerime "a href"  konusunu hazırlayacağım;  gösterdiğim yeri inceler misin!

HTML Table Detayları

İleride bu konuda "HTML Table [2]" başlıklı bir ders yapılacaktır. Caption,colgroup, thead, tbody, tfood, TH, Colspan, Rowspan gibi özellikler ele alınacaktır. Şu anda ikinci tarzın önceliği ısındırmadır.

Motive Eden Söz:

Türkler çalışırsa dilleri anadil olmaktan çıkıp baba dil olur.
Sen çalışırsan, ben çalışırsam, o çalışırsa dilimiz baba dil olur. İngilizce'ye fesatlanıp söylenmek değil çalışmakla TR ve TD; STR ve HCR ye dönüşecek

---