inline css inside php output - html

Question

I have a table I want to add a vertical-align to:
$output = '<style type="text/css">div.bar-container {border: 1px solid #ccc; width: 150px; margin: 2px 5px 2px 17px; padding: 3px; float: left; background: white; position:relative; border-radius: 4px;}div.bar-container div {background-color: #ff7021; height: 12px;}div.bar-container span {width:140px;text-align:center;float:left;font: normal 9px Arial,sans-serif;margin-top: 0px;}</style>
<span style="text-align: left"><h2>Control</h2></span><br />
' . $htmlarray["clientkeyautherror"] . '
<table width="100%" height="450px" cellspacing="0" cellpadding="0" class="frame">
<tr><td style="border:none">
<table width="100%" height="450px" border="0" cellpadding="10" cellspacing="0">
' . $htmlarray["displaystatus"] . '
' . $htmlarray["bandwidthbar"] . '
' . $htmlarray["memorybar"] . '
' . $htmlarray["hddbar"] . '
' . $htmlarray["buttons"] . '
' . $htmlarray["ips"] . '
' . $htmlarray["graphbutton"] . '
</table>
</td>
</tr>
</table>
';
return $output;
}
I need to add a vertical-align: middle; to the html array attributes such as memorybar. Can anyone show me how I would do this in the above example? Thanks!
I've tried this:
' "<div style='vertical-align:middle;'>" . ' . $htmlarray["displaystatus"] . ' . "</div>" '
but got the beautiful white page of death.

Answer 1

You can always put a class on the objects you want to affect or use :nth-child selector. For example like this, with using a class named 'middle' and the 1st child:
.middle{
vertical-align: middle;
background: green;
}
.frame td:nth-child(2){
background: brown;
vertical-align: middle;
}
Example in jsfiddle.
Also: Avoid using inline styles. It's bad practice.
EDIT1: Explanation on inline styles.
Consider the following:
Every character you insert, makes your page bigger, thus slower.
'style='vertical-align:middle' = 29 extra chars.
class='midtd' = 13 charts
that's a 16 char difference.
.midtd{vertical-align:middle;} = 30 chars.
if you need to apply the style to a single <td> inline yields 29 total chars, class yields 43 chars.
if you need to apply the style to 2 <td>s inline yields 58 total chars, class yields 56 chars.
if you need to apply the style to 3 <td>s inline yields 87 total chars, class yields 69 chars. And for every extra td, the difference grows bigger.
so if you need to apply it to more than 1 td, class is better than inlines, in terms of page size. It seems laughable but believe me you will thank me for this one at some point in your life ;).
Also, if you need to apply the style to an entire column, let's say the 2nd column, it costs you .frame td:nth-child(2){vertical-align:middle;} or 46 chars, independent of the amount of table rows.
In other words, nth-child is by far lighter than most solutions, but it is not suitable for random cells (let's say, you want to apply the style to the 3rd and the 5th cell on row 1, but only on the 4th cell on row 2, and like that the order is determined by server logic instead of a pater inside the table) for which the class method is by far lighter then inlines. And you can apply the same class to unlimited amount of elements.
this, and also, there is a great deal of people who think of your page less if it has 1 or 2 inline styles floating around.