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>
<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........................
<table align="center" border="5" cellpadding="10" cellspacing="5" style="width: 100px;">
<tbody>.................</tbody></table>
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>
</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>
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