13 Mayıs 2016 Cuma

tablo oluşturmak örnek anlatım

SINIFI OKUL NO DERS ADI 1.SINAV 2.SINAV 3.SINAV ORTALAMA


 Arkadaşlar bugün size yukarıdaki tabloyu nasıl oluşturacağımıza anlatacağım...ilk yapmamız gereken aşağıdaki kodu yazmak...

<table align="center" border="5" cellpadding="10" cellspacing="5" style="width: 100px;">
  <tbody>.................</tbody></table>

yukarıdaki kodu yazdığımızda karşımıza tablomuzun tek bir kutucuğu çıkacak
sınıfı adını verelim.Yukarıdaki <tbody>..........</body> kodunun arasına aşağıdaki <tr>.ile başlayan </tr> ile biten kodu yazalım....

<table align="center" border="20" cellpadding="10" cellspacing="5" style="width: 100px;">
  <tbody>
<tr>
    <td align="center"><strong>SINIFI</strong></td>
    
  </tr>
</tbody></table>
    Kırmızı olan kodu yazınca karşımıza sınıfı yazılı kare çıkar..Daha sonra sağ tarafa doğru devam eden sınıfı,okul no,ders adı,1. sınav,2.sınav,3.sınav,ortalama kutucuklarını yan yana yazalım.....

<table align="center" border="20" cellpadding="10" cellspacing="5" style="width: 100px;">
  <tbody>
<tr>
   <td align="center"><strong>SINIFI</strong></td>               
    <td align="center"><strong>OKUL NO</strong></td>
    <td align="center"><strong>DERS ADI</strong></td>
    <td align="center"><strong>1.SINAV</strong></td>
    <td align="center"><strong>2.SINAV</strong></td>
    <td align="center"><strong>3.SINAV</strong></td>
    <td align="center"><strong>ORTALAMA</strong></td>
</tr>
</tbody></table>
      yukardaki kodları yazınca karşımıza yandaki  gibi sütun ortaya çıkacaktır..

 Sıra geldi satırları oluşturmakta.Satırları oluşturmak için yapmamız gereken tekrar yukardaki kodların altına <tr> ile başlayan </tr> ile biten aşağıdaki kodu yazalım
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>

  </tr>

yukarıdaki kodu birde html kodları arasına yazılışına bakalım....

<table align="center" border="10" cellpadding="7" cellspacing="2" style="width: 100px;">
  <tbody>
<tr>
    <td align="center"><strong>SINIFI</strong></td>
    <td align="center"><strong>OKUL NO</strong></td>
    <td align="center"><strong>DERS ADI</strong></td>
    <td align="center"><strong>1.SINAV</strong></td>
    <td align="center"><strong>2.SINAV</strong></td>
    <td align="center"><strong>3.SINAV</strong></td>
    <td align="center"><strong>ORTALAMA</strong></td>
  </tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>

  </tr>
</tbody></table>
   Yukarıda  birinci satırı oluşturduk..sıra geldi ihtiyacımız kadar satırı çoğatmaya ,,Bunu yapabilmek için yukarıdaki kırmızı kodları alt alta <tr> ile başlayan </tr> ile biten kısmı alt alta kopyalamalıyız veya tekrar yazmalıyız..


<table align="center" border="10" cellpadding="7" cellspacing="2" style="width: 100px;">
  <tbody>
<tr>
    <td align="center"><strong>SINIFI</strong></td>
    <td align="center"><strong>OKUL NO</strong></td>
    <td align="center"><strong>DERS ADI</strong></td>
    <td align="center"><strong>1.SINAV</strong></td>
    <td align="center"><strong>2.SINAV</strong></td>
    <td align="center"><strong>3.SINAV</strong></td>
    <td align="center"><strong>ORTALAMA</strong></td>
  </tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>

  </tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>

  </tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>

  </tr>
<tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>

  </tr>
</tbody></table>
ben örnek olarak dört satır oluşturdum sizde istediğiniz kadar satır oluştura bilirsiniz....




.....................TABLO ÜZERİNDE OYNAMA YAPACAĞIMIZ YERLER........................


  • border="5"        =beş kısmını değiştire biliriz .Tablomuzn dış kenar kalınlığını değişmesini sağlar..
  • cellpadding="2" =Tablomuz daki satırların büyüklüklerini ayarlamamıza  yardımcı olan kodtur.
  • cellspacing="10"=Tablomuz daki satır ve sütunlar arasındaki boşlukları düzenlememize yardımcı olur..
  • "width: 100px;"  =Tablomuzun dikey olarak uzunluğunu ayarlamamıza yardımcı olur....

  • <td align="center"><strong>SINIFI</strong></td> = Bu kodtaki SINIFI adın yerine istediğiniz adı yazabilirsiniz..
  •  <td>.......</td>  =Noktalı olan kısımlara ihtiyaca göre bilgi yazılabilir..








Hiç yorum yok:

Yorum Gönder