CSS ile tablo özellikleri

13.04.2017

CSS2 ile birlikte gelen bu özelliklerden birçogumuzun haberi olmayabilir. Ancak bizlere yardimci olacak bu özelliklere göz atmak güzel. Bu özellikleri uygulamamizda en önemli etken tabiki IE’nin bu özelliklerin bir kismini desteklememesidir. Bu tabiki IE’ye puan kaybettiriyor ve Microsoft’da bunun farkina geçte olsa vardigi söyleniyor ve IE8 ile birlikte tam CSS destegini bizlere sunacakmis, tabi o zamana kadar Firefox IE’yi silip süpürmezse :D

table-layout

Yapisi : table-layout: (deger) Aldigi Degerler : auto | fixed | kalitsallik
Baslnagiç degeri: auto
Uygulanabilen elementler: display: table ve display:inline-table olarak belirlenen elementlere
Kalitsallik: Var

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

Normalde tablolar içerigindeki bilgiye göre genisligini arttirir. Bu bize bir esnek kazandirir ancak bazen tablo genisligimizin sabit kalmasini isteriz. table-layout:fixed degeri tablo genisligimizi sabitlememizi saglar. table-layout:auto ise tablo genisligini içerige göre arttirir.

:::html
<!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 örnegi</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 Fiyatlari
  </caption>
  <tr>
    <th>Hizi*(Kbps) </th>
    <th>Kota(GB) </th>
    <th>Baglanti Ücreti** </th>
    <th>Aylik Ü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>
&nbsp;
<table cellpadding="0" cellspacing="0" class="sabit">
  <caption>
  Limitli ADSL Fiyatlari
  </caption>
  <tr>
    <th>Hizi*(Kbps) </th>
    <th>Kota(GB) </th>
    <th>Baglanti Ücreti** </th>
    <th>Aylik Ü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>

caption-side örnegi

Örnegi görmek içintiklayiniz.

caption-side

Yapisi :caption-side: <deger>
Aldigi Degerler :top | bottom | inherit
Baslnagiç degeri:top
Uygulanabilen elementler:display: table-caption olarak belirlenen elementlere
Kalitsallik:Yok

Not: CSS2 ile birlikte left ve right degerleride vardi ancak kullanissizligi nedeni ile CSS2.1’de kaldirildi.

caption-side:Tablonun basliginin(<caption>) nerede(altta mi üstte mi) olacagini belirler.

caption-side örnegi

Örnegi görmek içintiklayiniz.

Bu özelligi IE(ie5+/mac destekliyor) desteklemiyor. Tüm tarayicilarin destekledigi sekilde kod yazmak için <caption> etiketininalignözelligi kullanilmalidir. Örnek:

:::html
<caption align="bottom">
<caption align="top">

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

border-collapse

Yapisi :border-collapse: <deger>
Aldigi Degerler :collapse | separate | kalitsallik
Baslangiç degeri:separate
Uygulanabilen elementler:display:table ve display:table-caption olarak belirlenen elementlere
Kalitsallik:Var

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

border-collapse, tablo hücrelerinin etrafindaki kenarlik ile olan mesafeyi azaltmamizi veya açmamizi saglar.separateatamasi yapilmis ise hücreler arasina bir kaç piksellik mesafe konur, HTML içinden bu bosluklari <table> etiketinin cellspacing özelligi ile kaldirmak istesek bile tarayicilar bu seferde iki kenarligi bir bir üstü gösterecektir. Egercollapsedegeri verilirse iki hücre arasindaki mesafe kalkacaktir ve tek kenarlik görünecektir.

:::html
<!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 örnegi</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>
&nbsp;
<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>

Örnegi görmek içintiklayiniz.

border-collapse örnegi

border-spacing

Yapisi :border-spacing: <deger>
Aldigi Degerler : ? | inherit\\ **Baslangiç degeri:**0\\ **Uygulanabilen elementler:**display:table ve display:table-caption olarak belirlenen elementlere\\ **Kalitsallik:**Var

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

border-spacing, normal uzunluk degerleri alir veborder-collapse:separateile birlikte kullanilir. Eger tek deger verilirse bu tüm kenarlar için geçerlidir, iki deger atanirsa ilki yatayda bosluk için ikincisi dikey de bosluk vermek için tanimlanmistir.

:::html
<!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 örnegi</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>
&nbsp;
<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>

Örnegi görmek içintiklayiniz.

border-spacing örnegi

empty-cells

Yapisi :empty-cells: <deger>
Aldigi Degerler :show | hide | kalitsallik
Baslangiç degeri:show
Uygulanabilen elementler:display:table-cellolarak belirlenen elementlere
Kalitsallik:Var

Tarayici Uyumu ** Firefox Chrome Safari Opera Internet Explorer **Mobil Tarayicilar iOS Safari Opera Mobile Android Browser

Bir tabloya bazi degerler atadigimizda(örnegin kenarlik degeri) bos olan hücreler bu degeri görmez, bu durumu düzeltmek için bos olan hücreler için bos karakter( ) koyariz genel.empty-cellsözelligi ile bos kalan hücrelere nasil davranmasi gerektigini bildirebiliriz. göster(show) degeri ile hücrenin içerigi olan hücreler ile ayni özellikleri almasini saglayabiliriz. gizle(hide) degeri ile de hücrenin yokmus gibi davranmasini saglariz.

Bu özellik Internet Explorer tarafindan desteklenmemektedir.

:::html
<!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 örnegi</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>
&nbsp;
<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>

Örnegi görmek içintiklayiniz.

empty-cells örnegi

kaynak:http://fatihhayrioglu.com



Adınız Soyadınız
İçerik
Son Eklenenler Konular
  • E-Ticaret çalismasi Satis sitesi
  • 2017-2018 Normal Ögretim Konu Anlatim Listesi
  • Asp Net- Veritabani Olusturma ve GridView Ekleme Kayit
  • Asp Net-Master page ile admin paneli
  • Vize 2 Mesleki Yabanci Dil 1
  • Vize 2 için Ag temelleri
  • Vize2 Internet Programciligi I
  • Vize 2 için ödev listesi- Programlamanin Temelleri
  • Programlamanin Temelleri Akis Diyagramlari Örnekleri
  • Bilgisayar Aglari-Ag Temelleri
  • Bilgisayar Mesleki Yabanci Dil Dersi Için Kelimeler 1
  • 2015-2016 Staj Kabul Listesi
  • 2016-2017 Yaz Staji Yapacaklarin Listesi
  • ASP NET ile veritabanindaki alani gösterirken kisaltarak görüntüleme
  • ASP NET - Plesk ile veritabani olusturma ve MS SQL veritabani olusturma islemleri
  • Dreamveaver
  • ASP Net
  • CSS
  • Html
  • Visual Studio C# ve C Console
  • Programlamanin Temelleri-Algoritma
  • Mesleki Yabancı Dil
  • Windows Server 2012
  • Ag Temelleri-Bilgisayar Aglari
  • Staj
  • Copyright (c) Ferdi DOĞAN