HTML Tablo Oluşturma

Diger html derslerimizin devamı ve 3 cü ayagı olan html ile tablo olusturma yöntemini göstereceğim.

Eger bir dreamweaver kullanıcısıysanız html ile tablo olusturmak için tek tek kod yazmanıza gerek yoktur.Ama Html ögrenmek istiyorsanız html etiketlerinin ne işe yaradıgını bilmenizde fayda vardır.

Html tablolarını olusturarak içine resim , yazı vb şeyler ekleyerek tablonuzu şekillendirebilirsiniz.
Dikkat etmeniz gerek husus , bir web sayfasını sadece html tablolar kullanarak olusturmamanız, Çünki tablolar başka tarayacılarda farklı gözükebilir. Bu da sitenizin statik görünümünü bozar.

tableheaders	tableheaders	tableheaders	tableheaders
2011
2012

html tablolalarını <table > etiketi ile tanımlarız. tabi table etiketini kapatmayı unutmayın </ table>.

Şimdi tablomuzun anaunsur etiketlerini tanımlayalım ve bu etiketlerle nasıl tablo olusturacagınızı cok basit bir sekilde gormus olucaksanız.

• <tr>  etiketi : table row manasına gelir . kaç sıra kullanıcaksınız o kadar tr etıketı kullanmalısınız.Yukarıdan asagı dogru 3 tane tr kullanmıs olduk.

• <th> etiketi : table header anlamına gelir. Tablodada gormus olacagınız gibi tablonuzun başlıkları için kullanabilirsiniz.

• <td> etiketi : table data manasına gelir. Tablo içine girmiş oldugunuz bilgileri gosterır.Tabloda boş gözüken kutucuklar td etiketi içindir.

son olarak tablomuzun html kodlarını eklemek istiyorum ; sizde bu kodları kullanıp veya degıstererek kendınıze daha uygun ve kullanıslı bir hale getirebilirsiniz.

<table align="center" border="3" height="50" style="width: 250px;">

<tbody>
<tr>                

<th scope="col" width="20">tableheaders</th>               

 <th scope="col" width="20">tableheaders</th>                

<th scope="col" width="20">tableheaders</th>  

              

<th scope="col" width="20">tableheaders</th>               

</tr>
<tr>

<th height="22" scope="row">2011</th>                

<td></td>

  <td></td>   

 <td>&nbsp; </td> 

   </tr>
</tbody>              <tbody>
<tr>

<th scope="row">2012</th>           

<td></td>

 <td></td>

<td></td>  

</tr>
</tbody></table>

<table align="center" border="3" height="50" style="width: 250px;">

• align " center " etiketi ortaya hizalama manasına gelir .
• border tablonun çercevesidir. eger border degeini 0 yaparsak tablonun çercevesi gozukmez.
• height ve width : ise tablonun genişligi ve uzunlugu için kullandıgımız etiketlerdir.