My Table looks old and dated.

Midwifery Online · Share | #1 (**permalink**) 04-14-2012, 07:05 AM

I have a table on the front of my website which shows a few upcoming study days that we are holding.

I pull this table onto my homepage via an i-frame.

The thing is it looks crap and sticks out like a sore thumb compared to the rest of the website.

I have tried editing the file before but just end up with errors.

I would LOVE to be able to have three boxes like this - http://www.splintered.co.uk/experime...e_not_a_table/

which lists the data each study day in its own box than what I currently have.

I have no idea how to do this thogh.

This is the code from the page that is called in the i-frame -

Code:

<?php    
 // Connects to your Database    
 mysql_connect("XXXXXX", "XXXXXX", "XXXXX") or die(mysql_error());    
 mysql_select_db("midwife_forum") or die(mysql_error());    
  // Collects data from "friends" table    
 $data = mysql_query("SELECT * FROM event ORDER BY dateline_from ASC")    
 or die(mysql_error());    
 
 $time_stamp = time();

 // puts the "event" info into the $info array    
 //$info = mysql_fetch_array( $data );    
  Print "<table border=1 align=center cellpadding=3>";  
  $i=0;  
 while($info = mysql_fetch_array( $data ))    
 {    
if($info['calendarid'] == 3 && $info['dateline_from'] >= $time_stamp) 
{ 
$i++;
	if($i <= 3)
	{
	Print "<tr><td><b>ID:</b><br> ".$info['eventid'] ."</td> ";   
	Print "<td><b>Title:</b><br> ".$info['title'] ."</td> ";   
	Print "<td><b>Event Details:</b><br> ".$info['event'] ." </td>"; 
	Print "<td><b>Places:</b><br> <center>".$info['remaining_places'] ."</center> </td></tr>"; 
	}   
} 
 }    
 Print "</table>";
 ?>

I would really appreciate the help as this is the only thing REALLY bugging me!

**J. H. Rasmussen** · #2 (**permalink**) 04-14-2012, 05:56 PM

I have made the 3 boxes, but to give some code you can just cut and paste, i need some information. My guess is you want the event title in the top with the "gold" background and the event description in the middle with the white background, but where do yyou want the event id and places to be diaplayed?

Here is the html code of the 3 boxes, but i can't implement it with php code before you have answered the questions:

Code:

<!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=iso-8859-1" />
	<title>Untitled</title>
<style type="text/css">
html *
{
	padding:0;
	margin:0;
}

.eventTable{
	border: 2px solid silver;
	font-size: 12px;
	padding-bottom: 10px;
	display: block;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
}

.eventTable .firstRow{
	width: 200px;
	color: #666;
	background-color: #cc9;
	padding: 2px;
}

.eventTable .secondRow{
	background-color: #fff;
	color: black;
	padding: 2px;
	display: block;
	min-height: 100px;
}

.eventTable .lastRow{

position: absolute;
background-color:silver;
width: 200px;
padding: 2px;
text-align: right;
}
</style>
</head>

<body>
<table cellspacing="0" cellpadding="2" class="eventTable">
<tr><th class="firstRow">gthfhfh</th></tr>
<tr><td class="secondRow">hfhfh</td></tr>
<tr><td class="lastRow">fhfghf</td></tr>
</table>

<table cellspacing="0" cellpadding="2" class="eventTable">
<tr><th class="firstRow">gthfhfh</th></tr>
<tr><td class="secondRow">hfhfh</td></tr>
<tr><td class="lastRow">fhfghf</td></tr>
</table>

<table cellspacing="0" cellpadding="2" class="eventTable">
<tr><th class="firstRow">gthfhfh</th></tr>
<tr><td class="secondRow">hfhfh</td></tr>
<tr><td class="lastRow">fhfghf</td></tr>
</table>



</body>
</html>

**J. H. Rasmussen** · #3 (**permalink**) 04-14-2012, 06:09 PM

Well, i have placed the event places and id at the bottom of the boxes, so you can try this code:

Code:

<!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=iso-8859-1" />
	<title>Untitled</title>
<style type="text/css">
html *
{
	padding:0;
	margin:0;
}

.eventTable{
	border: 2px solid silver;
	font-size: 12px;
	padding-bottom: 10px;
	display: block;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
}

.eventTable .firstRow{
	width: 200px;
	color: #666;
	background-color: #cc9;
	padding: 2px;
}

.eventTable .secondRow{
	background-color: #fff;
	color: black;
	padding: 2px;
	display: block;
	min-height: 100px;
}

.eventTable .lastRow{

position: absolute;
background-color:silver;
width: 200px;
padding: 2px;
text-align: right;
}
</style>
</head>

<body>


<?php    
 // Connects to your Database    
 mysql_connect("XXXXXX", "XXXXXX", "XXXXX") or die(mysql_error());    
 mysql_select_db("midwife_forum") or die(mysql_error());    
  // Collects data from "friends" table    
 $data = mysql_query("SELECT * FROM event ORDER BY dateline_from ASC")    
 or die(mysql_error());    
 
 $time_stamp = time();

 // puts the "event" info into the $info array    
 //$info = mysql_fetch_array( $data );    
  $i=0;  
 while($info = mysql_fetch_array( $data ))    
 {    
if($info['calendarid'] == 3 && $info['dateline_from'] >= $time_stamp) 
{ 
$i++;
	if($i <= 3)
	{
echo '<table cellspacing="0" cellpadding="2" class="eventTable">';
echo '<tr><th class="firstRow">'.$info['title'].'</th></tr>';
echo '<tr><td class="secondRow">'.$info['event'].'</td></tr>';
echo '<tr><td class="lastRow">Places: '.$info['remaining_places'].' - Id: '.$info['eventid'].'</td></tr>';
echo '</table>';
	}   
} 
 }    

 ?>


</body>
</html>

Midwifery Online · #4 (**permalink**) 04-15-2012, 12:29 AM

that's absolutely brilliant thank you and I realy appreicate it!

How can I make the boxes a bit bigger and centered? And set a standard height? I don't like the fact that the boxes are different sizes, id like them to be all the same size

**J. H. Rasmussen** · #5 (**permalink**) 04-15-2012, 01:42 AM

I have put the boxes in another 3-coloum table and centered them there.

And made two variables, so it's easy to change the height and width of the boxes.

The code:

Code:

<!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=iso-8859-1" />
	<title>Untitled</title>
<?php
$boxWidth = 200;
$boxMinHeight = 146;
?>
<style type="text/css">
html *
{
	padding:0;
	margin:0;
}

.eventTable{
	border: 2px solid silver;
	font-size: 12px;
	padding-bottom: 10px;
	display: block;
	width: <?php echo $boxWidth; ?>px;
	height: auto;
	margin:0 auto;
}

.eventTable .firstRow{
	width: <?php echo $boxWidth-8; ?>px;
	color: #666;
	background-color: #cc9;
	padding: 2px;
}

.eventTable .secondRow{
	background-color: #fff;
	color: black;
	padding: 2px;
	display: block;
	min-height: <?php echo $boxMinHeight-46; ?>px;
	vertical-align: top;
}

.eventTable .lastRow{

position: absolute;
background-color:silver;
width: <?php echo $boxWidth-8; ?>px;
padding: 2px;
text-align: right;
}

.eventTableContainingTable{
	width: 99%;
}

.eventTableContainingRow{
	width: 33%;
}
</style>
</head>

<body>


<?php    
 // Connects to your Database    
 mysql_connect("XXXXXX", "XXXXXX", "XXXXX") or die(mysql_error());    
 mysql_select_db("midwife_forum") or die(mysql_error());    
  // Collects data from "friends" table    
 $data = mysql_query("SELECT * FROM event ORDER BY dateline_from ASC")    
 or die(mysql_error());    
 
 $time_stamp = time();
echo '<table cellspacing="0" cellpadding="2" class="eventTableContainingTable"><tr>';
 // puts the "event" info into the $info array    
 //$info = mysql_fetch_array( $data );    
  $i=0;  
 while($info = mysql_fetch_array( $data ))    
 {    
if($info['calendarid'] == 3 && $info['dateline_from'] >= $time_stamp) 
{ 
$i++;
	if($i <= 3)
	{
echo '<td class="eventTableContainingRow">';
echo '<table cellspacing="0" cellpadding="2" class="eventTable">';
echo '<tr><th class="firstRow">'.$info['title'].'</th></tr>';
echo '<tr><td class="secondRow">'.$info['event'].'</td></tr>';
echo '<tr><td class="lastRow">Places: '.$info['remaining_places'].' - Id: '.$info['eventid'].'</td></tr>';
echo '</table>';
echo '</td>';
	}   
} 
 }    
echo '</tr></table>';
 ?>


</body>
</html>

Midwifery Online · #6 (**permalink**) 04-16-2012, 03:28 AM

Thank you so much, I really appreciate it. I've got it looking just the way I want!

Thanks!