Top

Bölüm 12 (HTML Dersleri), Tablolar

Bölüm 12 (HTML Dersleri), Tablolar

HTML ile kendi web sayfalarınızı oluşturabilirsiniz.  W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.

Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.


HTML, Tablolar

Tablolar <table> tagı(etiketi) ile tanımlanır.

Bir tablo sıralarla/satırlarla bölünmüştür. (<tr> etiketiyle) Her bir satır da hücrelere bölünmüştür. (<td> etiketiyle) td, ‘Table stands’ anlamında kullanılır ve içeriğin hücre verisini tutar. Bir td etiketi yazı, link, imaj, liste, form ve diğer tabloları taşıyabilir.

Misal;

<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, hucre 1</td>
<td>satır 2, hücre 2</td>
</tr>
</table>

Bunu yazdığınızda durumu fark edebilirsiniz.

HTML, Tablolar ve Border özelliği

Eğer siz atamazsanız herhangi bir değer, border yani çerçeve gözükmeyecektir. Bazen yararlı bu ama çoğu zaman da sınırların yani çerçevenin gözükmesini isteriz.

Border çıkması için border özelliğini kullanıp sayı vermemiz yeterli.

Misal;

<table border=”1″>
<tr>
<td>Satır 1, hücre 1</td>
<td>Satır 1, hücre 2</td>
</tr>
</table>

HTML, Tablo başlığı

Tablo başlık bilgisi <th> etiketi ile tanımlanmıştır. Tüm bilinen tarayıcılar da bu bölgeyi bold ve merkezde gösterir. Header=Başlık

Misal;

<table border=”1″>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Örnekler ve Uygulamalar;

Border’sız tablolar
Kenarlıksız tablolar…

Table headers/başlık
Table headers oluşturma…

Başlığı olan tablo
Tabloya nasıl başlık eklenir…

satırda ya da sütundaki tablo hücrelerinin mesafesini ayarlama
Tablo hücrelerindeki mesafeyi ayarlama

bir table‘daki elementler
Diğer elemanların içindeki elemanlar nasıl gösterilir…

Cell padding
Hücre içinde hücre içeriği ile çerçeve arasında daha fazla nasıl beyaz alan koyulur ya da  azaltılır…

Cell spacing
Hücreler arası boşluğu kullanabilme.

Frame Özelliği
Frame özelliğini kullanarak tablonun çerçevesini ayarlama.

HTML, Tablo Etiketleri ve Tanımları’nın tablosu 😀

Etiket

Tanım

<table>

Bir tablo tanımlar

<th>

Tablonun header’ini yani başlığını tanımlar

<tr>

Bir satır tanımlar

<td>

Bir hücre tanımlar

<caption>

Bir tablo başlığı tanımlar

<colgroup>

Biçimlendirme için bir sütun grubu tanımlar tabloda

<col />

Bir tabloda bir veya daha fazla sütun için özellik değeri tanımlar

<thead>

Bir tabloda Header’ı gruplar

<tbody>

Bir tabloda body içeriğini gruplar

<tfoot>

Bir tabloda footer içeriğini gruplar

HTML5’te geldi bu özellik; thead, tbody, tfoot… Bunlar eskiden yoktu. Şimdi standart oldu. İlk önce thead, sonra tfoot, sonra da tbody’yi girersiniz. Doğrusu budur. Buna dikkat etmek gerekir. Uygulamada da zaten göreceksiniz.

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan Bölüm 11 (HTML Dersleri) İmajlar/Görüntüler başlıklı makalemizde area, height ve html hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious