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

Rowby Goren
Rowby Goren used Ask the Experts™
on
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
Comment
Watch Question

Do more with

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

Author

Commented:
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?
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
A lot of people shy away from using tables because a while back they were used for layout and this was frowned upon. Unfortunately people tend to shy away from tables altogether. Tables should be used for tabular data, which in your case is the correct thing to do.

You should use the correct tags for your table, and then style them using CSS.

<table id="myTable">
	<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>

Open in new window

//CSS
#myTable { background: url(yourImage.jpg);
#myTable .col1 { width: 250px; }
#myTable .col2 { width: 150px; }
#myTable .col3 { width: 150px; }
#myTable .col4 { width: 150px; }
#myTable .col5 { width: 250px; }
#myTable .col6 { width: 150px; }
#myTable .col7 { width: 150px; }
#myTable th { font-weight:bold; text-align:left; }
#myTable td { font-size:12px; }
#myTable tfoot td { color: green; }

Open in new window

Author

Commented:
Thanks  I will try the table solution and report back here.

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:
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

Author

Commented:
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
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Hi Rowby,

To make sure you background doesn't repeat, simply add no-repeat to the background property. You can also add properties for the width and height here as well.

#microSDTable { 
    background: url('http://rowbytesting.com/images/experts-exchange-blank.png') no-repeat;
    width: 937px;
    height: 657px; 
}

Open in new window


Be careful though - you are setting a width on the table and on the columns. At the moment, your background image is 937px wide, so I'm guessing you want to set your table to that width as well. The CSS you've posted sets the column widths (col1 to col7) and collectively they add up to way more than 937px.

As an example, you currently set your Col1 to a width of 250px, but as soon as you add a width to the table it will automatically resize to something like 180px. Because this is automatic you can't guarantee consistency, so just make sure your maths add up :)

Height might also be an issue depending on how many rows your table has, how much content, line-height, font-size etc.

Author

Commented:
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

Author

Commented:
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 ?
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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

Author

Commented:
Sounds good.    I'll try it and report back.

Author

Commented:
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

Author

Commented:
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

Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
If your image is 937px by 657px wide, then you will need to set your wrapper div to this size as well. Unlike a normal image, a background image won't force the element to resize. You need to do that yourself.

microSD_wrapper { background: url(/images/experts-exchange-blank.png) no-repeat; position:relative; width 937px; height: 657px;
}

Open in new window

Also, the CSS you've posted above doesn't contain any styling for the #microSDtable table - only elements within it - .col1, .col2, th, td, tfoot td etc, so the table won't show any styling in firefox. If you select a TH or TD you will see the styling for those elements.

Author

Commented:
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?
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Yes, you do, but the code you posted doesn't have any styling for the table. You need a rule for the table - something like the following:

#microSDTable { position:absolute; top: 0px; left:0px; }

That will set the table to be positioned in the top, left corner of the wrapper div.

Author

Commented:
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

Author

Commented:
BTW should I use the "border-collapse" property on the table?
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Your best bet is to style the generic elements first and then add classes to the elements that differ. In the case of your mockup, it would make sense to style all TDs as text-align:center, and add a class of 'leftalign' to the few that need left-aligning. For your green headings, it may make sense to have these as Headings (H1, H2, H3 etc) and style accordingly.

#microSDTable td { text-align:center; }
#microSDTable td.leftalign { text-align:left; }
#microSDTable h2 { color:green; font-weight:bold; font-size: 15px; }


<tr>
     <td class="leftalign"><h2>My Green Heading</h2></td>
     <td>other Data</td>
     <td>more Data</td>
     <td>more Data</td>
</tr>


.
Most Valuable Expert 2018
Distinguished Expert 2018

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

Author

Commented:
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

Author

Commented:
Hmmm   Looks like the blue is from system.css  

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

Open in new window

Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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; }

Author

Commented:
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!

Author

Commented:
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

Author

Commented:
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

Author

Commented:
Nevermind.  I had the {  }  wrong :)
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
You use the line-height property. Again, you can set this for generic elements or specific elements, so you could set a general line-height on the whole table:

#microSDTable { line-height: 25px; }

and then target specific elements:

#microSDTable th { line-height: 50px; }

Line-height effects the text within a cell, which by default will also force the row height. As an alternative you can set a height for the rows directly:

#microSDTable tr { height: 50px; }

Author

Commented:
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

Author

Commented:
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

Author

Commented:
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

Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
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 :)

Author

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

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