30
Ekim

Yazan: WEBMASTERYOLCU  |  Kategori: Uygulamalı Html Dersleri  |  Okunma: 21.623 Defa

Merhaba değerli arkadaşlar tablolar sitelerin en çok kullanılan özelliklerinden biri olup tablo kullanmamızın amacı sayfamızdaki resim, yazı, video vs vs içeriğimizi sayfamızın istediğimiz noktasına yerleştirmemizi sağlar tablolara geçmeden önce bir önceki dersimizi hatırlayalım bakmayan arkadaşlarımız açısından.

Bir Önceki Ders: Web Tasarım Dersleri linkler Yazılara ve Resimlere Link Verme Ders 11

TABLOLAR

Tablolar Satır ve sütunların kesiştiği noktalara hücre denir değerli arkadaşlar. Bu hücrelerin her birine ayrı özellikler verebiliriz.

Tablolar yardımı ile sayfamızı satır ve sütunlara bölerek istediğimiz noktaya istediğimiz içeriği rahatça ve güvenle ekleyebiliriz.

Tablo hücreleri soldan sağa, yukardan aşağıya şeklinde oluşturulur. Önce satırlar satırlar oluşturulduktan sonra sütunlar oluşturulur.

<table></table>

Tablo oluşturmak için<table> etiketi kullanılır. Tablo bittikten sonra açmış olduğumuz <table> etiketi </table> etiketi ile mutlaka kapatılmalı ve tablomuzu sayfamızda görebilmek için border vermeliyiz yoksa tablo kenar çizgileri sayfada belirgin olmayacaktır.

<tr></tr>

Yukarda tablonun başlangıcını gördük arkadaşlar ve sadece <table> etiketi yeterli olmadığı için tablomuza satır eklememiz gerekir satır eklemek içinse <tr> etiketinden faydalanacağız. kaç satır oluşturacaksak okadar tr kullanmalıyız. Unutmamanız gereken sadece satırda bir işe yaramaz her satırda en az bir sütun olmak zorundadır onuda aşağıda görelim.

<td></td>

Yukarda tablo ve satır başlangıçlarını gördük arkadaşlar şimdi ise açtığımız satıra gerekli olan sütun oluşturma etiketini göreceğiz sütun oluşturmak için <td> etiketinden faydalanacağız her bir sütun için <td> kullanmalısınız.

Tablo Uygulaması

Tablo yapmak için gerekli işlemleri gördük arkadaşlar gerekenleri şimdi malzemeiz hazır peki ozaman ilk etapta basit bir tablo yapalım açıyoruz not defterimizi ve aşağıdaki kodları yazıp tablo1.html olarak masaüstüne kaydedin.

<html>
<head>
<title>Web Tasarım Dersleri Tablolara Giriş Ders 12</title>
</head>
<body>
<table border=”1″>
<tr>
<td> Tek Hücreli Tablo </td>
</tr>
</table>
</body>
</html>

Örnekte 1 satır 1 sütunluk bir tablo yapacağım.

Html Tablolara Giriş

Html Tablolara Giriş

Evet Arkadaşlar yukardaki örneği özetleyim <table> ile tablomu başlattım <tr> ile satır oluşturdum sadece satır bir işe yaramayacağı için satırın içine en az bir sütun eklemem gerekiyordu onuda <td> Tek Hücreli Tablo</td> ile ekledim tek hücre ekledim ve dedimki sütun bu kadar ve </tr> ile satırımıda kapattım bitti satır tamam sütun tamam ozaman tabloyuda </table> ile kapatttım

2 Satır Tek Sütunluk Tablo Uygulaması

İlk örneğimiz tek satır tek sütundu arkadaşlar bu örnekte ise artık bilgimizi becerimizi geliştiriyoruz ve 2 satır tek sütun olacak yine açıyoruz boş bir not defteri ve alttaki kodları yazıp farklı kaydetten dosya adı tablo2.html olarak masaüstüne kaydedin.

<html>
<head>
<title>Web Tasarım Dersleri Tablolara Giriş Ders 12</title>
</head>
<body>
<table border=”1″>

<tr>
<td> Tablonun 1. Satırı </td>
</tr>

<tr>
<td> Tablonun 2. Satırı </td>
</tr>

</table>
</body>
</html>

Tablo Satır Ekleme

Tablo Satır Ekleme

Hemen özetliyim arkadaşlar2 satır tek sütun demiştik

<tr>
<td> Tablonun 1. Satırı </td>
</tr>

yukardaki kodlarda <tr> satır açar içine <td> Tablonun 1. Satırı </td> ile sütun eklenir biz tek sütun dedik 1 tane ekledik 2 yada daha fazla deseydik <td> Tablonun 1. Satırı </td> bu kısmı istedimiz sütun sayısınca satır içine eklemeliydik

<tr>
<td> Tablonun 1. Satırı </td>
</tr>

Yukardaki kodu 2 defa ekledik çünkü 2 satır istedim 3 satır isteseydim 3 defa eklenecekti.

2 Satır 2 Sütunluk Tablo Uygulaması

Yukardaki örnekler hep tek sütunluktu şimdi ise 2 satır 2 sütun yapalım aşağıdaki kodları yazın arkadaşlar tablo3.html olarak masaüstüne kaydedin.

<html>
<head>
<title>Web Tasarım Dersleri Tablolara Giriş Ders 12</title>
</head>
<body>
<table border=”1″>

<tr>
<td> 1. Satır 1. Sütun </td>
<td> 1. Satır 2. Sütun </td>
</tr>

<tr>
<td> 2. Satır 1. Sütun </td>
<td> 2. Satır 2. Sütun </td>
</tr>

</table>
</body>
</html>

Tablo Sütun Ekleme

Tablo Sütun Ekleme

Evet arkadaşlar bu örnekte ise satır içine 2 sütun ekledik 3 sütun deseydim satır içine 3 tane eklememiz gerekirdi bir sonraki dersimiz pazartesi o güne kadar bol bol uygulama yapın yani ben tekli ve 2li gösterdim diye buna takılmayın 3lü 5 li deneyin görün border değerini artırın görün nasıl olacak .

Tablo derslerimiz 3 yada 4 ders devam edecek arkadaşlar çünkü önemli ve içeriği geniş kapsamlıdır bir sonraki dersimizde Tablolara Arkaplan Rengi ve Arkaplan resmi Eklemeyi Göstereceğim Arkadaşlar Allaha Emanet Olun.

Yazılarım ve derslerim izin almaksıızn yayınlanabilir emeğe saygı için kaynak www.webmasteryolcu.com belirtirseniz sevinirim.



   Paylaş

5 Yorum yapılmış

  • numan
    09 Kasım 2010 | Cevapla

    çok sagol hocam.

  • Dilek
    04 Şubat 2011 | Cevapla

    çok teşekkür ederim hocam,yüreğinize sağlık

  • Recep
    15 Aralık 2011 | Cevapla

    Yapılan Tablo Explorer da Açılıyo Yanlız Chrome da Açılmıyo Sıkıntı Çıkıyo Neden Yapar Böyle Bişeyi Bi Bilginiz Varmı Acaba ?

  • kübraaaa
    03 Ekim 2012 | Cevapla

    yaaaa en az altı sutunluk tablo yokmu

  • Gökay
    22 Mayıs 2014 | Cevapla

    Çok teşekkürler, fevkalade yalın bir anlatım. Tebrik ediyorum, çalışmalarınızın devamını dilerim.

Yorum yapın