HTML Dersleri 6 - Tablolar (Başlangıç)


Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Belge Tipi Bildirimi (DOCTYPE) adlı yazımızda  HTML için gerekli temel etiketlerin kullanımı öğrenmiştik. Önceki dersimizi incelemediyseniz  HTML Dersleri 5 – Belge Tipi Bildirimi (DOCTYPE) linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML’de Tablo kullanımı nasıl olur ? Tablolarla neler yapabiliriz ?  Tablolar nerede kullanılırlar ? gibi konuları  öğreneceğiz.

Önceki derslerimizde , bir çok HTML etiketinin neler olduğunu ve görevlerini öğrenmiştik. Bu dersimizde ise tablolar konusunu kavrayacağız ve temelini atmış olacağız.

Tablolar 2000'li yıllarda web tasarımda en çok kullanılan teknikti. Sitelerin dizaynı tablolar ile yapılırdı, lakin sonrasında yerini < div >'lere ve HTML 5'in özel etiketlerine bıraktı. Çünkü tablolar ile yapılan sitelerin kullanımı ve kodlaması oldukça zordu. Tablolar, bilim adamlarının verilerini web sitelerinde paylaşabilmeleri için geliştirilmiş bir HTML etiketidir.Günümüzde site tasarımlarında kullanılmasalar bile bir çok makalede bizlere yardımcı olmaktadırlar o yüzden tablo yapısını iyi bir şekilde kavramamız gerekmektedir. Tablolara özel etiketler vardır bunlar , < table > , < tr > , < td > , < th > 'dir. Şimdi bunların ne işe yaradıklarını örneklerle beraber öğrenelim

table , td ve tr Etiketleri

Tablo oluşturmada kullanılan temel etiketler < table > , < td > ve < tr >'dir. İngilizce'de Table kelimesi tablo anlamına gelmektedir. < tr > etiketi tabloda ki satırı belirtmektedir ve table row kelimesinden gelmektedir. < td > etiketi ise tabloda ki sütunu belirtmektedir ve table data kelimesinden gelmektedir.

Tablolarla ilgili basit bir örnek yapalım , < table > etiketi ile tablomuzun temel taşını oluşturuyoruz , daha sonra içerisine < tr > etiketi ile ilk satırımızı oluşturuyoruz ve satırımızın içerisine de < td > etiketi ile sütunumuzu oluşturuyoruz. Böylece 1x1'lik (1 satır ve sütundan oluşan) bir tablo oluşturmuş oluyoruz.

Table Etiketi Örneği ;

<table border="1">
    <tr>
        <td>İlk Hücre</td>
    </tr>
</table>

Table Etiketi Çıktısı ;

İlk Hücre

Border parametresi ile anlayacağınız üzere tablomuzun çerçeve kalınlığını belirttik. Border parametresinin değeri piksel cinsinden ölçülür.

Şimdi ise başka bir örneğe geçelim ve 2x2'lik bir tablo oluşturalım.

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

Kodun Çıktısı ;

1. Hücre 2. Hücre
3. Hücre 4. Hücre

Tablolarda ki hiyerarşik yapıyı anladığınız sürece hiç bir sıkıntı çekmezsiniz. Daha iyi anlamak için karışık bir örnek yapalım.

<table border="1">
    <tr>
        <th>Takım İsmi</th>
        <th>Stadı</th>
        <th>Yıldızları</th>
    </tr>
    <tr>
        <td>Galatasaray</td>
        <td>Türk Telekom Arena</td>
        <td>4</td>
    </tr>
    <tr>
        <td>Fenerbahçe</td>
        <td>Şükrü Saraçoğlu</td>
        <td>3</td>
    </tr>
    <tr>
        <td>Beşiktaş</td>
        <td>Vodafone Arena</td>
        <td>2</td>
    </tr>
    <tr>
        <td>Trabzonspor</td>
        <td>Avni Aker Stadı</td>
        <td>1</td>
    </tr>
</table>

Kodun Çıktısı ;

Takım İsmi Stadı Yıldızları
Galatasaray Türk Telekom Arena 4
Fenerbahçe Şükrü Saraçoğlu 3
Beşiktaş Vodafone Arena 2
Trabzonspor Avni Aker Stadı 1

*Uyarı : Sizde kodun çıktısı farklılık gösterebilir sebebi sitemizde ekstra olarak css kullandığımız için tablo yapısının görselliğini değiştirmemiz. 

Gördüğünüz üzere tablo kodumuzda , < th > etiketini kullandık. < th > etiketi table header cümlesinin kısaltması olup tablo başlığı anlamına gelmektedir. < th > etiketi sayesinde tablolarımızda sütunların başlıklarını oluşturabiliriz.

Tebrikler! Bu derste  HTML’de Tablo (Table) Kullanımını öğrendiniz. Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.

HTML Derslerinin altıncı kısmı olan dersimizde , HTML’de Tablo (Table) Kullanımını  öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !

Test’e katıl öğrendiklerini pekiştir !

TESTE BAŞLAMAK İÇİN TIKLAYINIZ!

Bir sonraki derse  “HTML Dersleri 7 – Stiller (Styles)” geçmek için tıklayınız !

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim HTML Dersleri
Kategori Web Programlama
Ders Adeti 19 Ders
Dil Türkçe
Güncelleme 12/2020
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla