The Styling of Dynamically Created Tables

[iwato]

QUESTION: I have just completed my first dynamic table single handed and am, of course, very proud of my accomplishment. This said, it is not the most aesthetic looking table I have ever seen, and would some with help with the best way to go about formatting. To this end could someone recommend a set of best procedures.

<?php	$locale_info_parameters = array(		'decimal_point' => 'Decimal point character',		'thousands_sep' => 'Thousands separator',		'grouping' => 'Array containing numeric groupings',		'int_curr_symbol' => 'International currency symbol (i.e. USD)',		'currency_symbol' => 'Local currency symbol',		'mon_decimal_point' => 'Monetary decimal point character',		'mon_thousands_sep' => 'Monetary thousands separator',		'mon_grouping' => 'Array containing monetary groupings',		'positive_sign' => 'Sign for positive values',		'negative_sign' => 'Sign for negative values',		'int_frac_digits' => 'International fractional digits',		'frac_digits' => 'Local fractional digits',		'p_cs_precedes' => array(			'true' => 'currency_symbol precedes a positive value',			'false' => 'currency_symbol succeeds a positive value'),		'p_sep_by_space' => array(			'true' => 'a space separates currency_symbol from a positive value',			'false' => 'a space does not separate currency_symbol from a positive value'),		'n_cs_precedes' => array(			'true' => 'currency_symbol precedes a negative value',			'false' => 'currency_symbol does not precede a negative value'),		'n_sep_by_space' => array(			'true' => 'a space separates currency_symbol from a negative value',			'false' => 'a space does not separate currency_symbol from a negative value'),		'p_sign_posn' => array(			'0' => 'Parentheses surround the quantity and currency_symbol',			'1' => 'The sign string precedes the quantity and currency_symbol',			'2' => 'The sign string succeeds the quantity and currency_symbol',			'3' => 'The sign string immediately precedes the currency_symbol',			'4' => 'The sign string immediately succeeds the currency_symbol'),		'n_sign_posn' => array(			'0' => 'Parentheses surround the quantity and currency_symbol',			'1' => 'The sign string precedes the quantity and currency_symbol',			'2' => 'The sign string succeeds the quantity and currency_symbol',			'3' => 'The sign string immediately precedes the currency_symbol',			'4' => 'The sign string immediately succeeds the currency_symbol')		);	echo '<table>';	foreach ($locale_info_parameters as $key => $value) {		if (is_string($value)) {			echo '<tr><th>' . $key . '</th><th>' . $value . '</th></tr>';		} else {			list($param_key, $param_value) = each($value);			echo '<tr><th>' . $key . '</th><th>' . $param_key . ': ' . $param_value . '</th></tr>';			while (list($param_key, $param_value) = each($value)) {			echo '<tr><th></th><th>' . $param_key . ': ' . $param_value . '</th></tr>';									}		}	}	echo '</table>';?>

Roddy

[Synook]

Using CSS would be most appropriate. Umm, maybe I don't understand your question?

[Fmdpa]

I'd add an ID or CLASS to each cell, row and the table as an entirety. Then you can use CSS easily to style it. Did you take a look at this tutorial?

[iwato]

Using CSS would be most appropriate. Umm, maybe I don't understand your question?

To some extent I know how to use CSS, HTML, and PHP.I understand, for example, how to format a static table with CSS. I also know how to create a style-sheet and incorporate it into an HTML document. My question is what is the best way to include all of this into a dynamic table.Someone (Fmdpa) has already suggested the use of the class-, or even the id-attribute as a likely candidate for an appropriate PHP variable. Unfortunately, this is not new to me. What I want to know is the best method of incorporating these into a table dynamically. Reference to a good PHP tutorial on the subject would be a perfectly satisfactory answer.Any tips you could offer about how to define and set the variables would also be well-appreciated.Roddy

[iwato]

Did you take a look at this tutorial?

Yes, I am already familiar with it.Thank you for your suggestion.Roddy

[ShadowMage]

What do you mean incorporate it? Create a PHP variable and assign it to your elements:

if (is_string($value)) {   $className = "classOne";   echo '<tr><th class=\''.$className.'\'>' . $key . '</th><th>' . $value . '</th></tr>';} else {   $className = "classTwo";   list($param_key, $param_value) = each($value);   echo '<tr><th class=\''.$className.'\'>' . $key . '</th><th>' . $param_key . ': ' . $param_value . '</th></tr>';   while (list($param_key, $param_value) = each($value)) {   echo '<tr><th></th><th>' . $param_key . ': ' . $param_value . '</th></tr>';						}

[justsomeguy]

You really only need a class or ID on the table element, you can style everything else from that. Even without that the CSS sheet can still use a selector like "table tr th" or "table tr td". That's what the tutorial demonstrates.

[Fmdpa]

If you just assign an ID to the table (or part of the table), then it is no different than writing it all out by hand as HTML. Take a look at the source code of the table you created, and you'll see what I mean. ShadowMage gave a good example of how to assign those ids/class-names. You could do it that method, or you could assign the same class to the <td> as a whole, then another to all <tr>s, etc. Then just reference those classes in CSS, and style them like any old table.

[ShadowMage]

You really only need a class or ID on the table element, you can style everything else from that. Even without that the CSS sheet can still use a selector like "table tr th" or "table tr td". That's what the tutorial demonstrates.

Right, unless you need to style a specific group of cells, like say you have a totals column and those values you need to have bolded. That would be difficult to do without using a class name.

[wirehopper]

I agree with justsomeguy - put an id on the table, and add classes only for those cells that require special styling.There was a state park camping reservation system that had a massive table full of inline style attributes. The page was 300K. Once they cleaned up the HTML, it was 100K. This was back when 1M was considered high-speed. The point is that with dynamic tables, it is easy to generate more code than you need.

[ShadowMage]

If you just assign an ID to the table (or part of the table), then it is no different than writing it all out by hand as HTML. Take a look at the source code of the table you created, and you'll see what I mean.

I didn't see your post before, Fmdpa. It is actually better than writing it all out by hand (and by that I assume you mean inline styling). Consider this:<table id='main_table'><tr><td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td></tr><tr><td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td></tr></table>Obviously, that's a lot of work to style with inline styles (or even a class name on all the td's). But, like jsg said, you can target all those cells with one line in your CSS:#main_table tr td {font-size: 12pt;}Now all td's within #main_table will have 12 pt font.

[iwato]

<table id='main_table'>#main_table tr td {font-size: 12pt;}Now all td's within #main_table will have 12 pt font.

Great summary!Thanks to everyone!Roddy

[boen_robot]

The best method to style a table probably depends on the kind of appearance you're after, and I never gathered what's that.For anything more weird, generating appropriate class attributes on the appropriate cells is the only good way.For some standard stuff, like coloring every n-th row, there's the :nth-child() selector, but keep in mind that it doesn't work with IE8 and below, as well as older versions of other browsers (but who cares about them? Everyone has upgraded already).

[iwato]

What do you mean incorporate it? Create a PHP variable and assign it to your elements:

if (is_string($value)) {   $className = "classOne";   echo '<tr><th class=\''.$className.'\'>' . $key . '</th><th>' . $value . '</th></tr>';} else {   $className = "classTwo";   list($param_key, $param_value) = each($value);   echo '<tr><th class=\''.$className.'\'>' . $key . '</th><th>' . $param_key . ': ' . $param_value . '</th></tr>';   while (list($param_key, $param_value) = each($value)) {   echo '<tr><th></th><th>' . $param_key . ': ' . $param_value . '</th></tr>';						}

Yes, customized classname variables for individual rows and/or cells that require special formatting.Got it! Many thanks!Roddy

[Fmdpa]

I didn't see your post before, Fmdpa. It is actually better than writing it all out by hand (and by that I assume you mean inline styling). Consider this:<table id='main_table'><tr><td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td></tr><tr><td>cell 1</td><td>cell 2</td><td>cell 3</td><td>cell 4</td></tr></table>Obviously, that's a lot of work to style with inline styles (or even a class name on all the td's). But, like jsg said, you can target all those cells with one line in your CSS:#main_table tr td {font-size: 12pt;}Now all td's within #main_table will have 12 pt font.

If I would have been thinking a bit harder, that's how I would have done the CSS (instead of applying individual ids and classes to the table elements like I originally suggested). I guess my original post wasn't clear enough. I was trying to explain to Roddy that structurally, the dynamic table is basically just like a hand-written HTML table, when all is said and done. P.S. I try to avoid inline styles as much as possible!