Html Tables - Tablolar

table etiketini kullanarak ornek bir tablo yapalim,ve konuyu ornek uzerinden anlatalim. Bu ders dahil bazi derslerde yeni konuyu ogrenmekle birlikte html/css konusunda kendimizi gelistiriyoruz,bu nedenle yeni arkadaslar lutfen her dersi okuyun/inceleyin/uygulayin


<table style="width:100%;" border="1">
<tr>
    <th>Ders Adi</th>
    <th>Vize-1</th>
    <th>Vize-2</th>
    <th>Final</th>
</tr>
  <tr>
    <td>Matematik</td>
    <td>36</td>
    <td>55</td>
    <td>92</td>
  </tr>

  <tr>
    <td>Fizik</td>
    <td>09</td>
    <td>12</td>
    <td>25</td>
  </tr>

  <tr>
    <td>Kimya</td>
    <td>86</td>
    <td>87</td>
    <td>90</td>
  </tr>
  <tr>
    <td>Beden Egitimi</td>
    <td>99</td>
    <td>98</td>
    <td>97</td>
  </tr>
</table>
Yukardaki kodun ekran goruntusu ise asagdaki gibi (sizde biraz daha farkli olabiliri,benim css ayarlarimdan dolayi)
Ders Adi Vize-1 Vize-2 Final
Matematik 36 55 92
Fizik 09 12 25
Kimya 86 87 90
Beden Egitimi 99 98 97


style="width:100%;"
degeri tablonun maximum genislikte gorunmesi icin yazildi,bu kismi silerek etkiyi gorebilirsiniz, tablo icerige gore boyut alacaktir.

border="1"
degeri tablo satir/sutun durumlarini gormek icin yazildi,bu kismi silerek/degistirerek etkiyi gorebilirsiniz.

Tabloya satir eklemek icin tr etiketini,satir icine bir hucre eklemek icin td etiketini kullandigimizi gordunuz mu?

Bu arada istersek tablomuzun sutunlari icin isim belirleyebiliriz(ornekteki gibi,Ders Adi,Vize-1,Vize-2,Final) Baslik alanlarini td ile degil de th ile olusturduk gordunuz mu?

td etiketlerinin icerigi text olmak zorunda degil,resim video,link,baska bir tablo vs olabilir.
Klasik html tablo gorunum pek hos degil simdi css ile tablomuzu biraz guzellestirelim.

Html Table-Css Kullanimi / Border,border-collapse,padding

Yukardaki koda eklenen css degerleri
table,th,td{

/*Asagdaki degerleri tek tek silerek sonucu tarayicida goruntuleyin bu sekilde etkiyi daha net gorebilirsiniz*/
border:1px solid rgba(255,0,0,.2);
border-collapse: collapse;

/*bu kullanim biciminde ilk deger ust-alt icin,ikinci deger sag-sol icin padding degeridir*/
padding:4px 8px;
}
th{
  background-color: rgba(200, 0,0, 0.2);
}
Ders Adi Vize-1 Vize-2 Final
Matematik 36 55 92
Fizik 09 12 25
Kimya 86 87 90
Beden Egitimi 99 98 97

Html Table / Text-Align,Border-Spacing

Yeni CSS degerleri asagdaki gibi (Fakat bu defa css bilgileri karismasin diyerek tabloma id degeri verdim cunku table veya tr,td,th seklindeki kullanimlar sayfadaki tum degerleri etkiler)
<table id="yenitablo" style="width:100%">
...
</table>
#yenitablo,#yenitablo th,#yenitablo td{
border:1px solid rgba(255,0,0,.2) !important;
text-align: center;
}

#yenitablo{
  border-spacing: 12px;
}
Ders Adi Vize-1 Vize-2 Final
Matematik 36 55 92
Fizik 09 12 25
Kimya 86 87 90
Beden Egitimi 99 98 97
Hucreler neden birbirinden uzaklasti!

Html Table / colspan,caption

2016-2017 DONEMI 9-C SINIFI
Ders Adi Sinav Sonuclari
Matematik 36 55 92
Fizik 09 12 25
Kimya 86 87 90
Beden Egitimi 99 98 97
Bu ornekte sadece colspan ve caption kullanimini gostermek istedim caption sanirim oldukca acik tablo basligi.
Stil Kodlari
#tabloson,#tabloson td,#tabloson th{
  border:1px solid rgba(0,0,0,.2) !important;
  padding: 5px !important;
}
#tabloson{
  width: 100%;
  border-collapse: collapse !important;
}
<table style="width:100%;" id="tabloson">
  <caption>2016-2017 DONEMI 9-C SINIFI</caption>
<tr>
    <th>Ders Adi</th>
    <th colspan="3">Sinav Sonuclari</th>
</tr>
...
kodu bu sekilde degistirerek Vize1,Vize-2,Final alanlari yerine sadece Sinav Sonuclari yazdim toplamda yine 4 hucre olduguna dikkat!

Html Table /rowspan

Matematik 36 55 92 ogrenci resmi
Fizik 09 12 25
Kimya 86 87 90
Beden Egitimi 99 98 97
<tr>
  <td>Matematik</td>
  <td>36</td>
  <td>55</td>
  <td>92</td>
  <td rowspan="4">
    <img src="img/ogrenci.jpg" alt="ogrenci resmi" title="Ogrenci">
  </td>
</tr>
Yani dikeyde 4 satirlik alan kaplar.
colspan,rowspan ... vs degerleri degistirerek etkiyi gormek(bazen duzeni bozmak) ogrnemke icin iyi bir yontemdir.

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com