Style PHP Generated Table w/ CSS

[renz]

I have a PHP file that runs a SELECT query against a DB and returns the results in a table. I would like to style the table with CSS, but I don't know how to apply the CSS to the table since it is generated by the PHP and not HTML.

 

I have tried to place the PHP code in the body of an HTML page, but it doesn't work. Looking for and would appreciate any help.

 

Here is the PHP code that generates the table.

 

<?php
$con=mysqli_connect("localhost","root","tangerine","survey");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$result = mysqli_query($con,"SELECT * FROM survey_data");


echo "<table border='1'>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>City</th>
<th>Zip</th>
<th>Phone</th>
<th>Email</th>
<th>Best Time to Call</th>
<th>Safe After Dark</th>
<th>Thefts</th>
<th>Violent Crime</th>
<th>Gangs</th>
<th>Vandalism</th>
<th>Narcotics</th>
<th>Other</th>
<th>Where</th>
<th>Problems</th>
<th>Traffic</th>
<th>Transients</th>
<th>Loud Parties</th>
<th>Run Down Building</th>
<th>Junk Cars</th>
<th>Other</th>
<th>Where</th>
<th>Problems</th>
<th>First Problem Solved</th>
<th>Satisfied</th>
<th>Additional</th>
<th>Person Taking Survey</th>
</tr>";

while($row = mysqli_fetch_array($result))

  {
  echo "<tr>";
  echo "<td>" . $row['id'] . "</td>";
  echo "<td>" . $row['f_name'] . "</td>";
  echo "<td>" . $row['l_name'] . "</td>";
  echo "<td>" . $row['address'] . "</td>";
  echo "<td>" . $row['city'] . "</td>";
  echo "<td>" . $row['zip'] . "</td>";
  echo "<td>" . $row['phone'] . "</td>";
  echo "<td>" . $row['email'] . "</td>";
  echo "<td>" . $row['b_time'] . "</td>";
  echo "<td>" . $row['safe_dark'] . "</td>";
  echo "<td>" . $row['thefts'] . "</td>";
  echo "<td>" . $row['v_crime'] . "</td>";
  echo "<td>" . $row['gangs'] . "</td>";
  echo "<td>" . $row['vandalism'] . "</td>";
  echo "<td>" . $row['narco'] . "</td>";
  echo "<td>" . $row['cri_other'] . "</td>";
  echo "<td>" . $row['cri_where'] . "</td>";
  echo "<td>" . $row['cri_prob'] . "</td>";
  echo "<td>" . $row['traffic'] . "</td>";
  echo "<td>" . $row['transients'] . "</td>";
  echo "<td>" . $row['ld_party'] . "</td>";
  echo "<td>" . $row['rn_down'] . "</td>";
  echo "<td>" . $row['jnk_cars'] . "</td>";
  echo "<td>" . $row['nui_other'] . "</td>";
  echo "<td>" . $row['nui_where'] . "</td>";
  echo "<td>" . $row['nui_prob'] . "</td>";
  echo "<td>" . $row['prob_solve'] . "</td>";
  echo "<td>" . $row['satisfied'] . "</td>";
  echo "<td>" . $row['additional'] . "</td>";
  echo "<td>" . $row['per_survey'] . "</td>";
  echo "</tr>";
  }
echo "</table>";



mysqli_close($con);
?>

 

 

[requinix]

Whether PHP generated the HTML or not doesn't matter: all the browser sees is the output.

 

So in other words just add the CSS like you expect it should go. If that's not working then let us see what you have.

[renz]

Here is my php file that generates the table.

<?php
$con=mysqli_connect("localhost","root","tangerine","survey");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$result = mysqli_query($con,"SELECT * FROM survey_data");



echo "<table border='1'>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>City</th>
<th>Zip</th>
<th>Phone</th>
<th>Email</th>
<th>Best Time to Call</th>
<th>Safe After Dark</th>
<th>Thefts</th>
<th>Violent Crime</th>
<th>Gangs</th>
<th>Vandalism</th>
<th>Narcotics</th>
<th>Other</th>
<th>Where</th>
<th>Problems</th>
<th>Traffic</th>
<th>Transients</th>
<th>Loud Parties</th>
<th>Run Down Building</th>
<th>Junk Cars</th>
<th>Other</th>
<th>Where</th>
<th>Problems</th>
<th>First Problem Solved</th>
<th>Satisfied</th>
<th>Additional</th>
<th>Person Taking Survey</th>
</tr>";

while($row = mysqli_fetch_array($result))

  {
  echo "<tr>";
  echo "<td>" . $row['id'] . "</td>";
  echo "<td>" . $row['f_name'] . "</td>";
  echo "<td>" . $row['l_name'] . "</td>";
  echo "<td>" . $row['address'] . "</td>";
  echo "<td>" . $row['city'] . "</td>";
  echo "<td>" . $row['zip'] . "</td>";
  echo "<td>" . $row['phone'] . "</td>";
  echo "<td>" . $row['email'] . "</td>";
  echo "<td>" . $row['b_time'] . "</td>";
  echo "<td>" . $row['safe_dark'] . "</td>";
  echo "<td>" . $row['thefts'] . "</td>";
  echo "<td>" . $row['v_crime'] . "</td>";
  echo "<td>" . $row['gangs'] . "</td>";
  echo "<td>" . $row['vandalism'] . "</td>";
  echo "<td>" . $row['narco'] . "</td>";
  echo "<td>" . $row['cri_other'] . "</td>";
  echo "<td>" . $row['cri_where'] . "</td>";
  echo "<td>" . $row['cri_prob'] . "</td>";
  echo "<td>" . $row['traffic'] . "</td>";
  echo "<td>" . $row['transients'] . "</td>";
  echo "<td>" . $row['ld_party'] . "</td>";
  echo "<td>" . $row['rn_down'] . "</td>";
  echo "<td>" . $row['jnk_cars'] . "</td>";
  echo "<td>" . $row['nui_other'] . "</td>";
  echo "<td>" . $row['nui_where'] . "</td>";
  echo "<td>" . $row['nui_prob'] . "</td>";
  echo "<td>" . $row['prob_solve'] . "</td>";
  echo "<td>" . $row['satisfied'] . "</td>";
  echo "<td>" . $row['additional'] . "</td>";
  echo "<td>" . $row['per_survey'] . "</td>";
  echo "</tr>";
  }
echo "</table>";



mysqli_close($con);
?>

 

 

Here is the css I want to use to format the table.

#list
{
	font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
	font-size: 12px;
	margin: 45px;
	width: 480px;
	text-align: left;
	border-collapse: collapse;
	border: 1px solid #69c;
}
#list th
{
	padding: 12px 17px 12px 17px;
	font-weight: normal;
	font-size: 14px;
	color: #039;
	border-bottom: 1px dashed #69c;
}
#list td
{
	padding: 7px 17px 7px 17px;
	color: #669;
}
#list tbody tr:hover td
{
	color: #339;
	background: #d0dafd;
}

 

I do not understand how to put the two together to make it work.

[Barand]

1. Create the page using HTML only as you want it to look

 

2. Create output from PHP code that matches 1

 

Simples!