Yazılım Yazarı Menu

Permalink:

Form Elementlerini Tablo Kullanarak Düzenli Hale Getirmek

Uzun süredir yazmamaktaydım ve yeniden karşınızdayım, bir önceki konumuzda form yapmayı öğrenmeştik ve formun elementlerinden bahsetmiştik.

Sıra geldi yaptığımız form’u düzenli bir şekilde yansıtmak için tablo ve div yapısından faydalanmaya teorik bilgi verecek olursak önce tablo ile div arasında ki farklardan bahsedelim böylece neden sadece tablo veya sadece div değil ikisini birden anlattığımı anlamış olacaksınız.

  • Tablo Yapısı (<table></table>): Eski tarz web sitelerinde tasarım amaçlı kullanılan fakat günümüz tarayıcılarında sıkıntı çıkarttığı için kullanılmayan yapı, gelişmiş projelerde kullanılmamalı ama sadece form bulunan sayfalarda veya tasarımın önemli olmadığı basit sayfalarda kullanılabilir.
  • Div Yapısı(<div></div>): Css kodlarına dayanan bir yapı olmakla birlikte temel görevi tablo yapısıyla benzerdir. Tablo yapısından daha geniş stillendirme olanağı vardır. Diğer divlerle css yardımıyla ortaklaşa çalışabildiğinden tasarım açısından sorun yaratmaz. Gelişmiş projelerde hem tasarım hemde form düzenleri için div yapısı kullanılmalıdır.

Önceki dersimizde form oluşturmasını öğrenmiş ve form oluşturmuştuk bu örnek formlardan birisini önce tablo yapısı sonra div yapısı kullanarak düzenli hâle getirmeyi öğreneceğiz.

Ele alacağımız form;
<form action="orneksayfa.php" method="post">
Kullanıcı Adı: <input type="text" name="kullaniciadi" />
Parola: <input type="password" name="sifre" />
<input type="submit" value="Giriş yap" />
</form>

Bu formun ekran görüntüsü şuan bu şekilde;

  • table: <table></table>taglarıyla tablomuzu açıyoruz, tablodaki satır ve sütunlarla ilgili tüm kodlarımız bu iki tagın içine gelecek.
    • border: <table border=”1″></table>tablonun kenarlık ölçüsünü belirler, genel ayarlamaları yaptıktan sonra görüntü şıklığı için 0 olarak atar ve tabloyu kenarsız bir şekilde tutarız.
  • tbody: <tbody></tbody> tagları satır ve sütunları kapsar.
  • tr: <tr></tr> satır tagıdır, satırlarla ilgili kodlar bu iki tag arasına gelir, her satır için bir kez yazılırlar.
  • th: <th></th>başlık tagıdır sütun atarken ilk başta tr tagı açarız bu taglar bizim ilk satırımızı oluşturur ve içine th tagı ile sütun başlıklarımızı atarız.
    <table border="1">
    <tbody>
    <tr>
    <th>Sütun 1</th>
    <th>Sütun 2</th>
    <th>Sütun 3</th>
    </tr>
    </tbody>
    </table>

    Bu kodun ekran çıktısı şu şekilde;

    Sütun 1Sütun 2Sütun 3
  • td:<td></td>eğer başlık değil, sütunlara ait bilgi gireceksiniz th tagı yerine td tagları kullanılır. Yukarıda ki kodumuzla 1 satır ve 3 sütun oluşturduk şimdi tr tagı ile yeni bir satır açıp, td ler ile sütunlara bilgilerimizi girelim;
    <table border="1">
    <tbody>
    <tr>
    <th>Sütun 1</th>
    <th>Sütun 2</th>
    <th>Sütun 3</th>
    </tr>
    <tr>
    <td>Sütun 1, Satır 2</td>
    <td>Sütun 2, Satır 2</td>
    <td>Sütun 3, Satır 2</td>
    </tr>
    </tbody>
    </table>

    Ekran çıktısı şu şekilde olacaktır;

    Sütun 1Sütun 2Sütun 3
    Sütun 1, Satır 2Sütun 2, Satır 2Sütun 3, Satır 2

    <table border="1">
    <tbody>
    <tr>
    <th>Sütun 1</th>
    <th>Sütun 2</th>
    <th>Sütun 3</th>
    </tr>
    <tr>
    <td>Sütun 1, Satır 2</td>
    <td>Sütun 2, Satır 2</td>
    <td>Sütun 3, Satır 2</td>
    </tr>
    <tr>
    <td>Sütun 1, Satır 3</td>
    <td>Sütun 2, Satır 3</td>
    <td>Sütun 3, Satır 3</td>
    </tr>
    </tbody>
    </table>

    Sütun 1Sütun 2Sütun 3
    Sütun 1, Satır 2Sütun 2, Satır 2Sütun 3, Satır 2
    Sütun 1, Satır 3Sütun 2, Satır 3Sütun 3, Satır 3

Şimdi ilk baştaki formumuzu oluşturduğumuz bir tablonun içine alalım.
Tablomuzun ilk sütununda alanlarımızın adları yani; “Kullanıcı Adı” ve “Şifre” yazılarını içerecek,
Tablomuzun ikinci sütunu ” : ” işaretini ve üçüncü sütunuda form alanlarımızı içerecek.
Form taglarımızı tablo taglarından önce açmamız ve form tagları arasına tablo taglarımızı açmamız gerekecek.
<form action="ornekkod.html" method="post">
<table border="1">
<tbody>
<tr>
<td>Kullanıcı Adı</td>
<td>:</td>
<td>Form</td>
</tr>
<tr>
<td>Şifre</td>
<td>:</td>
<td>Form</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Submit</td>
</tr>
</tbody>
</table>
</form>

Ekran çıktımıza bakalım;

Kullanıcı Adı:Form
Şifre:Form
Submit

Bu ekran çıktımızda görebileceğimiz birşey Submit butonumuzun geleceği kısmın solunda bir sütunun boş olduğu tablolarda bu tarz boş yerler için sütunu boş bırakmaktansa 1 sütunla birleştirmek daha iyi bir görünüm elde etmemizi sağlar.

  • colspan:İki hücreyi birleştirmeye yarar. Kullanımı;
    <table border="1">
    <tr>
    <td colspan="2">Bu hücre 2 hücrenin birleşmiş hâlidir. </td>
    <td>Bu tek hücredir.</td>
    </tr>
    <tr>
    <td>Hücre 1</td>
    <td>Hücre 2</td>
    <td>Hücre 3</td>
    </tr>
    </table>

    Ekran görüntümüz;

    Bu hücre 2 hücrenin birleşmiş hâlidir.Bu tek hücredir.
    Hücre 1Hücre 2Hücre 3

Colspan kullanımınıda gördükten sonra şimdi oluşturduğumuz tablolu formda submit tagından önce gelen td ye colspan 2 atayarak fazla sütundan kurtaralım.
<form action="ornekkod.html" method="post">
<table border="1">
<tbody>
<tr>
<td>Kullanıcı Adı</td>
<td>:</td>
<td>Form</td>
</tr>
<tr>
<td>Şifre</td>
<td>:</td>
<td>Form</td>
</tr>
<tr>
<td colspan="2"></td>
<td>Submit</td>
</tr>
</tbody>
</table>
</form>

Ekran çıktımız;

Kullanıcı Adı:Form
Şifre:Form
Submit

İlk ekran çıktımızla arasındaki farka baktığımız zaman submitin yanında boş halde olan 2 gereksiz sütunu birleştirerek daha iyi bir görünüm elde etmiş olduk. Şimdi ilgili yerlere formumuzdaki inputları yerleştirdiğimiz zaman bir formu tablo ile düzenli bir yapıya sokmuş olacağız, başta size sıkıcı gelmiş olabilen bu işlemi bir kez yaptıktan sonra alışacaksınız ve aslında sadece öğrenme aşamasının biraz sancılı olduğunu kullanımının basit olduğunu göreceksiniz.
<form action="orneksayfa.php" method="post">
<table border="1">
<tbody>
<tr>
<td>Kullanıcı Adı</td>
<td>:</td>
<td><input type="text" name="kullaniciadi" /></td>
</tr>
<tr>
<td>Şifre</td>
<td>:</td>
<td><input type="password" name="sifre" /></td>
</tr>
<tr>
<td colspan="2"></td>
<td><input type="submit" value="Giriş yap" /> </td>
</tr>
</tbody>
</table>
</form>

Kullanıcı Adı:
Şifre:

Gördüğünüz gibi formumuz daha düzenli bir hale geldi, bu aşamadan sonra border değerimizi de 0 yaparak görüntünün daha iyi görünmesini sağlayabilirsiniz.
Bir sonraki dersimiz dersimizde “div tagı” kullanarak formumuzu düzene koyacağız.

Umarım faydalı bir yazı olmuştur, yorumlarınızı esirgemeyin.
İyi günler dilerim, Yazılım Yazarı

(2438) kez okundu.

    • Mert ÖZGÜN

      Tebrik ederim çok güzel özetlemişsiniz.Blogunuzu takipteyim yeni yazılarınız bekliyorum :)

      • Yazılım Yazarı

        Çok teşekkürler :) Yararlı olabildiysem ne mutlu.

    • Yorum bırakıyor olduğunuz için teşekkürler.