Styling fonts within a table - Follow up to  ChrisStanyon's recently answered question

Rowby Goren
Rowby Goren used Ask the Experts™
on
Hi ChrisStanyon,

This is a follow up to your recent solution at  http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27726281.html#a38004827

Here's my test page again:

http://rowbytesting.com/

BTW I have temporarily turned on the white table borders so we can see how things are progressing.  I will turn off those borders -- or at least turn the color to black when it is all finished.

Now that the table seems to behaving pretty well (I fixed the widths of the columns to match the width of the table etc.  There are some font styling that is still needed.

This is going to be a template for similar pages so I want the client to have it as easy as possible when he replaces the content.  

First issue is even though the line heights were set in the style, I see where some of the columns that I have typed in the rows have become taller.

(BTW I have added some checkmarks -- but they are individual graphics.  Not to be confused with the checkmark graphics in the background image.  The final background image will have all the embedded text content removed, including the checkmarks that are embedded in the graphic.  Whew!  That was a long BTW!)

CURRENT CSS CODE:
/* Rowby additions below  FOR ROWBY TESTING */

#microSD_wrapper { background: url(/images/experts-exchange-blank.png) no-repeat; position:relative; width 932px; height: 657px; }                                           
#microSDTable { position:absolute; top: 50px; left:20px; } 
#microSDTable { width: 896px; } 
#microSDTable { font: helvetica; color: #ffffff; } 

#microSDTable tbody { font: helvetica; font-size: 200px; color: #ffffff; }
#microSDTable table, th, td {border: 1px solid white; }
#microSDTable { border-collapse:collapse; }	
#microSDTable {line-height: 15px; }
#microSDTable th { background: none; } 
#microSDTable .col1 { width: 200px; }	
#microSDTable .col2 { width: 116px; }
#microSDTable .col3 { width: 116px; }
#microSDTable .col4 { width: 116px; }
#microSDTable .col5 { width: 116px; }
#microSDTable .col6 { width: 116px; }		
#microSDTable .col7 { width: 116px; }
#microSDTable th { font-weight:bold; text-align:left; }
#microSDTable td { font-size:12px; }
#microSDTable tfoot td { color: #9dc445; }
#microSDTable td { text-align:center; }
#microSDTable td.leftalign { text-align:left; }
#microSDTable h2 { text-align:left; color: #9dc445; font: helvetica;  font-weight:bold; font-size: 14px; }

Open in new window


Current HTML

<div id="microSD_wrapper">
	<table id="microSDTable">
		<colgroup>
			<col class="col1" />
			<col class="col2" />
			<col class="col3" />
			<col class="col4" />
			<col class="col5" />
			<col class="col6" />
			<col class="col7" />
		</colgroup>
		<thead>
			<tr>
				<th colspan="7">
					&nbsp;&nbsp;&nbsp;</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<h2>
						Form Factor</h2>
				</td>
				<td>
					Body 2</td>
				<td>
					Body 3</td>
				<td>
					Body 4</td>
				<td>
					Body 5</td>
				<td>
					Body 6</td>
				<td>
					Body 7</td>
			</tr>
			<tr>
				<td>
					<h2>
						Speed Class Rating</h2>
				</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<p>
						Devices</p>
				</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<p>
						Cameras</p>
				</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<p>
						Camcorders</p>
				</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<p>
						Mobile Devices</p>
				</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<p>
						Smart Phones</p>
				</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<p>
						DSLR Cameras</p>
				</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						PERFORMANCE SPECS</h2>
				</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					<img alt="" src="images/checkmark8.png" /></td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>
					foot 1</td>
				<td>
					foot 2</td>
				<td>
					foot 3</td>
				<td>
					foot 4</td>
				<td>
					foot 5</td>
				<td>
					foot 6</td>
				<td>
					foot 7</td>
			</tr>
		</tfoot>
	</table>
</div>
<h3>
	&nbsp;</h3>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Author

Commented:
Also I am thinking of making the background image a part of the table's background again.  

That would really "lock" things in.  Now that the table is at least the same height as the background that seems to make sense to me.  Less chance of the table accidentally being moved a pixel here or there in  future edits by client-- messing things up.

Would that be a way to go?
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Hey again :)

Your line-heights are working the way they should, but the extra height is coming from a margin added to the P tags. You have wrapped some of your text in a P element and line 38 of screen.css adds a 1.5em margin to the bottom of P, so table cells are 15px high plus 1.5em. Either remove the P tags or set the margin to 0.

#microSDTable p { margin-bottom:0px; }

As for setting the background image on the table, just add a background property to your #microSDTable rule instead of the #microSD_wrapper div.

One other thing to note - not really a problem, just best-practice.

In your template CSS file, you have several rules for the #microSDTable containing one property. It makes sense to have one rule containing several properties. So instead of:

#microSDTable { position:absolute; top: 50px; left:20px; } 
#microSDTable { width: 896px; } 
#microSDTable { font: helvetica; color: #ffffff; } 
#microSDTable { border-collapse:collapse; }	
#microSDTable { line-height: 15px; }

Open in new window

It should be:
#microSDTable {
   position:absolute;
   top: 50px;
   left:20px;
   width: 896px;
   font: helvetica;
   color: #ffffff;
   border-collapse:collapse;
   line-height: 15px;
}

Open in new window

Author

Commented:
Ah yes!

Give me some time and I'll implement your solutions...  and report back!

Rowby
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
Looking good.

http://www.rowbytesting.com

Because the background image is now a part of the table, the first column needs to have, ideally by default, some padding/margin on the left before the text starts.

Some of the text in the first column has some "tab" indentions, but that issue can be handled "later".

Also I suppose I can get rid of  the div microSD_wrapper  and its css #microSD_wrapper???

BTW I'm learning a lot as you show me how to do this!

Rowby
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Couple of ways to pad your first column, depending on the content. As it stands at the moment, you could add a left padding to #microSDTable h2 because the only text that sits to the left are the H2s.

#microSDTable h2 { padding-left: 10px; }

If you need to add padding to the cells, then you could add a class to the first column cells cells and apply the padding through that. Because your other text in the first column is centred, you might want to add the padding to the left and right, otherwise it won't look centred.

A third way is to use a pseudo class to select the first TD of each TR in the TBODY!

#microSDTable >tbody>tr>td:first-child { padding: 0px 5px; }

And yes, if you no longer need the wrapper for the background image, then I guess it's safe to remove.

Author

Commented:
Hi,

Coming along.

As I populate the table with text, I am confused why the line heights are getting taller as I enter text.  

http://rowbytesting.com/

There are no  p's in the content.  Can I add something to the css.  Or did I accidentally delete line height somewhere in the css -- perhaps it's a cascading issue?

Also there is a line with one long (merged cell)  It has the text "Red Series", "Blue Series" and "Compact Flash".   I would like that text to be flush left, 14 px.   Then I can manually space it where I want each text to go. Yes, not very elegant, but I think that would work best for that particular row -- especially when it is "cloned" to other pages.

Here's my current css

/* Rowby additions below  FOR ROWBY TESTING */

#microSD_wrapper {  position:relative; width 937px; height: 657px; }                                           
#microSDTable { position:absolute; top: 50px; left:20px; } 
#microSDTable { width: 937px; } 
#microSDTable { font: helvetica; color: #ffffff; } 

#microSDTable tbody { font: helvetica; font-size: 12px; color: #ffffff; }
#microSDTable table, th, td {
	border: 1px solid white; 
	}
#microSDTable p { margin-bottom:0px; }

#microSDTable {
 background: url(/images/experts-exchange-blank.png) no-repeat; 
border-collapse:collapse; 
line-height: 15px; 
}

#microSDTable .col1 { width: 200px; }	
#microSDTable .col2 { width: 122px; }
#microSDTable .col3 { width: 122px; }
#microSDTable .col4 { width: 122px; }
#microSDTable .col5 { width: 122px; }
#microSDTable .col6 { width: 122px; }		
#microSDTable .col7 { width: 122px; }
#microSDTable th { background: none; } 
#microSDTable th { font-weight:bold; text-align:left; }
#microSDTable td { font-size:12px; }

#microSDTable td { text-align:center; }
#microSDTable td.leftalign { text-align:left; }
#microSDTable tfoot td { color: #9dc445; }
#microSDTable >tbody>tr>td:first-child { padding: 0px 25px; }
#microSDTable h2 { text-align:left; color: #9dc445; font: helvetica;  font-weight:bold; font-size: 24px; }
#microSDTable h3 { text-align:left; color: #9dc445; font: helvetica;  font-weight:bold; font-size: 14px; }
#microSDTable h4 { text-align:left; color: #ffffff; font: helvetica;  font-weight:normal; font-size: 14px; }
#microSDTable h5 { text-align:left; color: #ffffff; font: helvetica;  font-weight:normal; font-size: 14px; padding: 0px 20px; }

Open in new window

Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Hey rowby,

It looks like all the Ps have been removed but the reason you're getting extended row heights is the same principle as mentioned previously.

You are now using H3 and H5 in your first column and these have a bottom margin set in your screen.css (lines 33 and 35). Add margin-bottom:0px to the rules for these 2 elements:

#microSDTable h5
#microSDTable h3

Author

Commented:
Thanks, that "fixed" the line height issue.

It is quite amazing what control css has -- if you know how to take advantage of its subtleties.

After considering the mess I started with -- I would say this page is really shaping up thanks to your help.

There is a line with one long (merged cell)  It has the text "Red Series", "Blue Series" and "Compact Flash".   I would like that text to be flush left, 14 px.   Then I can manually space it where I want each text to go. Yes, not very elegant, but I think that would work best for that particular row -- especially when it is "cloned" to other pages.
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Yeah - everything that makes a site look good is usually done with CSS, but initially it can give you headaches. Once you get it though, it does all make sense.

If you haven't already, download and install the firebug plugin for firefox. It makes all this and more a whole lot easier.

Add a class to the row and then style the TD within that row.

<tr class="left">
<td colspan="7">Red Series&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Blue Series &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; Compact flash</td>
</tr>

#microSDTable tr.left td { text-align:left; }

As for spacing it using &nbsp - not ideal! You may be better off colspanning your TDs across 2 columns and leaving the text centred.

<tr>
   <td>&nbsp;</td>
   <td colspan=2>---Red Series---</td>
   <td colspan=2>---Blue Series---</td>
   <td colspan=2>---Compact Flash---</td>
</tr>

Open in new window

Author

Commented:
Putting in those 3 columns did the trick.  Thanks  And no need for that center css, because all text is centered by default.

I think I am 99 percent finished.

One thing is I want by default all text to be 14 helvetica bold centered -- unless otherwise overrules.

Can you double check my css for that.

Current CSS:

/* Rowby additions below  FOR ROWBY TESTING */

                                     
#microSDTable { position:absolute; top: 50px; left:20px; } 
#microSDTable { width: 937px; } 
#microSDTable { font: helvetica; color: #ffffff; } 

#microSDTable tbody { font: helvetica; font-size: 12px; color: #ffffff; }
#microSDTable table, th, td {
	border: 1px solid white; 
	}
#microSDTable p { margin-bottom:0px; }

#microSDTable {
 background: url(/images/experts-exchange-blank.png) no-repeat; 
border-collapse:collapse; 
line-height: 15px; 
}

#microSDTable .col1 { width: 217px; }	
#microSDTable .col2 { width: 120px; }
#microSDTable .col3 { width: 120px; }
#microSDTable .col4 { width: 120px; }
#microSDTable .col5 { width: 120px; }
#microSDTable .col6 { width: 120px; }		
#microSDTable .col7 { width: 120px; }
#microSDTable th { background: none; } 
#microSDTable th { font-weight:bold; text-align:left; }
#microSDTable td { font-size:12px; }

#microSDTable td { text-align:center; }
#microSDTable td.leftalign { text-align:left; }
#microSDTable tfoot td { color: #9dc445; }
#microSDTable >tbody>tr>td:first-child { padding: 0px 25px; }
#microSDTable h2 { text-align:left; color: #9dc445; font: helvetica;  font-weight:bold; font-size: 24px; margin-bottom:0px }
#microSDTable h3 { text-align:left; color: #9dc445; font: helvetica;  font-weight:bold; font-size: 14px; margin-bottom:0px }
#microSDTable h4 { text-align:left; color: #ffffff; font: helvetica;  font-weight:normal; font-size: 14px; margin-bottom:0px }
#microSDTable h5 { text-align:left; color: #ffffff; font: helvetica;  font-weight:normal; font-size: 14px; padding: 0px 20px; margin-bottom:0px 

Open in new window

Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
You can set the size and weight in several places, but the most generic place is probably within #microSDTable td.

#microSDTable td { font-size: 14px; font-weight:bold; }

That will force some of your text (Compact Flash, for example) to wrap over 2 lines, forcing the row heights to change, so you might want to leave it at 12px;

Looking good :)

Author

Commented:
Getting almost finished

Now I want the white borders to be invisible.

#microSDTable table, th, td {
      border: 1px solid white;
      }

I can't change the color to black because of some grey background.  I need to keep the same 1 px width, but basically have NO color.

Suggestion,

Thanks
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Set it to transparent

#microSDTable table, th, td {
      border: 1px solid transparent;
      }

Also, your rule should say

#microSDTable table, #microSDTable th, #microSDTable td

otherwise it will style the #microSDTable, plus ALL th elements and ALL td elements throughout your site.

Author

Commented:
Great!

I would say it's 99.9 perfect.  (I need to make a minor adjustment on the graphic itself to align the column with the blue header so it fits behind the column a little better, but that's nothing to do with this question.

Can you give me a final style to center the image on the page?

Then I will award you the points!!

Rowby
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
You've still got the absolute positioning in place from when you had it sat inside the DIV.

#microSDTable {
    left: 20px;
    position: absolute;
    top: 50px;
}

remove that and you should be good to go :)

Author

Commented:
AH

Fixed that.

Now one thing that may not be fixable.

Look at the first column

4GB
and
32 GB

Are both not flush left.  They are not quite aligned with the other gb's to the left.

I looked at the HTML and I don't see any extra spaces.

Nothing major but I want to make sure I am not missing anything in that left column to ensure that they are all flush left.

They are all Heading 5's.

Could just be the quirk of the browser, but thought I would ask you about that since the rest is PERFECT!

Rowby
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Unfortunately that's not fixable with CSS. It's down to the font itself. When I look at it is looks like the 16 and 128 aren't quite flush - a number 1 doesn't sit quite as flush left as say a number 8 or number 6. If it really bothers you, you could try using a different font - some look better than others. I'm only seeing it in Arial because I don't have Helvetica Neue installed.

You've also got 4GG in the first column, instead of 4GB !

Author

Commented:
Thanks I'll  fix that typo.

Client wants Helvetica.  So I will explain that to them.  Maybe for compatibility should I  tell him Arial would be better?

One "final" thing.  

I would like to move the table lower.  That is because of the column with the blue header.

The problem is more noticeable on the live site.

Is there a way to force everything in the table aprox 5 pixels lower, while keeping the table's background image the same.

That will position the word "Class Four" better within the blue area.   The problem is more noticeable in the live site and I would rather fix it with CSS if possible rather than make a change in the graphic .
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
You could effectively move the content down by adding a height to the TR in the THEAD section, as that isn't used for any content.

#microSDTable thead tr { height: 30px; }

Although your client wants Helvetica Neue, the only people that will see that font are those that have it installed on their systems. It isn't considered a standard font, so only a small percentage may have it.

Unless your client is particularly savvy about fonts, they probably wouldn't even notice the difference between Arial and Helvetica :)

There are ways to 'embed' fonts so that your site will display the correct font to everyone. The method I use is Google Fonts - http://www.google.com/webfonts

Author

Commented:
Thanks!<br /><br />Moving it all to the live site!<br /><br />Looking great.  I appreciate your patience and expert css skills.<br /><br />Looking at my original question and all that was done from a miserable layout to perfection -- your continued help was above and beyond!<br /><br />Thanks<br /><br />Rowby
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
No worries. Good luck with it.

Signing off for a long weekend now :)

Author

Commented:
Hee hee!   You deserve it.!!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial