Jump to content

The Styling of Dynamically Created Tables


iwato
 Share

Recommended Posts

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

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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>';						}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

<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
Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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
Link to comment
Share on other sites

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! :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...