HTML/CSS Table Question

[Carson]

Hey everyone! 🙂

I'm currently working on building and coding a web community, and design (unlike the server-side programming part of it) is not exactly my forte. But, if you want a decent site, I think you should have it look nice.

Anyway, I am creating an options bar using a table and I'd like the width of each cell to be the same regardless of how much text is put into each cell. I've tried a couple of things, such as using the width parameter in HTML and the width declaration in CSS -- both do not work.

If it helps, I included the code. The CSS is split into two files, the first the global CSS file and the second the local CSS file.

HTML:

<table align="left" border="0" width="100%" cellspacing="0" cellpadding="0" >
	<tbody>
    	<tr>
        	<td>
        		<table id="boards_options_bar"align="left" cellspacing="0" cellpadding="0">
                	<tr valign="middle" align="center">
                    	<td valign="middle" height="32px">Index</td><td>Hot Topics</td><td>Auto Boards</td><td>Report Problem</td>
                    </tr>
                </table>
            </td>
         </tr>
     </tbody>
</table>

CSS that applies to it:

body {
	/* background-image: url(../images/backgrounds/kirby_2.png); */
	background-repeat: no-repeat;
	background-position: top left;
	background-color: #EDD;
	
	margin: 140px 20px;
	margin-bottom: 20px;
	
	color: #FFF;
	
	font-family: Arial, Tahoma, Verdana, "Trebuchet MS", Sans-Serif, Georgia, Courier, "Times New Roman", Serif;
	font-size: 13px;
}

table, td {
	/* vertical-align: top; */
	font-size: 13px;
}

#boards_options_bar td {
	width: auto;
	background-image: url(../images/object_bgs/board_options_bg_off.png);\
	vertical-align: middle;
	text-shadow: #000;
	font-size: 14px;
	padding-left: 3px;
	padding-right: 5px;
	border: thin #666 solid;
}

I almost Googled it for the quick solution, but I have a lot of time on this project and I figured I might as well test the knowledge of the FP community. 😉

Thanks,
Carson

 

[Cosmic]

Just set the <td> width to whatever percentage you like, that should work. try using 10%, for example. I am best at server side stuff to, so I may be wrong.

 

[Carson]

Yeah, as I said, I tried the HTML parameter. Also tried adding one to the entire table that way the individual cells had an overall width to comply to. Still didn't work in the Dreamweaver Live Browser or Firefox.

 

[Carson]

Problem solved. Tried what I tried before, but removed the "width: auto" from the CSS. That was creating the problem.