Kategoriler: Genel

CSS – Tablo Özellikleri

Daha önce “CSS ile Tabloları şekillendirmek” adlı makalemizde tablo yapılarını gördük ve görünümünü daha güzel nasıl yaparız onun üzerinde durmuştuk. W3C bu durumu göz önünde bulundurarak tablo ve tablo elementlerinin görünümünü düzenlemek için tablo özellikleri ekledi. Tablolar diğer HTML elementlerinden daha farklı kendine has elementlerdir ve farklı özellikleri vardır. Burada CSS2 ile birlikte gelen yeni özellikleri inceleyeceğiz.

CSS2 ile birlikte gelen bu özelliklerden birçoğumuzun haberi olmayabilir. Ancak bizlere yardımcı olacak bu özelliklere göz atmak güzel. Bu özellikleri uygulamamızda en önemli etken tabiki IE’nin bu özelliklerin bir kısmını desteklememesidir. Bu tabiki IE’ye puan kaybettiriyor ve Microsoft’da bunun farkına geçte olsa vardığı söyleniyor ve IE8 ile birlikte tam CSS desteğini bizlere sunacakmış, tabi o zamana kadar Firefox IE’yi silip süpürmezse 😀

table-layout

Yapısı : table-layout: <deger>
Aldığı Değerler : auto | fixed | kalıtsallık
Başlnagıç değeri: auto
Uygulanabilen elementler: display: table ve display:inline-table olarak belirlenen elementlere
Kalıtsallık: Var

Browser Uyumu:Internet Explorer 5.0+
Mozilla 1+
Opera 7.5+
Safari 2+
W3C’s CSS Level 2+
CSS Profile 2.0

Normalde tablolar içeriğindeki bilgiye göre genişliğini arttırır. Bu bize bir esnek kazandırır ancak bazen tablo genişliğimizin sabit kalmasını isteriz. table-layout:fixed değeri tablo genişliğimizi sabitlememizi sağlar. table-layout:auto ise tablo genişliğini içeriğe göre arttırır.

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  5. <title>table-layout örneği</title>
  6. <style>
  7. table.otomatik {table-layout: auto; width: 350px; border-collapse: collapse;}
  8. table.sabit {table-layout: fixed; width: 350px; border-collapse: collapse;}
  9. td, th {border: 1px solid;}
  10. </style>
  11. </head>
  12. <body>
  13. <table cellpadding=”0″ cellspacing=”0″ class=”otomatik”>
  14. <caption>Limitli ADSL Fiyatları</caption>
  15. <tr>
  16. <th>Hızı*(Kbps) </th>
  17. <th>Kota(GB) </th>
  18. <th>Bağlantı Ücreti** </th>
  19. <th>Aylık Ücret </th>
  20. <th>Limitin Üzerindeki Her MB için Ücret*** </th>
  21. </tr>
  22. <tr>
  23. <td>1024/256′e kadar</td>
  24. <td>4</td>
  25. <td rowspan=”3″>29 YTL</td>
  26. <td>29 YTL</td>
  27. <td>0,010 YTL</td>
  28. </tr>
  29. <tr>
  30. <td>1024/256′e kadar</td>
  31. <td>6</td>
  32. <td>39 YTL</td>
  33. <td>0,009 YTL</td>
  34. </tr>
  35. <tr>
  36. <td>2048/512′e kadar</td>
  37. <td>6</td>
  38. <td>49YTL</td>
  39. <td>0,009 YTL</td>
  40. </tr>
  41. </table>
  42. &nbsp;
  43. <table cellpadding=”0″ cellspacing=”0″ class=”sabit”>
  44. <caption>Limitli ADSL Fiyatları</caption>
  45. <tr>
  46. <th>Hızı*(Kbps) </th>
  47. <th>Kota(GB) </th>
  48. <th>Bağlantı Ücreti** </th>
  49. <th>Aylık Ücret </th>
  50. <th>Limitin Üzerindeki Her MB için Ücret*** </th>
  51. </tr>
  52. <tr>
  53. <td>1024/256′e kadar</td>
  54. <td>4</td>
  55. <td rowspan=”3″>29 YTL</td>
  56. <td>29 YTL</td>
  57. <td>0,010 YTL</td>
  58. </tr>
  59. <tr>
  60. <td>1024/256′e kadar</td>
  61. <td>6</td>
  62. <td>39 YTL</td>
  63. <td>0,009 YTL</td>
  64. </tr>
  65. <tr>
  66. <td>2048/512′e kadar</td>
  67. <td>6</td>
  68. <td>49YTL</td>
  69. <td>0,009 YTL</td>
  70. </tr>
  71. </table>
  72. </body>
  73. </html>

Örneği görmek için tıklayınız.

caption-side

Yapısı : caption-side: <deger>
Aldığı Değerler : top | bottom | inherit
Başlnagıç değeri: top
Uygulanabilen elementler: display: table-caption olarak belirlenen elementlere
Kalıtsallık: Yok

Not: CSS2 ile birlikte left ve right değerleride vardı ancak kullanışsızlığı nedeni ile CSS2.1′de kaldırıldı.

caption-side: Tablonun başlığının(<caption>) nerede(altta mı üstte mi) olacağını belirler.

Örneği görmek için tıklayınız.

Bu özelliği IE(ie5+/mac destekliyor) desteklemiyor. Tüm tarayıcıların desteklediği şekilde kod yazmak için <caption> etiketinin align özelliği kullanılmalıdır. Örnek:

  1. <caption align=”bottom”> ve <caption align=”top”>
Browser Uyumu:Internet Explorer desteklemiyor
Mozilla 1.7+
Opera 7.5+
Safari 1.2+
W3C’s CSS Level 2+
CSS Profile 2.1
Bul-Tikla

Yorum Yap
Share
Yazar
Bul-Tikla
15 yıl ago

Son Yazılar

Parodi Nedir? – Türk Dili ve Edebiyatı

Parodi Nedir? Bir metin, başka bir metnin sesini niçin yansılamak eder? Onunla alay etmek, ona…

1 saat ago

Komedi Nedir? – Türk Dili ve Edebiyatı

Güldürü denildiğinde bir çok kişinin aklına yalnızca gülmece, kahkaha gelir. Oysa edebiyatta güldürü, güldürmekten daha…

8 saat ago

Mizah Nedir? Dünya ve Türk Edebiyatında Mizah

Gülmece Nedir? Dünya ve Türk Edebiyatında Gülmece İnsan, kimi vakit değiştiremediği bir gerçeğe güler. Bundan…

14 saat ago

2026 YKS Tercih Rehberi – Türk Dili ve Edebiyatı

Son güncelleme: 22 Temmuz 2026 2026 YKS Tercih Rehberi Mühim: ÖSYM’nin 21 Temmuz’da yayımladığı 2026-YKS…

3 gün ago

Pastoral Senfoni Özeti, Konusu ve Karakterleri

Pastoral Senfoni – Andre GideTür:RomanYazar:Andre GideYayınlanma Zamanı:2009Yayınevi:Timaş YayınlarıISBN:9789752638976KarakterlerPapaz: Eserin anlatıcısıdır. Evli, çocuk sahibi ve toplumda…

5 gün ago

Yavaşla Özeti ve Konusu – Kitap Diyarı

Yavaşla – Kemal SayarTür:PsikolojiYazar:Kemal SayarYayınlanma Zamanı:2018Yayınevi:Kapı YayınlarıISBN: 9789752448377MevzusuYavaşla, çağıl yaşamın insanı sürüklediği hız kültürünü ele…

5 gün ago