Avatar of Rowby Goren
Rowby Goren
Flag for United States of America asked on

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

Hi ChrisStanyon,

This is a follow up to your recent solution at  https://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

CSS

Avatar of undefined
Last Comment
Rowby Goren

8/22/2022 - Mon
Rowby Goren

ASKER
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?
SOLUTION
Chris Stanyon

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Rowby Goren

ASKER
Ah yes!

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

Rowby
Rowby Goren

ASKER
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
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER CERTIFIED SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rowby Goren

ASKER
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

SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rowby Goren

ASKER
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.
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rowby Goren

ASKER
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

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rowby Goren

ASKER
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
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rowby Goren

ASKER
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
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rowby Goren

ASKER
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
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
SOLUTION
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rowby Goren

ASKER
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 .
Chris Stanyon

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
Rowby Goren

ASKER
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
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Chris Stanyon

No worries. Good luck with it.

Signing off for a long weekend now :)
Rowby Goren

ASKER
Hee hee!   You deserve it.!!