CSS for SQL Results

Hi, I'm a beginner with SQL & web coding but i manage to get there in the end with lots of help. Anyways I have a database & a page where i can select a specific title which then displays all data related to that title in a table on the same page below, however the table is bog standard & not really attractive in any shape or form. I've been asking around & people said i need css to style my table but ive no idea how. I found some css files on the net which are for tables & linked them into my php page but nothing changes so i guess its not as simple as that. Can anyone help? The code that shows the data is below.

Thanks in advance!!

<?php



include 'connect.php';

echo '<form action="index.php" method="POST">'; 
echo '<select name="state">';
echo '<option value=""> ----> </option>';
$result = mysql_query("SELECT * FROM `states`"); 
while($row = mysql_fetch_array($result))
{ 
echo '<option value="' . $row[state] . '">' . $row[state] . '</option>' ;
}
echo '</select>';
echo '<input type="submit" value="select">';
echo '</form>';

$state = $_POST[state];
if ($state == "") 
echo "Please select something in the form above!"; 
else 
{ 
$result3 = mysql_query("SELECT * FROM `population` where state='$state'"); 
echo 'In the state ';
echo $state;
echo ' there are the following cities with # inhabitants:';
echo '<table border=1> <tr><td> City name </td> <td> Population </td><td> airport </td><td> zip code </td></tr>';

while($row3 = mysql_fetch_array($result3))
{
echo '<tr><td>';
echo $row3['city'];
echo '</td><td>';
echo number_format($row3['people']);
echo '</td> <td>';
echo $row3['airport'];
echo '</td> <td>';
echo '<a href="http://www.greedinc.com/zipcontrol.php?zip=';
echo $row3['zip'];
echo '"';
echo "target='_blank' ";
echo ">";
echo $row3['zip'];

echo "</a>";
echo '</td></tr>';


} 
echo '</table>';
} 
?>

PHP:

 

well, how, in your mind, will make it attractive?
all I see in the code above is four columns of information. you can make City name Population airport and zip code bold, add a picture beside the title.. change background color add more pictures at the top, consider a small flash at the top.
you can think of ways to make your page interactive with the user.. for example you can add a fact of the day about particular topic of your site, daily quiz about a topic on your site etc.

 

Yeah those ideas are in my head, but maybe i didnt express myself good so ill try again.

That code sets out 4 columns of info but the table it creates is nasty. I want some help on making a css file style the table it generates. I've never wrote css & ive never used css before. I know how to make the page use a css stylesheet but im completely confused about making my table look more attractive. I use MYSIWYG editors & never had problems before till now. Ive downloaded some free css for tables but none seem to have an effect. So if you know of any css files out there that will style my table in different ways that will work if i make my page load the css then i should be able to find what does what & edit & customize myself.

thanks

 

oh i c,
so the table does not show the way you want it to. It would be helpful to see a screen shot of what shows.
Try something similar to the following:

<TABLE width="400">
<tr>

<td width="25%">
1st Cell
</td>

<td width="25%">
2nd Cell
</td>

<td width="25%">
3rd Cell
</td>

<td width="25%">
4th Cell
</td>

</tr>
</TABLE>

that should make your table look organized. I hope that helps somehow

 

Hi, i setup a simple page to test stuff out before i work on my actual site. But here is the link http://www.owlife.co.uk/test/index.php
in the drop down selection select Alabama as its the only state ive added info for while i was testing. As you can see it generates its own table & thats what i want to style. The code you give me i already know, what i dont know is how to determine how the table looks after submitting info query if thats the correct term

Edit..
All i need to do is use HTML to print the result by including the variables in the correct spaces. The easiest way to do this is by closing your PHP tag and entering HTML normally. When you reach a variable position, include it as follows:

<? echo $variablename; ?>

Ive no clue what do to

 

ok, so you are trying to change styling in the table. First, i would change the color of the text because it is hard to see. You can do so by using style tag in the head of the document, here is an example:

<html>
<head>
<style type="text/css">
td {color:white}
</style>
</head>
</html>

Secondly you can change the background color and width of your cells. You can do so by using bgcolor and width in the td tag. here is an exaple:

<table>
<tr>
<td bgcolor="#C0C0C0" width=150px>Text</td>
</tr>
</table>

in your code it would look like this:

echo '<tr><td bgcolor=\"#C0C0C0\"  width=150px>';
echo $row3['city'];
echo '</td></tr>';

Code (markup):

I hope it helps, if not, can you tell me exactly what you want to change and what you want to change it to.

 

Ok, i just read your 'edit'. This is what is meant by closing PHP tags and using HTML. Try this code for the above example:

<?php



include 'connect.php';

echo '<form action="index.php" method="POST">';
echo '<select name="state">';
echo '<option value=""> ----> </option>';
$result = mysql_query("SELECT * FROM `states`");
while($row = mysql_fetch_array($result))
{
echo '<option value="' . $row[state] . '">' . $row[state] . '</option>' ;
}
echo '</select>';
echo '<input type="submit" value="select">';
echo '</form>';

$state = $_POST[state];
if ($state == "")
echo "Please select something in the form above!";
else
{
$result3 = mysql_query("SELECT * FROM `population` where state='$state'");
echo 'In the state ';
echo $state;
echo ' there are the following cities with # inhabitants:';
?>

<table border=1> <tr><td bgcolor="white"> City name </td> <td bgcolor="white"> Population </td><td bgcolor="white"> airport </td><td bgcolor="white"> zip code </td></tr>

<?php
while($row3 = mysql_fetch_array($result3))
{
?>

<tr><td bgcolor="white">

<?php

echo $row3['city'];
?>

</td><td bgcolor="white">

<?php
echo number_format($row3['people']);

?>

</td> <td bgcolor="white">

<?php
echo $row3['airport'];
?>

</td> <td bgcolor="white">

<?php
echo '<a href="http://www.greedinc.com/zipcontrol.php?zip=';
echo $row3['zip'];
echo '"';
echo "target='_blank' ";
echo ">";
echo $row3['zip'];

echo "</a>";
echo '</td></tr>';


}
echo '</table>';
}
?>

Code (markup):

 

Cool, well im going to play with that later & see what happens but ill prob get back to you though on the offer of help But the table is going on a black background so is that the basics of what the html can do or can it make the tables look more fancy than the typical 4 corner box's

Edit...

From what i can tell, its some what limited in style. I was looking around for some css but not sure how to make my page change my table using css. I found the perfect css style which ive added below. if you could tie that in with my code that would be fantastic. Colour & fonts is a little off to what i need but i can easily edit the css to my colour theme but thats the exact style

div#itsthetable {
}

html>body div#itsthetable {
	font: normal normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	height: 377px
}

div#itsthetable table {
	border-collapse: collapse
}

caption {
	background: url(http://www.imaputz.com/cssStuff/dtable.gif) #FFF repeat-x scroll center left;
	border-bottom: 1px solid #CCC;
	border-top: 1px solid #CCC;
	display: none;
	font: normal normal bold 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
	padding: 5px
}

html>body caption {
	display: block
}

thead tr th, tr thead td {
	background: url(http://www.imaputz.com/cssStuff/dtable.gif) #FFF repeat-x scroll center left;
	border-bottom: 1px solid #CCC;
	font: normal normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	padding: 5px;
	position: relative;
	text-align: left
}

html>body thead tr th, html>body tr thead td {
	position: inherit
}

tbody tr th, tbody tr td {
	background: url(http://www.imaputz.com/cssStuff/dtablerow.gif) #FFF repeat-x scroll center left;
	display: table-cell;
	font: normal normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	padding: 5px;
	text-align: left;
	vertical-align: top
}

tbody tr.odd th, tbody tr.odd td {
	background: url(http://www.imaputz.com/cssStuff/dtablerow.gif) #EEE repeat-x scroll center left;
	display: table-cell;
	padding: 5px;
	text-align: left;
	vertical-align: top
}

tbody tr:hover th, tbody tr:hover td, tbody tr.odd:hover th, tbody tr.odd:hover td {
	background: url(dtablerow.gif) #999 repeat-x scroll center left;
	color: #FFF;
	display: table-cell;
	padding: 5px;
	text-align: left;
	vertical-align: top
}

tbody tr a, tbody tr a:link, tbody tr a:visited {
	color: #009;
	text-decoration: none
}

tbody a:hover {
	color: #009;
	text-decoration: underline
}

tbody tr:hover th a, tbody tr:hover td a, tbody tr.odd:hover th a, tbody tr.odd:hover td a {
	color: #FFF;
	text-decoration: none
}

tbody tr:hover th a:hover, tbody tr:hover td a:hover, tbody tr.odd:hover th a:hover, tbody tr.odd:hover td a:hover {
	color: #FFF;
	text-decoration: underline
}

tfoot tr th {
	background: url(http://www.imaputz.com/cssStuff/dtable.gif) #FFF repeat scroll center left;
	border-top: 1px solid #CCC;
	font: normal normal bold 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	padding: 5px;
	text-align: right;
	z-index: 1000000
}

tfoot tr td {
	background: url(http://www.imaputz.com/cssStuff/dtable.gif) #FFF repeat scroll center left;
	border-top: 1px solid #CCC;
	font: italic normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
	padding: 5px;
	z-index: 1000000
}

html>body tfoot tr th, html>body tfoot tr td {
	border-bottom: 1px solid #CCC
}

 
html>body thead {
	display: block
}

html>body tfoot {
	display: block;
	position: absolute;
	top: 620px
}

html>body tbody {
	display: block;
	height: 300px;
	overflow: auto
}

html>body thead tr th, html>body tbody tr th {
	width: 98px
}

html>body thead tr th + th, html>body tbody tr th + td {
	width: 100px
}

html>body thead tr th + th + th, html>body tbody tr th + td + td {
	width: 80px
}

html>body thead tr th + th + th + th, html>body tbody tr th + td + td + td {
	width: 230px
}

html>body thead tr th + th + th + th + th {
	width: 86px
}

html>body tbody tr th + td + td + td + td {
	width: 70px
}

html>body tfoot tr th {
	width: 98px
}

html>body tfoot tr th + td {
	width: 526px
}

Code (markup):

 

Can anyone help me with my last post plz

 

A good first step would be to clean up your PHP. Echo with single quotes obeys white-space, so leverage that for some formatting so the markup is clearer... It also means you do NOT have to open and close ECHO on every line of code; bad practice at best.

Basic rule of CSS, you don't have good HTML, you can't do a lot with the CSS. There are tags other than TD that go into a table, so let's use them.

<?php

include('connect.php');

echo '
	<form action="index.php" method="POST">
		<div><!-- div is block level container, needed if working in strict -->
			<select name="state">';
				<option value=""> ----> </option>
';

$result=mysql_query("SELECT * FROM states"); 
while($option=mysql_fetch_array($result)) { 
	echo '
				<option value="',$row[state],'">',$row[state],'</option>';
}

echo '
			</select>
			<input type="submit" value="select">
		</div>
	</form>
';
	
if (empty($_POST['state'])) {
	echo 'Please select something in the form above!'; 
} else { 

	$query=sprintf("SELECT * FROM population WHERE state='%s',
		mysql_real_escape_string($_POST['state'])
	);
	$results=mysql_query($query); 
	
	if (mysql_num_rows($results)==0) {
		echo '
	<h2>No results for ',htmlspecialchars($_POST['state']),'</h2>
		';
	} else {
	
		echo '
	<table class="inState">
		<caption>
			Inhabitants by City in the State of ',htmlspecialchars($_POST['state']),'
		</caption>
		<thead>
			<tr>
				<th class="name">City name</th>
				<th class="population">Population</th>
				<th class="airport">Airport</th>
				<th class="zip">Zip Code</th>
			</tr>
		</thead><tbody>';
		$count=0;
		while ($city=mysql_fetch_array($results)) {
			echo '
			<tr',(($count%2)==1 ? ' class="odd"' : ''),'>
				<th class="name">',$city['city'],'</th>
				<td class="population">',number_format($city['people']),'</td>
				<td class="airport">,'$city['airport'],'</td>
				<td class="zip">
					<a href="http://www.greedinc.com/zipcontrol.php?zip=',$city['zip'],'">
						',$city['zip'],'
					</a>
				</td>
			</tr>';
			$count++;
		} 
	
		echo '
		</tbody>
	</table>';

	}

}

?>

Code (markup):

You can see I added some classes so our CSS can target it without all those convoluted sibling selectors (that don't even WORK cross browser), and 'fixed' the markup to be more semantic, and cleaned up the engrish moist goodry. You'll also notice I put in a counter so you can apply alternating colors if desired. (always nice)

Biggest changes are a trap for if there are no results, and sanitizing the inputs before sending it to mySQL / Sanitizing inputs before sending them as markup. Security man, security!

For your CSS, that could be a simple:

.inState {
	border-collapse:collapse;
	border:1px solid #CCC;
}

.inState caption {
	text-align:left;
}

.inState th,
.inState td {
	padding:0.5em 0.25em;
	text-align:center;
	border:1px solid #CCC;
}

.inState .name {
	text-align:left;
}

.inState tbody .name th {
	font-weight:normal;
}

.inState thead th {
	background:#CCC;
}

.inState tbody td {
	width:1%
}

.inState tbody td,
.inState tbody th {
	vertical-align:top;
	color:#000;
	background:#F0F0F0;
}

.inState tbody .odd th,
.inState tbody .odd td {
	background:#E8E8E8;
}

.inState tbody a {
	color:#009;
	text-decoration:none;
}

.inState tbody a:active,
.inState tbody a:focus,
.inState tbody a:hover {
	text-decoration:underline;
}

Code (markup):

The class hooks are all there so you can target each column if you want with widths - honestly I'd let all of them except 'name' collapse to that 1% (tables ALWAYS expand % to make room) leaving the Header for that row as the dynamic element, then set space around the text with padding as I have done. Then you can just set the width on .inState itself and let the rest of it take care of itself.

Though really that depends on the content of each column.

Your most recent post with all those extra selectors are A> not going to work cross browser and B> WAY too much for something so simple. It's declaring stuff that shouldn't even work or isn't neccessary - like absolute positioning on tfoot, z-index on elements that don't accept/obey z-index, display:block on elements that are non-rendering... display:block on absolutes (absolute positioned elements are ineherintly display:block), etc, etc... It's a confusing wreck I'm not even certain would work well... especially with all the POINTLESS html>body selectors and other oddities. Hell, I wouldn't use it just because it's declaring **** in px metric fonts, which is an accessibility /FAIL/. (I'd love to see people's faces if PX fonts behaved correctly in print). It's even dicking around with position:inherit and setting display:table-cell on... table-cells??? All sorts of other pointless oddities.

Even just stupid *** like this:

tbody tr a, tbody tr a:link, tbody tr a:visited {
	color: #009;
	text-decoration: none
}

tbody a:hover {
	color: #009;
	text-decoration: underline
}

Code (markup):

Multiple redundancies. Anchors cannot exist in a table outside TBODY and not be in a TR, so saying TR is kinda pointless, just setting 'a' sets :link, :visited AND :hover so there's no reason to be restating them with the same values... Kinda silly.

Hope all this helps.

 

Ty, just a small issue, the php code you gave me results in Parse error: syntax error, unexpected '<' in /home/owlife/public_html/test/index.php on line 48 which would be

<option value=""> ----> </option>

Code (markup):

if i remove i get further issues with

<option value="',$row[state],'">',$row[state],'</option>';

Code (markup):

I'm not fantastic & seek help often to make things work as im still learning, but the code you gave me is a little ahead of my skills

 

Oops, typo. Since I don't have the sql set up to test that code here...

echo '
	<form action="index.php" method="POST">
		<div><!-- div is block level container, needed if working in strict -->
			<select name="state">[COLOR="#ff0000"]';[/COLOR]
				<option value=""> ----> </option>
';

Code (markup):

see the '; I put in red after the select? You want to remove those two characters. Leftover I must have missed deleting from your original. Weird tip for debugging php, a lot of times the 'error' reported is not for the line it reports it on, but the line before it.

 

Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting T_STRING or T_VARIABLE or T_NUM_STRING in /home/owlife/public_html/test/index.php on line 69

which is

mysql_real_escape_string($_POST['state'])

Code (markup):

by the end of this, your going to hate me

 

Another typo on the line before it.

Change this:

$query=sprintf("SELECT * FROM population WHERE state='%s',

Code (markup):

to this:

$query=sprintf("SELECT * FROM population WHERE state='%s'[color=red]"[/color],

Code (markup):

One character added. I made it red. What I get for coding on the laptop.

 

Parse error: syntax error, unexpected T_VARIABLE, expecting ',' or ';' in /home/owlife/public_html/test/index.php on line 98

<td class="airport">,'$city['airport'],'</td>

Code (markup):

 

Mein gott, I never make that many typo's... Though you should be able to figure those out on your own...

See that airport">,' - should be airport">',

 

I did say you will hate me I usually get help with my coding after i find parts i want via google n so on to edit to make work how i like. I use Frontpage often so there ya go.

Anyways, no errors anymore ty, but i get no selection on the drop down you broke it hehe

 

Another typo:
while($option=mysql_fetch_array($result)) {

Should be

while($row=mysql_fetch_array($result)) {

 

Need a little bit more help from ya btw but working great so far tyvm. Here is the code all sorted..

<?php

include('connect.php');

echo '
	<form action="index.php" method="POST">
		<div><!-- div is block level container, needed if working in strict -->
			<select name="state">
				<option value=""> ----> </option>
';

$result=mysql_query("SELECT * FROM states"); 
while($row=mysql_fetch_array($result)) {
	echo '
				<option value="',$row[state],'">',$row[state],'</option>';
}

echo '
			</select>
			<input type="submit" value="select">
		</div>
	</form>
';
	
if (empty($_POST['state'])) {
	echo 'Please select your state in the form above!'; 
} else { 

	$query=sprintf("SELECT * FROM population WHERE state='%s'",
		mysql_real_escape_string($_POST['state'])
	);
	$results=mysql_query($query); 
	
	if (mysql_num_rows($results)==0) {
		echo '
	<h2>No results for ',htmlspecialchars($_POST['state']),'</h2>
		';
	} else {
	
		echo '
	<table class="inState">
		<caption>
			City Population highest top by State of ',htmlspecialchars($_POST['state']),'
		</caption>
		<thead>
			<tr>
				<th class="name">City name</th>
				<th class="population">Population</th>
				<th class="airport">Airport</th>
				<th class="zip">Zip Code</th>
			</tr>
		</thead><tbody>';
		$count=0;
		while ($city=mysql_fetch_array($results)) {
			echo '
			<tr',(($count%2)==1 ? ' class="odd"' : ''),'>
				<th class="name">',$city['city'],'</th>
				<td class="population">',number_format($city['people']),'</td>
				<td class="airport">',$city['airport'],'</td>
				<td class="zip">
					<a href="http://www.greedinc.com/zipcontrol.php?zip=',$city['zip'],'">
						',$city['zip'],'
					</a>
				</td>
			</tr>';
			$count++;
		} 
	
		echo '
		</tbody>
	</table>';

	}

}

?>

Code (markup):

Then someone said this to me & im not sure what or where to put it...
The links to zip control don't work if the zipcode starts with a 0. Try using:

str_pad($zip, 5, "0", STR_PAD_LEFT);

Code (markup):

On the zipcodes before displaying them.

?

 

Anyone?