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

Creating 7 column CSS with text centered in columns -- over one background image

I suppose I could figure this out by myself, but I would like to use best css practicesto do this correctly.

I have a background image that is in a div that I want to layer 7 columns of text over  it.  As you can see by the attached image, each column has text that is centered or in some cases flush left.  In some cases there is a graphic check mark in the column instead of text.

All of the "body" fonts will be  Helvetica   regular or bold and will be white.   And they would all be 12 px.

Also there are some "headers" such as the words "Form Factor" "Devices" etc., that need the fonts to be larger and the font color "green".  Those fonts would all be 15px Bold Helvetica  

And then, as you can see in the image
:
Column 1 is flush left....
There is some text in Column 1 that needs to be indented approx 15 px.  But further down the column the text is flush left and is not indented.

For consistency in your suggestions let's call each column "col1", "col2", "col3"
Headers would be called "headers"
The white text would be called "whitebody"
The background image can be called "background22"

Because there is so much type in such tight spaces in this mockup I need control over line height, padding, etc.

Any suggestions will be appreciated!

Thanks,

Rowby

Mockup, including background image
CSS

Avatar of undefined
Last Comment
Rowby Goren

8/22/2022 - Mon
Rowby Goren

ASKER
I read somewhere for columns like these it is sometimes best to use tables and then style the individual cells.  

Any thoughts on that for this particular situation?
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
Thanks  I will try the table solution and report back here.

Rowby
Rowby Goren

ASKER
Hi ChrisStanyon.

Looking good.  Thanks:

Here's my test server:

http://rowbytesting.com/

How can I tell the table to be the same height and width of the background image.    Also to keep the background image from repeating.

Here is my html:

<div id="masterSKU">
<div id="microSD_bgImage">
<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>Head1</th><th>Head2</th><th>Head3</th><th>Head4</th><th>Head5</th><th>Head6</th><th>Head7</th></tr>
</thead>
<tbody>
<tr>
<td>Body 1</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>
</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>
</div>

Open in new window


Here is my css:

/* Rowby additions below  FOR ROWBY TESTING */


#microSDTable { background: url('http://rowbytesting.com/images/experts-exchange-blank.png') }
#microSDTable .col1 { width: 250px; }
#microSDTable .col2 { width: 150px; }
#microSDTable .col3 { width: 150px; }
#microSDTable .col4 { width: 150px; }
#microSDTable .col5 { width: 250px; }
#microSDTable .col6 { width: 150px; }
#microSDTable .col7 { width: 150px; }
#microSDTable th { font-weight:bold; text-align:left; }
#microSDTable td { font-size:12px; }
#microSDTable tfoot td { color: green; }

Open in new window

<div id="masterSKU">
<div id="microSD_bgImage">
<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>Head1</th><th>Head2</th><th>Head3</th><th>Head4</th><th>Head5</th><th>Head6</th><th>Head7</th></tr>
</thead>
<tbody>
<tr>
<td>Body 1</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>
</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>
</div>

Open in new window

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Rowby Goren

ASKER
if it is not possible (and/or not platform compatible in modern browsers) to have a background image in a table that is full height, then I suppose I could layer the table on top of a separate background image (not a part of the table).

If that's a better solution then I would need the css etc to precisely position the table on top of the image.  

Any help with that anyone?

Thanks

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
Thanks for that info, ChrisStanyon --

I will pay close attention to the widths of the various columns, as you indicated.

To resolve the height issue, should I not make the image a built-in background of the table -- and instead just make it a regular background image -- and the layer the table over it in its own div?

If you agree with that, then what would be the most browser compatible way to position the table div inside the parent div -- "static", "absolute" fixed" "relative" -- it would need to look good in today's modern browsers (ie (going back to  version7?), firefox,chrome -- and the various popular macs browsers.

Thanks

Rowby
Rowby Goren

ASKER
Frim what i'm reading in a css book  absolute positioning seems tbe way to go - if i am going to position a table over a regular background image.

Any thoughts ?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Chris Stanyon

You can do it like that if you like. Create a DIV, set a background image, and then put the table in that DIV. Set the position of the DIV to relative and the position of the table to absolute and tweak until it's positioned right.

//HTML
<div id="wrapper">
   <table id="yourTable">
      <tr>
         <td></td>
      </tr>
   </table>
</div>

//CSS
#wrapper { background: url(yourImage.jpg) no-repeat; position:relative; }
#yourTable { position: absolute; top 20px; left: 50px; }

Open in new window

Rowby Goren

ASKER
Sounds good.    I'll try it and report back.
Rowby Goren

ASKER
Looking good.  

How do I force the background image to be its original height and width.
Here's what I have so far in my css

#microSD_wrapper { background: url(/images/experts-exchange-blank.png) no-repeat; position:relative; }

Open in new window


The height of the image is  657px
The width of the image is 937px

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

ASKER
Hmmm...

I can't understand why in firebug I am not seeing the css for microSDtable.  I only see the  "microSD_wrappe" wrapper in firefox -- on the firebug "Style" panel.....

 / * Rowby additions below  FOR ROWBY TESTING */

#microSD_wrapper { background: url(/images/experts-exchange-blank.png) no-repeat; position:relative; 
}

#microSDTable .col1 { width: 150px; }
#microSDTable .col2 { width: 150px; }
#microSDTable .col3 { width: 150px; }
#microSDTable .col4 { width: 150px; }
#microSDTable .col5 { width: 150px; }
#microSDTable .col6 { width: 150px; }
#microSDTable .col7 { width: 150px; }
#microSDTable th { font-weight:bold; text-align:left; }
#microSDTable td { font-size:22px; }
#microSDTable tfoot td { color: green; 
}]

Open in new window



HTML:
<h2>Below is the table with its background so far:</h2>
<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>Head1</th><th>Head2</th><th>Head3</th><th>Head4</th><th>Head5</th><th>Head6</th><th>Head7</th></tr>
</thead>
<tbody>
<tr>
<td>Body 1</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>
</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>  Below is the sample mockup of how I want it to look:</h3>
<p><img src="images/rowby-4 experts-exchange2.png" border="0" alt="" /></p>

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
Hi

In order for me to do the overall absolute positioning for the table, don't I need to have a "style" for the #microSDtable table too?    Not just the elements within it?
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,

Great.  That did it.  Now I will do some work on it and get back to you again :)!

I think I will have questions for styling individual "cells" and perhaps "columns" so far as text size and color etc.   Based on the mockup below the blank image background I am working on


Thanks

Rowby
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rowby Goren

ASKER
BTW should I use the "border-collapse" property on the table?
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.
Chris Stanyon

Re: border-collapse. It probably makes styling things easier if you do.
Rowby Goren

ASKER
It may not look like much:

http://www.rowbytesting.com

But I am starting to get the hang of it.

One question.  What is causing the top cell (with the "Head1" "Head2" etc to have a blue background.   Or alternatively what can be done to make it transparent.

Rowby
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Rowby Goren

ASKER
Hmmm   Looks like the blue is from system.css  

head th {
    background: none repeat scroll 0 0 #C3D9FF;

Open in new window

Chris Stanyon

The blue comes from the screen.css (line 63). You can override this in your template.css by setting the background to none (line 149)

#microSDTable th { background: none; }
Rowby Goren

ASKER
Hi

Looks  like I am getting it all now.  I may have some questions, but I think I know what to do now.

Thanks for your patience and truly EXPERT help.

Rowby

P.S.  Who knows , in 10 min I may have another question!
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Rowby Goren

ASKER
Already I have another question.

And that is how to handle line heights in the table, so I can line up the text with the background image as closely as possible.

Table rows (by themselves in the old way of doing tables) have a way of getting taller etc.  I want the line height -- and I assume the row heights-- to be completely controlled by the css.

Rowby
Rowby Goren

ASKER
I had  my css set to show the border of the table and the cells.  

Somehow I lost that.    (I  will of course turn the border colors off but for now I need it for guidance.

Here's my current css

#microSD_wrapper { background: url(/images/experts-exchange-blank.png) no-repeat; position:relative; width 937px; height: 657px; }                                           
#microSDTable { position:absolute; top: 50px; left:20px; } 
#microSDTable table, th, td }
 border: 1px solid white; }
#microSDTable border-collapse:collapse; }	
#microSDTable th { background: none; } 
#microSDTable .col1 { width: 150px; }	
#microSDTable .col2 { width: 150px; }
#microSDTable .col3 { width: 150px; }
#microSDTable .col4 { width: 150px; }
#microSDTable .col5 { width: 150px; }
#microSDTable .col6 { width: 150px; }		
#microSDTable .col7 { width: 150px; }
#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-weight:bold; font-size: 14px; }

Open in new window

Rowby Goren

ASKER
Nevermind.  I had the {  }  wrong :)
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
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

Looking good (almost): :)

http://www.rowbytesting.com

When I add text to the first column, for whatever reason it widened that column.

Is there any way to absolutely force the columns not to budge -- at least when the text included does not push the columns.

As you can see, the text I entered in the first column has very few letters -- yet it "pushed" the column to the right over quite a bit.

Rowby
Rowby Goren

ASKER
BTW if you feel this overall question has been answered, and these additional questions are beyond the range of the initial question, I will be happy to open a follow up question where we discuss the issues of font styling etc within this table.  And award you your points for this question.   It's been going on for some time!!

Rowby
Rowby Goren

ASKER
Here's the current css:
/* Rowby additions below  FOR ROWBY TESTING */

#microSD_wrapper { background: url(/images/experts-exchange-blank.png) no-repeat; position:relative; width 937px; height: 657px; }                                           
#microSDTable { position:absolute; top: 50px; left:20px; } 
#microSDTable { width: 900px; } 
#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: 85px; }	
#microSDTable .col2 { width: 50px; }
#microSDTable .col3 { width: 30px; }
#microSDTable .col4 { width: 30px; }
#microSDTable .col5 { width: 50px; }
#microSDTable .col6 { width: 46px; }		
#microSDTable .col7 { width: 46px; }
#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


Here's the current html:
<h2>
	Below is the table with its background so far:</h2>
<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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; Red Series&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; Blue Series&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; Compact Flash &nbsp;&nbsp;&nbsp;&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>
					Test</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						Devices</h2>
				</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						Cameras</h2>
				</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						Camcorders</h2>
				</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						Mobile Devices</h2>
				</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						Smart Phones</h2>
				</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</td>
			</tr>
			<tr>
				<td>
					<h2>
						DSLR Cameras</h2>
				</td>
				<td>
					&nbsp;</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>
					&nbsp;</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>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</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>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</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>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</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>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</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>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</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>
			<tr>
				<td>
					&nbsp;</td>
				<td>
					&nbsp;</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>
			<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

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Chris Stanyon

The reason your columns are not matching your CSS is because of the maths :)

Your table is set to be 900px wide, but if you add up the widths you've set for your columns, they only add up to 337px (85+50+30+30+50+46+46), so the browser automatically adds the extra width to the columns to make up the 900px. To avoid this, make sure your column widths add up to match the table width.

I think we probably have exhausted this question (and several others), so it makes sense to close it off and ask more specific questions if needed.

Looks like you're getting there though :)
Rowby Goren

ASKER
Thanks.  I will post the follow up question in a few minutes