Tablo Css de Yapılır

**alico** · 18-Ağustos-2008 23:40

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

**alico** · 18-Ağustos-2008 23:51

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.

**Emrah Bıçak** · 26-Ağustos-2008 13:14

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 Kodu:

 <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(dn) then 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.

**nih@ttr** · 26-Ağustos-2008 15:28

Harika olmuş.Teşekkürler.

**alico** · 27-Ağustos-2008 11:07

@devill35

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

**alico** · 27-Ağustos-2008 11:48

@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}

**alico** · 27-Ağustos-2008 12:31

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

**deathwish** · 27-Ağustos-2008 12:57

alico Demiş ki:

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.

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.

**Virtuozzo** · 27-Ağustos-2008 22:47

Hala tablo kullanan var mı ya?

Şaşırdım!

**alico** · 28-Ağustos-2008 00:00

@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.