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 2965 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 ?>