Styling PHP Elements from a database?

Hi All,
I have started messing around with PHP and MySQL, such as pulling information out etc. I can get the information from my database and then put it into a html table. Im pretty confident with html/css so was wondering how i start turning that basic table into something more better looking. I tried getting a row and putting it into a h1 tag, and then styling the h1 tag but no luck..... I dont know if it is even possible to style php elements ( i assume it is looking at other sites) I just need some general advice to put me in the right direction. In conclusion i want to know how to Style something thats been pulled from a MySQL database. Any help is greatly appreciated.

Thanks!

 

You need to be styling the HTML table. For example, your dataset should look like this at the very least:

<table class="results">
    <tr>
          <th>Column Name</th>
          <th>Second Column</th>
    </tr>
    <tr>
           <td>Result 1</td>
           <td>Result A</td>
     </tr>
    <tr>
           <td>Result 2</td>
           <td>Result B</td>
     </tr>
    <tr>
           <td>Result 3</td>
           <td>Result C</td>
     </tr>
</table>

HTML:

You can then style every element, with CSS.

For example:

.results td,
.results th{
     border:solid 2px #000;
     padding:0.4em;
     text-align:center;
}

.results th{
     background-color:#ccc;
}

.results td{
     background-color:#eee;
}

Code (markup):

You can view an example, just click here.

You don't need to do anything with PHP except generate the HTML. You can set it up to give alternate rows different colours etc.

Hope that kinda helps.

 

Thanks for your quick respone!

What your saying makes perfect sense, i think im getting mixed up with how to mix the php with html. At the moment this is my code:

<?php
include("dbinfo.inc.php");
$db_name="bikes"; // Database name
$tbl_name="bikes"; // Table name


// Connect to server and select database.
mysql_connect("localhost", "root", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");


// Get all the data from the "example" table




$loopResult = ''; // leave blank to start var for loop
$result = mysql_query('SELECT * FROM `bikes` ');
while($row = mysql_fetch_assoc($result)) {
$loopResult = '

<div id="container">
<div class="bike"><h1>'.$row['Name of bike'].'</h1></div>
<div class="dlimage">'.$row['Price'].'</div>
</div>

';
}
echo $loopResult;
?>

Should this be saved as a .html document or .php? I followed a tutorial on how to get the data and display in html, as you can see in the code the <h1> tag is inside the php code, which was confusing me on the styling side. Is there a better way to get this one row in <h1> tag? Hope this makes a degree of sense.
Thanks again.

 

The file should be saved as .php, as it is a PHP script.

However your problem seems to be with the HTML portion, which is far from ideal code (but it's alright for practise code). I'd probably study a bit more on HTML and CSS first.

First of all, H1 is NOT a stylistic markup. Don't use a H1 just to change appearance, it has its own place (as the main page heading).
Secondly, the id="container" is not valid if you have more than one result since ID is meant to be unique. Change that to a class instead.

What are you actually trying to get it to look like? You can just style the div.

For example:

<div class="container">
    <div class="bike">Honda</div>
    <div class="dlimage">$1250</div>
</div>

Code (markup):

You style that directly with CSS. Here is an example of how you can make it look if you have some profiency with CSS.

.container{
    width:15%;
    margin:1em auto;
    background-color:#F5CBE1;
    border:solid 2px #000;
}

.bike{
    font-weight:bold;
    height:2em;
    line-height:2em;
    border-bottom:solid 2px #000;
    background-color:#eee;
    padding:0.3em;
}

.dlimage{
    padding:0.2em;
}

.container:hover .bike{
    background-color:#FEFFF2
}

.container:hover .dlimage{
   background-color:#DAF7EB;
}

Code (markup):

Again, see an example here:http://dredgy.com/examples/simpleTableStyle/example.htm

If you have any particular way you need help with getting it too look, post in the HTML/CSS section and someone will help you.

In regards to mixing PHP and HTML, the way you were doing it before (with the H1) works fine. So you can add more divs/remove some. Your PHP code could also be changed to set everything up better, but it is a decent example of how to get
data from the database.

 

Thanks again for quick response.

Ive marked it as best answer, as it seems to have helped solve the problem. I tried adding a <style> tag to the <head> section of the file and the css seemed to take effect , where as when i link it to a seperate css file it didnt work.

Anyway problem solved and thanks for your help!

All the best.