Table Cell Widths

I want to have two tables, one above the other on the page.

I have the tables setup, and all the cells have the same with as the cell above it in the above table, but the cells never seem to line up correctly.  It seems like the cell width is dependent on the specified with and whether or not it is populated with a Bitmap or not.  I can almost get the cells to line up if the width of the empty cell, if the width is equal to the with of the other cell plus the width of the bitmap that it has in it.

Any help is appreciated..





sidwelleAsked:
Who is Participating?
 
dwkdConnect With a Mentor Commented:
just copy and paste my code above on your page and delete all the color stuff..
another i wanna point out to you is that your table in the sanpshot is 91px wide and your code contains 4 columns each 25px => so minimum you need 100px
0
 
G_HCommented:
Can you show us some code?

I think your issue maybe that some cells are of a defined width, but the content is stretching some of them.

GH
0
 
sidwelleAuthor Commented:
Take a look and view the attached Snip in IE.


<table border="0" width="100">
			<tr>
				<td width="25">&nbsp;</td>
				<td width="25">&nbsp;</td>
				<td width="25" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
				<td width="25">&nbsp;Test 01</td>
			</tr>
			<tr>
				<td width="25">&nbsp;</td>
				<td width="75" colspan=3>

					<table border="0" width="100%">
						<tr>
							<td width="25">&nbsp;</td>
							<td width="25" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
							<td width="25">&nbsp;Test 03</td>
						</tr>
						<tr>
							<td width="25">&nbsp;</td>
							<td width="25">&nbsp;</td>
							<td width="25">&nbsp;</td>
						</tr>
					</table>
				
				</td>
			</tr>
		</table>

Open in new window

0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
dwkdCommented:
the container for the second table is 75px so the width="100%" will be 75 pixels
and you can't fit 150px in 75px ..
0
 
dwkdCommented:
my bad ..i didnt see there were two rows in the second table ..disregard my comment
0
 
dwkdCommented:
by default tables have cellspacing 1
add cellspacing=0 and cellpadding=0 to each table
<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr>
				<td width="25">&nbsp;</td>
				<td width="25" style="background:red">&nbsp;</td>
				<td width="25" style="background:brown" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
				<td width="25" style="background:orange">&nbsp;Test 01</td>
			</tr>
			<tr>
				<td width="25">&nbsp;</td>
				<td width="75" colspan="3">

					<table border="0" width="100%" cellspacing="0" cellpadding="0">
						<tr>
							<td width="25" style="background:green">&nbsp;</td>
							<td width="25" style="background:blue" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
							<td width="25" style="background:yellow">&nbsp;Test 03</td>
						</tr>
						<tr>
							<td width="25">&nbsp;</td>
							<td width="25">&nbsp;</td>
							<td width="25">&nbsp;</td>
						</tr>
					</table>
				
				</td>
			</tr>
		</table>

Open in new window

0
 
sidwelleAuthor Commented:
I don't see that it solved the problem.

See my snap:
 Not linned up Not linned up
0
 
dwkdCommented:
well the word "Test" is a 26px word so the cell gets stretched of course to accomodate the word... just dont use Test .. use "T "
0
 
sidwelleAuthor Commented:
Adding a "div" to the cell helps alot.  the attached code does what I want, just a little messy.

<table border="0" width="100" cellspacing="0" cellpadding="0">
			<tr>
				<td width="25">&nbsp;</td>
				<td width="25">&nbsp;</td>
				<td width="25" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
				<td width="25">&nbsp;Te</td>
			</tr>
			<tr>
				<td width="25">&nbsp;</td>
				<td width="75" colspan=3>

					<table border="0" width="100%" cellspacing="0" cellpadding="0">
						<tr>
							<td width="25">&nbsp;</td>
							<td width="25" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
							<td width="25" nowrap ><div nowrap style="width: 25px; overflow:hidden;">&nbsp;Test 01</div></td>
						</tr>
						<tr>
							<td width="25">&nbsp;</td>
							<td width="25">&nbsp;</td>
							<td width="25">&nbsp;</td>
						</tr>
					</table>
				
				</td>
			</tr>
		</table>

Open in new window

0
 
sidwelleAuthor Commented:
Thanks for the help.

Sid.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.