Log in

View Full Version : csv to html table and styling


ddellostritto
05-16-2010, 01:52 AM
Hi All -

I hope that you can help me with a small problem that I have.

I need to display a .csv file as a html table. I've found a script that works but it doesn't let me style it: or at least, no unique styling per every other row, bold headers, etc..

Can any one help me?

The code I have is:


<?php
echo "<html>\n<body>\n\t<table style=''>\n\n";
$f = fopen("THECSVFILE.csv", "r");
while (($line = fgetcsv($f)) !== false) {
echo "\t\t<tr>\n";
foreach ($line as $cell) {
echo "\t\t\t<td style='padding:.4em;'>" . htmlspecialchars($cell) . "</td>";
}
echo "\r</tr>\n";
}
fclose($f);
echo "\n\t</table>\n</body>\n</html>";
?>
djr33
05-16-2010, 02:42 AM
That just loops through the rows and within those the cells.
Styling would be a lot more complex, depending on what you want to do.

If you want to do it using a numerical pattern, then you can track this using numbers:
Before the while loop set $x=0;
Do the same for $y before the foreach.

Then use if ($x%2==0) { ...change the style... } within the loop.
The modulus (%) operator takes the remainder of the division-- so it'll tell you if it goes in evenly if the result is 0. You can use every 2nd one like that or use 3 for every third, etc.

The way to change the style is to apply a class.

So you can use $class=''; if ($x%2==0) { $class= 'class="highlighted"'; }, or whatever you'd like. And of course echo $class as part of the td or tr tag.
ddellostritto
05-16-2010, 02:56 AM
I only manage css & html, so I really don't understand where I could put the track number or how to vary it. Could you give an example please? Thanks in advance!
djr33
05-16-2010, 03:51 AM
To customize this you're going to need to learn the basics of PHP. The directions above are enough once you do a few intro tutorials.

Here's an example of applying the class "bright" to every other row and the class "dark" to every other td-- this will create a checkered pattern. Do with it what you'd like. Adjust things as needed, but to get much control you'll need to customize it a bit.

<?php
echo "<html>\n<body>\n\t<table style=''>\n\n";
$f = fopen("THECSVFILE.csv", "r");
$trcount = 0; //start the row count as 0
while (($line = fgetcsv($f)) !== false) {
$trclass = ''; if ($trcount%2==0) { $trclass=' class="dark"'; } //default to nothing, but if it's even apply a class
echo "\t\t<tr".$trclass.">\n"; //same as before, but now this also has the variable $class to setup a class if needed
$tdcount = 0; //reset to 0 for each inner loop
foreach ($line as $cell) {
$tdclass = ''; if ($tdcount%2==0) { $tdclass=' class="dark"'; } //default to nothing, but if it's even apply a class
echo "\t\t\t<td ".$tdclass."style='padding:.4em;'>" . htmlspecialchars($cell) . "</td>"; //same as before, but now this also has the variable $class to setup a class if needed
$tdcount++; //go up one each loop
}
echo "\r</tr>\n";
$trcount++; //go up one each loop
}
fclose($f);
echo "\n\t</table>\n</body>\n</html>";
?>

Obviously you'll want to define "light" and "dark" classes in your CSS and probably make it something like just a light row is very light; just a dark cell is very dark; a light row and dark cell is somewhere in the middle; neither dark cell nor light row is nothing; this is to be figured out in the css.


Basically you can do this in a number of ways and that's just an example. It'll work, though, if you like that method.

Another way would be to use a single variable for every cell and not apply any styling to the <tr>s. Just apply "dark" to every other cell (offsetting every other row by one).
ddellostritto
05-16-2010, 06:41 AM
Thanks!

I think that with what you've indicated here I can go make some improvements on how the final outoput looks; I'm also going to take your advice about the tutorials.

Thanks again!
djr33
05-16-2010, 08:53 AM
Good luck. The main complication here really isn't the PHP-- that is a fairly simple PHP script compared to most.
The problem is the logic of imagining loops that have different results every 2nd, 3rd, etc time they go through. This takes a bit of practice.
It's especially hard doing it in two dimensions to start (x and y). You can try a simpler one dimension loop for practice if you'd like.

Note that for further use of this sort of thing using a for loop would be the best way, but that's even harder to read and takes a bit of getting used to. The advantage is that you have variables automatically ready for you to track the number of the current iteration, so stuff like this is easier. ...something for the future.