PHP/HTML/CSS: Styling an array of data

Question

When importing an array of data from a database (i'm using php/mysql), how do I go about styling this information with css? I'm assuming I add html tags to each separate piece of data from the array? but if so at which stage would I assign these tags?

I'm a bit new to php but am ok with css and xhtml.

At the moment my array contains:

Business_Name  |  Address  |  Tel | Service  | Url | Email | Recommendations | Image_Url

Any help would be much appreciated.

Edit: A picture paints a thousand words :0)

add the css and html on output, can't know exactly what css\html as you have not told us what you want it to look like on screen. — user557846
– user557846, Commented Jun 28, 2011 at 9:12
I think his questions is actually more basic than that... are you asking 'how to loop this array and display it?'... — Brian
– Brian, Commented Jun 28, 2011 at 9:14
Are these items going into a form, so that the data can be edited for example? — Cups
– Cups, Commented Jun 28, 2011 at 9:15
@brian no just looking to add style to the echoed result of my query. — Richard Bell
– Richard Bell, Commented Jun 28, 2011 at 9:18
@cups the data will not be going into a form and will be uneditable to anyone other than myself. It will appear as a business listing on my site. — Richard Bell
– Richard Bell, Commented Jun 28, 2011 at 9:20

rrapuya · Accepted Answer · 2011-06-28 09:53:08Z

2

try doing a for loop width you array

something like

<?php
  echo "<ul>";
 foreach($array as $arrkey){
     echo "<li>".$arrkey."</li>";   

 }
 echo "</ul>";
?>

and do some css on the <li>.

edit:

 <?php

   $cont=0;

      echo '<ul>';
     foreach($array as $arrkey){
         echo '<li class="yourclass-.$cont.'">'.$arrkey.'</li>';   
        $cont++;
     }
     echo "</ul>";
    ?>

then style each <li>

like

li.yourclass-0{

}

edited Jun 28, 2011 at 9:53

answered Jun 28, 2011 at 9:15

rrapuya

2982 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Alex Over a year ago

Just to point out - $arrkey is /actually/ that array element's value. A better variable name might be $arrval.

rrapuya Over a year ago

Yes $arrkey is the value of the array elements.

Richard Bell Over a year ago

What would happen if each list item was to be styled differently? Where could I add a class or id?

Wex Over a year ago

If you're planning on giving each element in your array the same style, use the technique listed in this post. If you want to use different styles for each element in the array, you're much better off using an associative array and listing out the elements and their classes individually. For instance,

<span class="business-name"><?php echo $the_array["business_name"]; ?></span> <span class="address"><?php echo $the_array["address"]; ?></span>

etc...

rrapuya Over a year ago

but you can also try making the $arrkey as a class.

|

Alex · Accepted Answer · 2011-06-28 09:16:16Z

1

This is quite an open ended question, but I'll endeavour to give you some general pointers.

There are a few options open to you. The easiest and most straightforward is to just start spitting out HTML from your PHP script, like so:

<table><tr><td><?php echo $arr['Business_Name']; ?></td>...<td><img src="<?php echo $arr['Image_Url']; ?>"></td></tr></table>

In short, echo is your friend.

That's not always the best option though - if you have anything more than a very simple script, this kind of approach can get very messy and hard to follow very quickly. Your beautifully formatted PHP get all gummed up with HTML, and it's not pretty, and becomes hard to maintain.

What you want to do in this case is separate your concerns - keep "display" logic separate from "business" logic.

This can be done in a few different ways - I suggest you look at some templating tools like Smarty or some frameworks such as Zend - these go a long way towards separating business logic from display logic.

answered Jun 28, 2011 at 9:16

Alex

3,0993 gold badges27 silver badges48 bronze badges

1 Comment

Richard Bell Over a year ago

Thanks for your input alex. I really would like to avoid anything messy. I will have a look into templating tools.

Sterex · Accepted Answer · 2011-06-28 10:32:27Z

0

I'm guessing you are inquiring only about "designing" the output. If so, the question become more vague.

Designing depends on how you wish to show these data to your viewers. If you want a tabular structure, use <table>. Or if they are to be shown as a list, use <ul> or <ol> and use CSS to style it. Adding style properties inline is a very bad approach. Avoid that.

Like Alex said, this question is very open ended and vague. Try refining your question a little more.

answered Jun 28, 2011 at 10:32

Sterex

1,0281 gold badge13 silver badges29 bronze badges

Comments

Rukmi Patel · Accepted Answer · 2011-06-28 11:10:49Z

0

if we suppose $res is your result set then ,

$str = "table width='100%'";

while($row = mysql_fetch_array($res)){ $str .= "tr td class='class_name'".$row['col_name']." /td /tr"; }

$str .= "/table";

echo $str;

answered Jun 28, 2011 at 11:10

Rukmi Patel

2,5619 gold badges29 silver badges42 bronze badges

Collectives™ on Stack Overflow

PHP/HTML/CSS: Styling an array of data

4 Answers 4

8 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related