Ders_18 HTML Tabloları

HTML Tabloları

Aşağıda bir tablo örneği verilmiştir:

NoAdSoyadNot
1MuzafferKAYA94
2PelinAY80
3AdemKIŞ67
4AliYILMAZ50
Basit bir tablo örneğinin html kodu aşağıdaki gibidir:

 <table>
  <tr>
    <td>Muzaffer</td>
    <td>KAYA</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Pelin</td>
    <td>AY</td> 
    <td>80</td>
  </tr>
</table>

 Kod incelenirse şunlar görülecektir:
  • Bir tablo elemanı <table> ve </table> tagları arasında yer alır. 
  • Her bir tablo satırı (yatay sırası) <tr> ve </tr> tagları arasında yer alır.
  • Bir satırlardaki her bir sütun (kolon) <td> ve </td> tagları arasında yer alır.
  • Bir <tr> elemanının, kaç tane <td> yavrusu varsa, o satır, o kadar sütündan (hücreden) oluşuyor demektir.
  • <td> elemanı, bir nevi tablonun hücrelerini temsil eder ve tablo içerikleri bu elemanlarda bulunur. <td> elemanı sadece text içermek zorunda değildir; resim, video, liste ya da yavru bir tablo bile içerebilir.
  • <th> ve </th> tagları başlık oluşturmak  için kullanılır. Örneğin; tablonun en üst satırını bir başlık satırı olarak kullanmak için tercih edilebilir ya da tablonun en soldaki kolonunu... Başlık yapmak isteğiniz hücrede <td> yerine <th> kullanacaksınız. Hepsi bu kadar...
Yukarıdaki tablo kodunu şöyle de düzenleyebilirdik:

 <table>
  <tr>
    <th>Ad</th>
    <th>Soyad</th> 
    <th>Not</th>
  </tr>
  <tr>
    <td>Muzaffer</td>
    <td>KAYA</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Pelin</td>
    <td>AY</td> 
    <td>80</td>
  </tr>
</table>

 Yukarıdaki tablonun çıktısı aşağıdaki gibi olacaktır:
Ad Soyad Not
Muzaffer KAYA 94
Pelin AY 80


Dikkat edilirse; <th> elemanları kalın harflerle ve ortalı yazılmıştır.

HTML Tablolarında border Özelliği

Tablolar, belirtilmediği müddetçe kenarlıksız (çerçevesiz) gösterilecektir.

Bir tabloya kenarlık (çerçeve) eklemek istersek <table> tagının içine bir border özelliği ekleyebiliriz. Örneğe dikkat edelim:

<table border="1" style="width:100%">
  <tr>
    <th>Ad</th>
    <th>Soyad</th> 
    <th>Not</th>
  </tr>
  <tr>
    <td>Muzaffer</td>
    <td>KAYA</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Pelin</td>
    <td>AY</td> 
    <td>80</td>
  </tr>
</table>

Yukarıdaki tablo elemanının başlangıç tagına,

 border="1"

 özelliğini ekleyerek, 1px kalınlığında kenarlıklar eklemiş olduk.

 style="width:100%" 

 kodu ise, tablo genişliğinin, sayfanın yüzde yüzü kadar olmasını sağlayan bir CSS kodudur. Bu tablo, web tarayıcıda şöyle görüntülenecektir:
Ad Soyad Not
Muzaffer KAYA 94
Pelin AY 80


Bir tabloya kenarlık eklemenin en iyi yolu bu değildir. CSS ile kenarlık eklemek daha geçerli bir yoldur. Şunun gibi:

 table, th, td {
    border: 1px solid black;
}

Yukarıda CSS ile, tabloların kenarlıkları, 1px, solid (düz çizgi) ve black (siyah)  olarak ayarlanmıştır.

HTML Tablolarında border-collapse Özelliği

border özelliği verdiğimizde, tabloların çift çizgili kenarlıklara sahip olduğunu farketmişizdir.

Kenarlıklarının tek çizgili olmasını istiyorsak; border-collapse özelliğini kullanmalıyız. Örneğe dikkat edelim:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

Yukarıda CSS ile tabloların kenarlıkları 1px, solid (düz çizgi) ve black (siyah)  olarak ayarlanmış, border-collapse: collapse kodu ile de kenarlık çizgileri, tek çizgi olarak ayarlanmıştır. 

Bu CSS'den sonra, tablomuz şöyle görüntülenecektir:

Ad Soyad Not
Muzaffer KAYA 94
Pelin AY 80

HTML Tablolarında padding Özelliği

Bir tablo hücresindeki içeriğin, o hücrenin kenarlıklarına olan uzaklığını padding özelliği ayarlar.

 padding özelliği kodlanmadığı müddetçe 0 kabul edilir. Yani, hücredeki yazılar, sol kenara yapışık başlar.

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}

Yukarıdaki CSS kodu, tablolardaki başlık (th) ve diğer (td) hücre içeriklerinin, kenarlarlıklarına en fazla 15px yaklaşabileceğini ilan eder (padding: 15px;).

 CSS kullanmadan padding vermek istiyorsak cellpadding özelliğini kullanırız. Aşağıdaki tabloda bunun bir örneği vardır:

 <table cellpadding="15px" border="1px">
  <tr>
    <th>Ad:</th>
    <td>Tarkan</td>
  </tr>
  <tr>
    <th>Telefon:</th>
    <td>555 77 855</td>
  </tr>
</table>

 Yukarıdaki tablo, web tarayıcıda şöyle görünecektir.
Ad:Tarkan
Telefon:555 77 855

HTML Tablolarında text-align Özelliği

Tablo hücrelerindeki içeriğin, hücreye göre hizalanması text-align özelliği ile yapılır. Örneğin:

 table {
    text-align: left;}

 Yukarıdaki CSS kodu, tablo içeriklerinin tümünün, sola dayalı yazılacağını ilan eder.

HTML Tablolarında border-spacing Özelliği

border-spacing özelliği bir tablodaki hücreler arası boşluğu tayin eder.

 table {
    border-spacing: 15px;}

 Yukarıdaki CSS kodu, tabloların hüceler arası boşluğunun 15 pixel olacağını ilan eder. Böyle bir tablo da aşağıdakine benzer:
MuzafferKAYA50
AdemKIŞ94
AliYILMAZ80

 CSS kullanmadan spacing vermek istiyorsak cellspacing özelliğini kullanırız. Aşağıdaki tabloda bunun bir örneği vardır:

 <table cellspacing="5px" border="1px">
  <tr>
    <th>Ad:</th>
    <td>Tarkan</td>
  </tr>
  <tr>
    <th>Telefon:</th>
    <td>555 77 855</td>
  </tr>
</table>

HTML Tablolarında colspan Özelliği

Bir tabloda, aynı satırdaki hücreleri birleştirmek için colspan özelliği kullanılır.

 <td> veya <th> açılış taglarına yerleştirdiğimiz colspan özelliğine verdiğimiz değer kadar satır tek bir hücre olacaktır. 

 Örneğin colspan="2" yazdığmızda iki satır hücresini birleştirdiğimizi ilan ederiz.

 Bu özelliği kullanırken tablomuzun şekline önceden karar vermiş olmak hata yapmımızı engelleyecektir. Aşağıdaki kodlara dikkat edelim:

 <table border="1px slid black" cellpadding="5px" style="width:100%; border-collapse:collapse">
  <tr>
    <th >Ad</th>
    <th colspan="2">Telefon</th> //Burada iki satır hücresi birleşti
  </tr>
  <tr>
    <td>Tarkan</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

Tablonun çıktısı şöyle olacaktır:

AdTelefon
Tarkan555 77 854555 77 855

HTML Tablolarında rowspan Özelliği

Alt alta olan tablo hücrelerini (sütun hücrelerini) birleştirmek için rowspan özelliği kullanılır.

rowspan özelliğinin kullanım şekli tıpkı colspan özelliği gibidir. Örneğe dikkat edelim:

<table border="1px slid black" cellpadding="5px" style="width:100%; border-collapse:collapse">
  <tr>
    <th>Ad:</th>
    <td>Tarkan</td>
  </tr>
  <tr>
    <th rowspan="2">Telefon:</th> //Burada iki sutun hücresi birleşti
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

Yukarıdaki tablonun çıktısı şöyle olacaktır:

Ad:Tarkan
Telefon:555 77 854
555 77 855

HTML Tablolarında <caption> (başlık) Elemanı

<caption> elemanı bir tablonun başlık almasını sağlar. Aşağıdaki örneğe dikkat edelim:

 <table border="1" style="width:100%; border-collapse:collapse">
  <caption>Aylık Tasarruflar</caption>
  <tr>
    <th>Ay</th>
    <th>Tasarruf</th>
  </tr>
  <tr>
    <td>Ocak</td>
    <td>100</td>
  </tr>
  <tr>
    <td>Şubat</td>
    <td>50</td>
  </tr>
</table>

 Yukarıdaki tablo şöyle görünecektir:
Aylık Tasarruflar
AyTasarruf
Ocak100
Şubat50

HTML Her Tablo İçin Özel Stil Belirleme

CSS kullanarak bir tabloyu stillendirmek tercih edilen yol olmalıdır.

CSS her bir tabloyu özel olarak stillendirme imkanı verir.

Tablolara id özelliği eklersek, CSS'te bu id değerini kullanılarak bu tabloyu seçilebilir ve istenilen stili verilebiliriz. Örneğe dikkat edelim:

<table id="t01" border="1">
  <tr>
    <th>Ad</th>
    <th>Soyad</th> 
    <th>Not</th>
  </tr>
  <tr>
    <td>Muzaffer</td>
    <td>KAYA</td> 
    <td>94</td>
  </tr>
</table>

 Yukarıdaki tablonun çıktsı şöyledir:

AdSoyadNot
MuzafferKAYA94

Şimdi bu tabloya CSS uygulamak için table#t01 kodu ile bu tabloyu seçiyoruz ve aşağıdaki CSS kodlarımızı html sayfamıza uygun bir şekilde ekliyoruz:

table#t01 {
    border-collapse: collapse; 
    width: 100%; 
    background-color: #f1f1c1;
}

Bu CSS'den sonra tablomuz şöyle olacaktır:

AdSoyadNot
MuzafferKAYA94

 Aşağıdak iki tablo vardır. Bunlardan birincisi kimliksiz, diğeri ise kimlikli (id="t01") bir tablodur. Kimlikli tabloya CSS uygulayarak şekil vereceğiz. Şimdilik karışık gelebilir fakat CSS derslerinden sonra bu kodlar daha anlaşılır olacaktır:

<!DOCTYPE html>
<html>
<head>
<style>
table {
    width:100%;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
   background-color:#fff;
}
table#t01 th {
    background-color: black;
    color: white;
}
</style>
</head>
<body>

 <table>
  <tr>
    <th>Ad</th>
    <th>Soyad</th>
    <th>Not</th>
  </tr>
  <tr>
    <td>Muzaffer</td>
    <td>KAYA</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Pelin</td>
    <td>AY</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Adem</td>
    <td>YILDIZ</td>
    <td>80</td>
  </tr>
</table>

 <br>

 <table id="t01">
 <tr>
    <th>Ad</th>
    <th>Soyad</th>
    <th>Not</th>
  </tr>
  <tr>
    <td>Muzaffer</td>
    <td>KAYA</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Pelin</td>
    <td>AY</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Adem</td>
    <td>YILDIZ</td>
    <td>80</td>
  </tr>
</table>

 </body>

 </html>

Yukarıdaki tablonun CSS kodlarına dikkat edersek; bazıları, table#t01 seçicisi ile başladığından, bu stiller sadece id="t01" kimliğine sahip tabloyu etkileyen stillerdir.

Yukarıda verilen iki tablonun çıktısı şöyle olacaktır:

AdSoyadNot
MuzafferKAYA50
PelinAY94
AdemYILDIZ80

AdSoyadNot
MuzafferKAYA50
PelinAY94
AdemYILDIZ80

HTML Tablolarında <colgroup> Tagı

  • <colgroup> elemanı, tablo içindeki bir veya daha çok sütunu birçimlendirmek için kullanılır.
  • <colgroup> elemanı, sütunlardaki her bir hücreye ayrı ayrı değil de bütün bir sütuna tek seferde stil uygulamak için kullanılır.
  •  <colgroup> tagı, <table> elemanının yavurusu (child) olmak zorundadır; yani <table> ve </table> taglarının içinde olmalıdır.
  • <colgroup> tagı, <caption> elemanından sonra; <thead>, <tbody>, <tfoot> ve <tr> elemanlarından önce yer almalıdır.
  • Tablodaki kolonlara ayrı ayrı stiller uygulamak için, <colgroup> elemanına <col> yavru (child) elamanı eklemeliyiz.
Aşağıdaki 3 kolonlu bir tablo koduna ve çıktısına dikkat edelim:

<table>
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Başlık</th>
    <th>Fiyat</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>CSS</td>
    <td>$49</td>
  </tr>
</table>

 Yukarıdaki kodda, <col span="2" style="background-color:red"> elemanı; span="2" diyerek, tablonun ilk iki sütununu (kolonunu) seçmiş  ve arkaplan rengini kırmızı (red) ilan etmiştir.

 <col style="background-color:yellow"> elemanı ise, span özelliği belirtilmediği için bir tane kolonun arkplan rengini sarı (yellow) olarak ilan etmiştir ki zaten geriye de bir tane kolan kalmıştı.

  Bu tablonun çıktısı şöyledir:
ISBNTitlePrice
3476896My first HTML$53
5869207My first CSS$49

HTML Tablolarında <thead> <tbody> ve <tfoot> Tagları

  • <thead> elemanı, tablomuzun başlık (head) kısmını ilan etmek için kullanılır.
  • <tbody> elemanı, tablomuzun içerik (body) kısmını ilan etmek için kullanılır.
  • <tfoot> elemanı, tablomuzun bitiş (foot) kısmını yani en alt sırayı ilan etmek için kullanılır.
Bu elemanlar, özellikler birden çok sayfayı kaplayan tablolarda kullanışlıdır. Web tarayıcıları, tabloların başlık ve bitiş kısmını sabit tutup, içerik kısmını kaydırmalı (scrolling) olarak gösterebilmektedirler.

Ayrıca, bu şekilde hazırlanmış ve birden çok sayfayı işgal eden tabloların yazıcıdan çıktısı alınırken, her bir çıktının başında ve sonunda başlık ve bitiş elemanlarının da yazdırılması mümkün olacaktır.

  • <thead> elemanı, en az bir tane <tr> elemanı içermelidir.
  • <thead>, <tbody> ve <tfoot> elemanları, tablolarda varsayılan stilleri değiştirmeyecektir. CSS kullanarak bu elemanlara stil verilebilir.
  • <thead> elemanı; <table> elemanının yavrusudur, <caption> ve  <colgroup> elemanlarından sonra, <tbody>, <tfoot> ve <tr> elemanlarından önce kullanılmalıdır.
Aşağıda örneğe ve çıktısına dikkat edelim:
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}

table, th, td {
    border: 1px solid black; 
    width: 100%;
}
</style>
</head>

<body>

<table>
  <thead>
    <tr>
      <th>Ay</th>
      <th>Tasarruf</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Toplam</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Ocak</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Şubat</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Bu tablonun çıktısı şöyle olacaktır:
AyTasarruf
Toplam$180
Ocak$100
Şubat$80
Gönderen
Etiketler: , , , , , , , , , , , , , , , ,

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)