Tablo yaratımı ve biçimlendirimi web tasarımının temel elemanlarından birisi halinde. Peki tablo kullanmadan da tablo hissi verdirip aynı işlevi gerçekleştirmek olanaklı mıdır aceba?
İşte basit bir CSS tablo örneği.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> "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>CSS Tablo</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
}
#tablom {
display: table;
border:1px solid #000;
border-spacing: 5px; /* cellspacing için kullanılan değer */
background-color: #CCC;
}
#satir {
display: table-row;
}
#hucre {
display: table-cell;
width:150px;
padding:10px; /* cellpadding için kullanılan değer */
border:1px solid #DDD;
background-color: #FFF;
}
-->
</style>
</head>
<body>
<div id="tablom">
<div id="satir">
<div id="hucre">Test 11</div>
<div id="hucre">Test 12</div>
<div id="hucre">Test 13</div>
</div>
<div id="satir">
<div id="hucre">Test 21</div>
<div id="hucre">Test 22</div>
<div id="hucre">Test 23</div>
</div>
<div id="satir">
<div id="hucre">Test 31</div>
<div id="hucre">Test 32</div>
<div id="hucre">Test 33</div>
</div>
</div>
</body>
</html>
Bence oldukça pratik kullanım alanları olabilecek bir kullanım şekli. Özellikle "hucre" alanlarının farklı tanımlar kullanarak farklı şekilde gösterimi oldukça ilginç olanaklar sunacaktır.
