pure CSS table / source
everybody hates tables,
well - sometimes you can't display data without them...
but you can use the css table,
it even grows when the user adjusts the font size.
pure_css_table.php - the script to generate the CSS table
see demonstration of pure_css_table.php | download pure_css_table.php | downloaded 808 times | last changed 24.11.2004 01:01
01 <?php
02
03 // let's produce some data ...
04 for($i = 0; $i < 10; $i++)
05 {
06 $data[] = range(1,10);
07 }
08
09 echo '<?xml version="1.0" encoding="iso-8859-1"'.chr(63).'>
10 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
11 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
12 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
13 <head>
14 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
15 <title>lixlpixel CSS table</title>
16 <style type="text/css">
17 /* reset everything first */
18 * {
19 margin: 0;
20 padding: 0;
21 }
22 /* whatever */
23 body {
24 font: 0.8em Helvetica, Verdana, sans-serif;
25 text-align: center;
26 padding: 1em 0;
27 }
28 /* here is our table */
29 #table {
30 margin: auto;
31 width: 81em;
32 text-align: left;
33 border-top: 1px solid #CCC;
34 }
35 #table ul {
36 list-style: none;
37 clear: both;
38 height: 4.4em;
39 border-bottom: 1px solid #CCC;
40 border-right: 1px solid #CCC;
41 }
42 #table ul li {
43 float: left;
44 height: 4em;
45 border-left: 1px solid #CCC;
46 width: 7em;
47 padding: 0.2em 0.5em;
48 }
49 #table ul.header {
50 height: 3.1em;
51 background: #EEE;
52 }
53 #table ul.header li {
54 height: 2em;
55 text-align: center;
56 font-weight: bold;
57 font-size: 1em;
58 padding-top: 1em;
59 padding-bottom: 0;
60 }
61 ul:hover {
62 background: #DCE9F4;
63 }
64 ul.color {
65 background: #F9F9F9;
66 }
67 ul.color:hover {
68 background: #BAD4EB;
69 }
70 </style>
71 <script type="text/javascript">
72 /*<![CDATA[*/
73 <!--
74 function color(v)
75 {
76 if(document.getElementsByTagName)
77 {
78 var nodes = document.getElementsByTagName(\'li\')
79 var max = nodes.length
80 for(var i = 0;i < max;i++)
81 {
82 var nodeObj = nodes.item(i);
83 var attrMax = nodeObj.attributes.length
84 for(var j = 0; j < attrMax; j++)
85 {
86 if(nodeObj.attributes.item(j).nodeName == \'class\')
87 {
88 if(nodeObj.attributes.item(j).nodeValue == v)
89 {
90 if(v.substring(4, v.length) % 2 == 1) nodeObj.style.background = \'#DCE9F4\';
91 else nodeObj.style.background = \'#BAD4EB\';
92 }else{
93 nodeObj.style.background = \'transparent\';
94 }
95 }
96 }
97 }
98 }
99 }
100 //-->
101 /*]]>*/
102 </script>
103 </head>
104 <body>
105 <div id="table" onmouseout="color(\'\')">';
106
107 // the column headers
108 echo '
109 <ul class="header">';
110 for($z = 0; $z < count($data[0]); $z++)
111 {
112 echo '
113 <li onmouseover="color(\'col_'.($z+1).'\')">
114 header '.($z+1).'
115 </li>';
116 }
117 echo '
118 </ul>';
119
120 // going down
121 for($i = 0; $i < count($data); $i++)
122 {
123 // each list as row
124 echo '
125 <ul'.($i % 2 == 1 ? ' class="color"' : '').'>';
126
127 // going left
128 for($x = 0; $x < count($data[$i]); $x++)
129 {
130 // each list item as cell
131 echo '
132 <li class="col_'.($x+1).'" onmouseover="color(\'col_'.($x+1).'\')">'.($i+1).' / '.($x+1).(rand(0,10) == 3 ? '<br />
133 some random text' : '').'</li>'; // fill with "real" content
134 }
135 echo '
136 </ul>';
137 }
138
139 echo '
140 </div>
141 </body>
142 </html>';
143
144 ?>
