Here is the table code as standard xhtml;
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
<style type="text/css">
.tableClass
{
text-align: left;
background-color: white;
color: navy;
margin: 0px;
padding: 0px;
border: 0px;
width: 400px;
background: white url(seashell.png) no-repeat right bottom;
}
.tableClass th
{
text-align: left;
text-weight: bold;
font-size: 16px;
}
.tableClass td
{
font-size: 12px;
border-top: 1px solid white;
}
.tableClass td,.tableClass th
{
padding: 12px;
}
.tableRowClass
{
background: url(lightbluedot.png) repeat;
}
.tableRowClass:hover
{
background-image: none;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" class="tableClass">
<tr><th>Employee</th><th>Division</th><th>Suggestions</th></tr>
<tr class="tableRowClass"><td>Stephen C. Cox</td><td>Marketing</td><td>Make discount offers</td></tr>
<tr class="tableRowClass"><td>Josephin Tan</td><td>Advertising</td><td>Give bonuses</td></tr>
<tr class="tableRowClass"><td>Joyce Ming</td><td>Marketing</td><td>New designs</td></tr>
<tr class="tableRowClass"><td>James A. Pentel</td><td>Marketing</td><td>Better Packaging</td></tr>
</table>
</body>
</html>
And here is the code integrated with the php-code you posted:
PHP Code:
<?php
error_reporting(E_ALL & ~E_NOTICE);
require_once('global.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.tableClass
{
text-align: left;
background-color: white;
color: navy;
margin: 0px;
padding: 0px;
border: 0px;
width: 100%;
background: white url(/images/seashell.png) no-repeat right bottom;
}
.tableClass th
{
text-align: left;
text-weight: bold;
font-size: 16px;
}
.tableClass td
{
font-size: 12px;
border-top: 1px solid white;
}
.tableClass td,.tableClass th
{
padding: 12px;
}
.tableRowClass
{
background: url(/images/lightbluedot.png) repeat;
}
.tableRowClass:hover
{
background-image: none;
}
</style>
<title>Untitled</title>
</head>
<body>
<?
date_default_timezone_set('Europe/Dublin');
$time_stamp = time();
$data = mysql_query("SELECT * FROM event WHERE visible=1 AND (calendarid=3 OR calendarid=4) AND dateline_from>=$time_stamp ORDER BY dateline_from ASC") or die(mysql_error());
echo '<table cellspacing="0" cellpadding="0" class="tableClass">';
echo '<tr><th>ID</th><th>Title</th><th>Event Details</th><th>Places</th><th>More Info.</th></tr>';
$i=0;
while($info = mysql_fetch_array( $data ))
{
$i++;
if($i <= 12)
{
echo '<tr class="tableRowClass"><td>'.$info['eventid'].'</td>';
echo '<td>'.$info['title'].'</td>';
echo '<td>'.$info['event'].'</td>';
echo '<td>'.$info['remaining_places'].'</td>';
echo '<td>'.$info['more_info'].'</td></tr>';
}
}
echo "</table>";
?>
</body>
</html>
The table uses two images that i have attached to this post. You need to upload them to http://www.midwiferyonline.co.uk/images/ or change the image file path in the css-code to match where you uploaded the images.
lightbluedot.png
A blue dot 50% transparent, mostly for compatibility as i could have used a partly transparent color instead.
seashell.png
The background image of the table, i just chose a seashell image for the heck of it.
Linear Mode
