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 :D
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
Internet Explorer 5.0+
Firefox 1+
Opera 9.2+
Safari 1.3+
Chrome 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table-layout örneği</title>
<style>
table.otomatik {table-layout: auto; width: 350px; border-collapse: collapse;}
table.sabit {table-layout: fixed; width: 350px; border-collapse: collapse;}
td, th {border: 1px solid;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" class="otomatik">
<caption>
Limitli ADSL Fiyatları
</caption>
<tr>
<th>Hızı*(Kbps) </th>
<th>Kota(GB) </th>
<th>Bağlantı Ücreti** </th>
<th>Aylık Ücret </th>
<th>Limitin Üzerindeki Her MB için Ücret*** </th>
</tr>
<tr>
<td>1024/256'e kadar</td>
<td>4</td>
<td rowspan="3">29 YTL</td>
<td>29 YTL</td>
<td>0,010 YTL</td>
</tr>
<tr>
<td>1024/256'e kadar</td>
<td>6</td>
<td>39 YTL</td>
<td>0,009 YTL</td>
</tr>
<tr>
<td>2048/512'e kadar</td>
<td>6</td>
<td>49YTL</td>
<td>0,009 YTL</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="sabit">
<caption>
Limitli ADSL Fiyatları
</caption>
<tr>
<th>Hızı*(Kbps) </th>
<th>Kota(GB) </th>
<th>Bağlantı Ücreti** </th>
<th>Aylık Ücret </th>
<th>Limitin Üzerindeki Her MB için Ücret*** </th>
</tr>
<tr>
<td>1024/256'e kadar</td>
<td>4</td>
<td rowspan="3">29 YTL</td>
<td>29 YTL</td>
<td>0,010 YTL</td>
</tr>
<tr>
<td>1024/256'e kadar</td>
<td>6</td>
<td>39 YTL</td>
<td>0,009 YTL</td>
</tr>
<tr>
<td>2048/512'e kadar</td>
<td>6</td>
<td>49YTL</td>
<td>0,009 YTL</td>
</tr>
</table>
</body>
</html>
Örneği görmek içintı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çintı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> etiketininalignözelliği kullanılmalıdır. Örnek:
<caption align="bottom"> ve <caption align="top">
Internet Explorer 8+
Firefox 1+
Opera 9.2+
Safari 1.3+
Chrome 2+
W3C’s CSS Level 2+
CSS Profile 2.1
border-collapse
Yapısı :border-collapse: <deger>
Aldığı Değerler :collapse | separate | kalıtsallık
Başlangıç değeri:separate
Uygulanabilen elementler:display:table ve display:table-caption olarak belirlenen elementlere
Kalıtsallık:Var
Internet Explorer 5.5+
Firefox 1+
Opera 9.2+
Safari 1.3+
Chrome 2+
W3C’s CSS Level 2+
CSS Profile 2.0
border-collapse, tablo hücrelerinin etrafındaki kenarlık ile olan mesafeyi azaltmamızı veya açmamızı sağlar.separateataması yapılmış ise hücreler arasına bir kaç piksellik mesafe konur, HTML içinden bu boşlukları <table> etiketinin cellspacing özelliği ile kaldırmak istesek bile tarayıcılar bu seferde iki kenarlığı bir bir üstü gösterecektir. Eğercollapsedeğeri verilirse iki hücre arasındaki mesafe kalkacaktır ve tek kenarlık görünecektir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border-collapse örneği</title>
<style>
table.ayri { border-collapse: separate; }
table.birlesik { border-collapse: collapse; }
td { border: 1px solid black; padding: 3px; }
</style>
</head>
<body>
<table cellspacing="0" class="ayri">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>
<table border="0" cellspacing="0" class="birlesik">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>
</body>
</html>
Örneği görmek içintıklayınız.
border-spacing
Yapısı :border-spacing: <deger>
Aldığı Değerler :<uzunluk> <uzunluk>? | inherit
Başlangıç değeri:0
Uygulanabilen elementler:display:table ve display:table-caption olarak belirlenen elementlere
Kalıtsallık:Var
Internet Explorer 8+
Firefox 1+
Opera 9.2+
Safari 1.3+
Chrome 2+
W3C’s CSS Level 2+
CSS Profile 2.0
border-spacing, normal uzunluk değerleri alır veborder-collapse:separateile birlikte kullanılır. Eğer tek değer verilirse bu tüm kenarlar için geçerlidir, iki değer atanırsa ilki yatayda boşluk için ikincisi dikey de boşluk vermek için tanımlanmıştır.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>border-spacing örneği</title>
<style>
table.ayri { border-collapse: separate; border-spacing: 3px 5px; }
table.birlesik { border-collapse: separate; }
td { border: 1px solid black; padding: 3px; }
</style>
</head>
<body>
<table cellspacing="0" class="ayri">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>
<table border="0" cellspacing="0" class="birlesik">
<tr>
<td>hücre1</td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>
</body>
</html>
Örneği görmek içintıklayınız.
empty-cells
Yapısı :empty-cells: <deger>
Aldığı Değerler :show | hide | kalıtsallık
Başlangıç değeri:show
Uygulanabilen elementler:display:table-cellolarak belirlenen elementlere
Kalıtsallık:Var
Internet Explorer 8+
Firefox 1+
Opera 9.2+
Safari 1.3+
Chrome 2+
W3C’s CSS Level 2+
CSS Profile 2.0
Bir tabloya bazı değerler atadığımızda(örneğin kenarlık değeri) boş olan hücreler bu değeri görmez, bu durumu düzeltmek için boş olan hücreler için boş karakter( ) koyarız genel.empty-cellsözelliği ile boş kalan hücrelere nasıl davranması gerektiğini bildirebiliriz. göster(show) değeri ile hücrenin içeriği olan hücreler ile aynı özellikleri almasını sağlayabiliriz. gizle(hide) değeri ile de hücrenin yokmuş gibi davranmasını sağlarız.
Bu özellik Internet Explorer tarafından desteklenmemektedir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>empty-cells örneği</title>
<style>
table.goster { empty-cells:show }
table.gizle { empty-cells:hide }
td { border: 1px solid black; padding: 3px; }
</style>
</head>
<body>
<table cellspacing="0" class="goster">
<tr>
<td></td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>
<table border="0" cellspacing="0" class="gizle">
<tr>
<td></td>
<td>hücre2</td>
</tr>
<tr>
<td>hücre3</td>
<td>hücre4</td>
</tr>
</table>
</body>
</html>
Örneği görmek içintıklayınız.
güzel bir makale olmuş teşekkürler
hocam tmm ozur dilerim,konuyla alakasız oldu…ben sizin verdiginiz bu table oto ve table sabiti denedim ama ne otomatik ne de sabit aradıgımız ozellikleri karşılamıyor hocam…
otomatik tablo bilgi icerigi ne kadar fazlaysa o kadar fazlalasıyor table genisligi…sabitte ise tablo otomatik kalıyor ama bilgi diger tablolara sıçrıyor.
hocam css ne kadar zormuş…
en zoru olan php yi öğrenebildim…şu css yi bir kavrıyamadım.
Alicim, konuyla alakalı olmayan yazıları bana yazın kısmına yzarsak bilgi karmaşasını önlemiş oluruz.
Cevaba gelince dw yaptığı bir şablonda böyle bir sorun çıkmaması lazım. DW hazırladığı tüm şablonları bunları göze alarak hazırladığını kanısındayım. Yine de bir link veya örnek sayfa varsa görebilirsem daha çok yardımcı olabilirm
hocam dreamweaver da ki şablonlardan birini kullanıyorum…halo left ismi…gayet güzel kendime göre şekil verdim şablona…ama bir sorunum var ben onun problem cıkaracagından korkuyorum…firefox da cok güzel cıkmasına ragmen explorer da kötü çıkıyor şablon…ve genel de de explorer kullanan çok olduğu için,site ne kadar içerik taşısa da,görünümden dolayı kaybedeceğimi düşünüyorum…bunu nasıl giderebiliriz.
hocam admin panelin linkini vermisim ozur dilerim
http://uploaded.to/?id=z0gcwk
bu link hocam gerci digerinde de var ama olsun
tekrar tesekkurler
hocam link
http://uploaded.to/?id=z0gcwkdstee4kostyjww20oxjzb9gmjq
bu
bir bakıverseniz hocam…cok iyi olur
bir yapamadım gitti.cok sagolun hocam
Alicim mevcut kod ile bu soruna cevap vermem zor. Sayfanın bir linki veya örneği görebileceğim bir yer varmı ?
hocam benim tablolarım kayıyor…css ile tablosuz bir anasayfa iskeleti olusturdum ama orta bölüme forum yaptıgımda sag alan forum ne kadar uzunsa o derece asagı dogru kayıyor…
sağ css soyle
#ana #orta #sag {
float: right; /* Sağa hizala */
width: 187px;
height: 800px; /* Bu alana değer vermeyebilirsiniz, yazılarınızı girdikte alan otomatik uzayacaktır. */
border: 1px solid #888;
background: #eee;
}
ne yapmam gerekiyor
yardım edebilir misiniz
üzgünüm ama uygulanmıyor.
hocam table-layout özellliğini toblonunkendisinde değilde td, th tagında kullanabilirmiyiz ?