HTML Tablo İşlemleri

M. Kasım Sular
September 29, 2020
3269 Görüntülenme
0 Yorum

<table> etiketi site iskeleti oluşturma sürecinde <div> etiketi sonrasında popülaritesini yitirse de içerik listeleme kısmında halen aktif olarak kullanılmaktadır. Özellikle de kayıt listeleme işlemlerinde aktif olarak kullanılmaktadır. Gelin bu etiketi, parametrelerini ve alt etiketlerini birlikte inceleyelim.

<thead> Tablonun başlık bölümü alt etiketidir

<tr> Satır ifade eden etikettir. <thead>, <tbody> veya direkt olarak <table> altında kullanılmaktadır.

<th> Herbir tablo başlık sütunu ifade eder ve <thead><tr> içerisinde kullanılmaktadır.

<tbody> Tablonun gövde bölümünü ifade eden alt etikettir.

<td> Herbir tablo başlık alanına karşılık gelen ve kayıt değerinin içerisine yazıldığı hücre etiketidir. <tbody><tr> içerisinde bulunmaktadır.

Tablo Uygulaması

Tablo adında bir klasör ve içerisine index.html adında bir dosya oluşturup html:5 (Emmet) yazıp onaylarak html, head ve body etiketlerinden oluşan ana taslağımızı oluşturalım ve sayfamızı içerik eklemeye hazır hale getirelim. Unutmayalım tüm içeriğimiz <body> etiketi içerisine ekliyoruz ve her sayfa için <title> etiketinin içeriğine bölüm başlığımız yazıyoruz. Bu işlemi standart hale getirelim.

Öncelikle senaryonumuzu belirleyelim. Örneğin 11U Sınıfı Öğrenci Devamsızlık Listesini görüntülediğimiz bir tablo oluşturalım. Kayıtlar Sıra No, Öğrenci No, Adı, Soyadı ve Devamsızlık ana başlıklarına listelenecek ve 3 adet kayıt listeleyeceğiz. Haydi başlayalım.

Tabloyu hızlı bir şekilde oluşturmak için Emmet Abbreviation (Emmet Kısaltması) kullanabilirsiniz. Eski adı Zen Coding olan bu sistemle kodlama sürecini hızlandırabiliriz. Kullanımı şu şekildedir.

Tablo ve başlık alanını table>thead>tr>th*5 (Emmet Kullanımı) yaptığımızda hızlıca oluşturabiliriz.

Ana başlıkları <th> etiketlerinin içerisinde <th>Sıra no</th> şeklinde sırayla yazalım. 5 adet başlığım olduğu için th*5 yazmıştım. Sonrasında başlık bölümünün bittiği yerden </thead> sonra hemen tbody>tr*3>td*5 Emmet kodunu yazalım.

İçeriği de doldurduktan sonra oluşturduğumuz kod aşağıdaki şekilde olacaktır

<table>

        <thead>

            <tr>

                <th>Sıra No</th>

                <th>Öğrenci No</th>

                <th>Adı</th>

                <th>Soyadı</th>

                <th>Devamsızlık</th>

            </tr>

        </thead>



        <tbody>

            <tr>

                <td>1</td>

                <td>87</td>

                <td>Ayşe</td>

                <td>Taşkın</td>

                <td>7</td>

            </tr>

            <tr>

                <td>2</td>

                <td>134</td>

                <td>Ali</td>

                <td>Kaya</td>

                <td>10</td>

            </tr>

            <tr>

                <td>3</td>

                <td>623</td>

                <td>Melek</td>

                <td>Gündüz</td>

                <td>2</td>

            </tr>

        </tbody>

    </table>

Oluşturduğumuz HTML kodun görüntüsü aşağıdaki şekilde görülmektedir.

Görseli biraz daha şık bir hale getirmek için <table> etiketimize birkaç tane parametre ekleyelim.

width : Tablonun genişlik değerini vereceğimiz parametre. width=”640” gibi bir piksel değeri gireceğimiz gibi websayfamız reponsible (mobil uyumlu) bir yapıda olmasını istersek width=”100%” şeklinde bir değer vererek ekranın genişliğinde olmasını sağlayabiliriz.

height : Tablonun yükseklik değerini verebileceğimiz parametredir. Genel olarak kullanmadığımız bir parametredir.

border : Tablomuzun çizgi kalınlığını piksel cinsinden verebileceğimiz bir parametredir.

cellpadding : Hücre sınır çizgisi ile hücre içeriği arasına koyabileceğimiz piksel cinsinden mesafe değerini bu parametre ile verebiliriz.

cellspacing : hücreler arası mesafeyi piksel cinsinden bu parametre ile verebiliriz. Genelde 0 verilmelidir.

bordercolor : Tablo çizgi rengini verebileceğimiz parametredir. Genelde kullanmadığımız bir parametredir.

bgcolor : Tabloya arkaplan rengi ekleyebileceğimiz bir parametredir. Genelde kullanmadığımız bir parametredir.

<table> etiketine yukarıda bahsettiğimiz bazı parametreleri ekledik.

Ekran görüntümüzü HTML Preview ile görüntülediğimizde (CTRL + SHIFT + V) aşağıdaki görüntüyü alırız. Tablomuzun biraz daha şık olduğunu görebiliriz.

Sayfanın Responsive olarak çalışmasını görmek için Live Server’da görüntüleyebiliriz.

Tarayıcıda sağ tıklayıp İncele seçeneğini tıklayarak veya F12 tuşuna basarak Console penceresini açabiliriz.

Bu pencereden Google Device Toolbar butonuna tıklayarak web sayfamızın mobil cihazda nasıl göründüğüne bakabiliriz. Bu butona tekrar tekrar bastığımızda normal ekrana geri döneriz.