Duyuruyu Kapat
Facebook Gözat
Twitter Gözat

Tablo Css de Yapılır

Konu, 'Genel Webmaster Konuları' kısmında alico tarafından paylaşıldı.

  1. alico

    alico Daimi Üye

    Kayıt:
    20 Kasım 2003
    Mesajlar:
    2,064
    Beğenilen Mesajlar:
    2
    Son iki konuya ait cevap içermektedir. (lafı uzatma örneği göster diyenler buraya tıklayın)

    reset.css
    Kod:
    html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, em, img, ins, strong, sub, sup, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
    {
    	margin:0;
    	padding:0;
    	border:0;}
    table		{border-spacing:0;}
    a:hover	{text-decoration:none;}
    a{outline-width:0}
    dd		{display:inline}
    

    grid.css

    Kod:
    
    /*
    burası sayfa örneği için
    */
    body{padding:30px}
    body,a{font:normal 11px arial}
    .case{width:620px}
    
    /*
    	Grid Genel Stil Ayarları
    */
    .grid						{width:100%;}
    * html .grid					{border-collapse:collapse}
    .grid th a					{text-decoration:none; color:#414141}
    .grid th a em,.grid th a:hover	{text-decoration:underline;font-style:normal}
    .grid thead tr					{background:#EAEAEA}
    .grid th,.grid td				{text-align:left;padding:8px 5px;}
    .grid td						{padding:5px;}
    .grid th						{border-left:1px solid white; padding-bottom:5px; border-bottom:3px solid #EAEAEA}
    .grid th:hover				{background-color:#F3F3F3; border-bottom:3px solid #FA6501}
    .grid tbody tr.d				{background:#F7F7F7}
    .grid tbody td					{border-bottom:1px solid #F2F2F2; border-left:1px solid #F2F2F2;}
    .grid tbody tr:hover			{background:#F0FBFF}
    .grid tbody td:hover			{background:#DFF7FF}
    .grid td.f					{background:#F0F0F0; border-bottom:1px solid #E6E6E6;border-top:1px solid #fff;color:#4B4B4B}
    .grid td.f:hover				{background:#F7F7F7!important; color:#D90000!important;}
    .grid th.f,.grid tbody tr td.f	{border-left:0!important}
    
    /*
    	Genislik Olculerini Buradan Özelleştir
    */
    .grid thead th#T1				{width:35px}
    
    
    Html Sayfası
    Kod:
    <!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" />
            <link rel="stylesheet" type="text/css" href="reset.css" />
            <link rel="stylesheet" type="text/css" href="grid.css" />
    		
    	    <title>Css Table Grid - alico - CeViz.NeT</title>
        </head>
        <body>
        	
            
    		<!--
    			GRID TABLE  ORNEK
    		-->
    		
    		<div class="case">
    		
    			<table class="grid">
    				<thead>
    					<tr>
    						<th class="f" id="T1"><a href="#"><em>N</em>o</a></th>
    						<th><a href="#" id="T2"><em>U</em>ser</a></th>
    						<th><a href="#" id="T3"><em>N</em>ame</a></th>
    						<th><a href="#" id="T4"><em>L</em>astName</a></th>
    						<th><a href="#" id="T5"><em>A</em>ctive</a></th>
    					</tr>
    				</thead>
    				<tbody>
    					<tr><td class="f">01</td><td>Alico</td><td>Ali</td><td>Yurttas</td><td>Yes</td></tr>
    					<tr class="d"><td class="f">02</td><td>Hunter</td><td>Ali</td><td>Yurttas</td><td>No</td></tr>
    					<tr><td class="f">03</td><td>Ansugo</td><td>Ali</td><td>Yurttas</td><td>Yes</td></tr>
    					<tr class="d"><td class="f">04</td><td>Sniper</td><td>Ali</td><td>Yurttas</td><td>No</td></tr>
    					<tr><td class="f">05</td><td>Fatihcan</td><td>Ali</td><td>Yurttas</td><td>Yes</td></tr>
    					<tr class="d"><td class="f">06</td><td>Hunter</td><td>Ali</td><td>Yurttas</td><td>No</td></tr>
    					<tr><td class="f">07</td><td>Ansugo</td><td>Ali</td><td>Yurttas</td><td>Yes</td></tr>
    					<tr class="d"><td class="f">08</td><td>Sniper</td><td>Ali</td><td>Yurttas</td><td>No</td></tr>
    					<tr><td class="f">09</td><td>Fatihcan</td><td>Ali</td><td>Yurttas</td><td>Yes</td></tr>
    					<tr class="d"><td class="f">11</td><td>Fatihcan</td><td>Ali</td><td>Yurttas</td><td>Yes</td></tr>
    				</tbody>
    			</table>
    			
    		</div>
    		
    		
        </body>
    </html>
    
    

    Aptal IE6 (A) tagı hariç hiç bir elementin hover özelliğini desteklemediğinden ötürü hover'lar çalışmayacaktır. Ancak bunun için onmousehover ile kastırmaya gerek yok IE6 yı artık desteklediği kadar özellik ile kullanıcıya sununki kullanıcı eksikliği farkedip güncellemesi için bir sebebi olsun!

    Yok yinede yapacam dersen html içine javascript yazmak yerine JQuery ile buda kolayca halledilir hover pozisyonları ie için stil ismi verilir ve toplam tr saydırılıp stil hoverler header üstünde load edilebilir.


    Bu örnek IE6 FF3 ve Safari de denenmiştir. Aşağıdaki eklentiden örneği indirip deneyebilirsiniz. Yada buradan örneğe bakabilirsiniz
     
  2. alico

    alico Daimi Üye

    Kayıt:
    20 Kasım 2003
    Mesajlar:
    2,064
    Beğenilen Mesajlar:
    2
    Açıklama

    Birde son iki örnektir farkettim. Tablo üzerinden açıklanan örneklerden thead, tbody, tfoot kuralları üşenildiği içinmi yoksa bi haber olunulduğu içinmi yazılmıyor ?

    İlgili örnekte css ile özelleştirmeler daha geliştirildiğinde css kurallarında ayırım yapabilmek için bunlar gereklidir.

    Kuralına göre yazalım Kan yapar.
     
  3. James De Souza

    James De Souza Cave Quid Optes

    Kayıt:
    19 Şubat 2008
    Mesajlar:
    2,136
    Beğenilen Mesajlar:
    0
    Meslek:
    Off
    Şehir:
    İzmir
    ben bu örneği indirdim, çalıştırdım çalıştı. kullanmaya karar verdim, dosyaları gömdüm sayfaya, döngüye soktum, son hali id'ler class'lar falan birebir uyuştu ancak örnekteki gibi düzgün çalışmadı. yazı karakterleri ve hover olayı çalışmadı (ie7). sayfaya gömülmüş başka bir css de yok.
    PHP:
    <div class="case">  
       <
    table class="grid">
        <
    thead>
         <
    tr>
          <
    th class="f" id="T1"><a href="#"><em>N</em>o</a></th>
          <
    th><a href="#" id="T2"><em>S</em>ipariş Kodu</a></th>
          <
    th><a href="#" id="T3"><em>T</em>arih</a></th>
          <
    th><a href="#" id="T4"><em>T</em>utarı</a></th>
          <
    th><a href="#" id="T5"><em>D</em>urumu</a></th>
          <
    th><a href="#" id="T5"><em>İ</em>şlem</a></th>
         </
    tr>
        </
    thead>
        <
    tbody>
          <%
    while 
    not rs.eof
       
    if i mod 2 1 then bgc "class=d" else bgc "" end if 
      %>
         <
    tr <%=bgc%>>
          <
    td class="f"><%=i%></td>
          <
    td><%=rs("Hareket_No")%></td>
          <
    td><%=rs("Tarih")%></td>
          <
    td><%=rs("Toplam")%> YTL</td>
          <
    td><span id="durum<%=i%>">
        <%if 
    rs("sil") = "0" then
     dn 
    rs("durum")
     if 
    not IsNumeric(dnthen dn "0"
     
    select case dn
      
    case "1"
       
    response.Write "Tedarik Sürecinde"
      
    case "2"
       
    response.Write "Kargoya Verildi"
      
    case "3"
       
    response.Write "Teslim Edildi"
      
    case else
       
    response.Write "Onay Bekleniyor"
     
    end select
     
    else
      
    response.Write("İptal Edildi!!!")
     
    end if
     %></
    span></td>
          <
    td><form id="s<%=i%>" onSubmit="return sendPost(this.id,'<%=i%>','<%=rs("Hareket_No")%>')" >
     <%if 
    dn "0" and rs("sil") = "0" then%><input name="iptal" id="ib<%=i%>" type="submit" value="İptal Et" onClick="return confirm('Siparişinizi iptal etmek istediğinize eminmisiniz?')" style="width:50px; height:20px; font-size:9px"><%end if%></form></td>
         </
    tr>
      <%
      
    i=i+1
      rs
    .movenext
      wend
     rs
    .close
     set rs 
    nothing
      
    %>
        </
    tbody>
       </
    table>   
      </
    div>
    çok garip geldi.
     
  4. nih@ttr

    nih@ttr Üye

    Kayıt:
    12 Aralık 2007
    Mesajlar:
    66
    Beğenilen Mesajlar:
    0
    Harika olmuş.Teşekkürler.
     
  5. alico

    alico Daimi Üye

    Kayıt:
    20 Kasım 2003
    Mesajlar:
    2,064
    Beğenilen Mesajlar:
    2
    @devill35

    IE6 da hover özelliği çalışmayacaktır ancak IE7'de hover özelliğinin çalışması lazım
     
  6. alico

    alico Daimi Üye

    Kayıt:
    20 Kasım 2003
    Mesajlar:
    2,064
    Beğenilen Mesajlar:
    2
    @devill35

    Ie7'de border açıklık hatası vardı, bunun için IE6 için olan hack kodunu IE7 için'de uygulamak lazım.

    grid.css 10 satır
    Kod:
    *:first-child+html .grid,* html .grid	{border-collapse:collapse}
    
     
  7. alico

    alico Daimi Üye

    Kayıt:
    20 Kasım 2003
    Mesajlar:
    2,064
    Beğenilen Mesajlar:
    2
    Php Döngü Örneği

    Kod:
    <!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" />
            <link rel="stylesheet" type="text/css" href="reset.css" />
            <link rel="stylesheet" type="text/css" href="grid.css" />
    	    <title>Css Table Grid - alico - CeViz.NeT</title>
        </head>
        <body>
        	
            
    		<!--
    			GRID TABLE  ORNEK
    		-->
    		
    		<div class="case">
    		
    			<table class="grid">
    				<thead>
    					<tr>
    						<th class="f" id="T1"><a href="#"><em>N</em>o</a></th>
    						<th><a href="#" id="T2"><em>U</em>ser</a></th>
    						<th><a href="#" id="T3"><em>N</em>ame</a></th>
    						<th><a href="#" id="T4"><em>L</em>astName</a></th>
    						<th><a href="#" id="T5"><em>A</em>ctive</a></th>
    					</tr>
    				</thead>
    				<tbody>
    					<?
    						$c=' class="d"';
    						for($i=0; $i<=9; $i++)
    						{
    							if($c!='') $c=''; else $c=' class="d"';
    							if(strlen($i)==1) $s='0'.$i; else $s=$i;
    							
    							$d.='<tr'.$c.'><td class="f">'.$s.'</td><td>C1-'.$i.'</td><td>C2-'.$i.'</td><td>C3-'.$i.'</td><td>C4-'.$i.'</td></tr>';
    						}
    						echo $d;
    					?>
    				</tbody>
    			</table>
    		</div>
        </body>
    </html>
    

    Php Örneği
    http://www.thealico.com/atolye/code/css_tablo/grid.php
     
  8. deathwish

    deathwish Üye

    Kayıt:
    22 Mart 2008
    Mesajlar:
    209
    Beğenilen Mesajlar:
    0
    Aslına bakılırsa bihaber olmak değil ama özellikle tfoot elementi tüm browserlar tarafından yeterince deskteklenmiyor.Özellikle HTML4- browserlar yanlış yerde gösteriyor.
    Tam olarak emin değilim ama sayfamızda iki adet benzer thead-tfoot gibi elementleri barındıran 2 tablomuz varsa bazı browserlar bu tablolar arasındaki ayırımı yapamıyor.
    Bu arada örnek gayet güzel olmuş elinize sağlık.
     
  9. Virtuozzo

    Virtuozzo Daimi Üye

    Kayıt:
    17 Mart 2007
    Mesajlar:
    678
    Beğenilen Mesajlar:
    0
    Şehir:
    İstanbul
    Hala tablo kullanan var mı ya? :eek:
    Şaşırdım!
     
  10. alico

    alico Daimi Üye

    Kayıt:
    20 Kasım 2003
    Mesajlar:
    2,064
    Beğenilen Mesajlar:
    2
    @Virtuozzo

    Arkadaşım mesele o değil! Yanlış yerden bakıp konuya yorum yazıyorsun

    Grid data listesini table hariç başka bir element ile yapma girişimi ile tablosuz html yapıyorum diyen salak varmı ?

    Eğer varsa bu salaklara sesleniyorum yaptığınız iş semantik kodlama değildir. Anlamlı html kodlaması html elementlerinin amacına uygun yerde kullanılmasıdır.

    Bundan ötürü siz bir css sitesinde detaylı bir grid liste yapısını table yerine başka bir element ile kastırarak yanlış mantık ile hazırlamış çalışmaya hayranlıkla bakıyorsanız bu işin ana temasını anlamamışsınız demektir.


    Örneğin bu yaptığım çalışma tamamen xhmtl css düzeneğinde bir çalışmadır. Ancak bu durum aynı çalışma modelinin şu sayfasındaki irtibat bilgileri adına kullanmış olduğum tabloyu yada buradaki detaylı bir listeyi table yerine başka bir element ile yapmamı gerektirmeceği gibi böyle bir şeye girişmemde son derece yanlış hatalı bir kodlama olacağı kesindir.
     
  11. alico

    alico Daimi Üye

    Kayıt:
    20 Kasım 2003
    Mesajlar:
    2,064
    Beğenilen Mesajlar:
    2