PDA

View Full Version : Newbie need help with tables


lew26
10 Jan 2007, 06:53 PM
Hello,

The problem i am having with webdesign is working with the table. For an example i created a image place holder one for the header and one for the logo. Logo 100w x 100ht and the Header 640w x 100ht whne i add the two the cells that they are placed in expands so the height become more than the height i need which i want it to be the size of the picture so if i have content below it it looks funny in the browser how to i get the cells to be the same size as the image?

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<table width="895" height="430" border="1">
<tr>
<th scope="col"><img src="" alt="logo" name="Logo" width="100" height="100" id="Logo" /></th>
<th colspan="2" scope="col"><img src="" alt="header" name="Header" width="640" height="100" id="Header" /></th>
</tr>
<tr>
<th height="192" scope="row">&nbsp;</th>
<td colspan="2">&nbsp;</td>
</tr>
</table>
</body>
</html>
Wickham
11 Jan 2007, 03:49 AM
Table cells always expand as far as they can and allocate cell widths or heights in proportion.

You have images 100px and 640px wide totalling 740px but your table is 895px wide so the cells create space around the images.

If you reduce the table width to 740px the extra space will disappear, but the lower cells also become only 740px wide in total.

The same happens with the height; your table is 430px high; the lower th cell is 192px high leaving 430-100-192=138px remaining space which is allocated in proportion 100:192 to the top and lower cells which means about 1/3 of 138 to top height and 2/3 of 138 to the bottom height which shows as padding above and below the images.

So there are two options.

If you reduce the height of the table to 100+192=292px then the top th row will be 100px high and the bottom row will stay as 192px but the whole table will be shorter.

Or leave the table height as 430px and edit the bottom th cell height to height="330" (the images will set the height of 100px for the top th cells and the remainder is 330px).

A third option is to leave the table as 430px high and add height="100" to the top th cells and delete the height="192" from the lower th cell. This works in Firefox but not in IE7 so ignore this.

It is a good idea to add cellpadding="0" to the table as most browsers add a small 2px default padding.

You have used th for some cells instead of td. Remember that this usually makes text bold and centralised in most browsers.


<table width="895" height="430" border="1" cellpadding="0">
<tr>
<th scope="col"><img src="100x100.jpg" alt="logo" name="Logo" width="100" height="100" id="Logo"/></th>
<th colspan="2" scope="col"><img src="" alt="header" name="Header" width="640" height="100" id="Header" /></th>
</tr>
<tr>
<th scope="row" height="330">&nbsp;</th> <!--was height="192"-->
<td colspan="2">&nbsp;</td>
</tr>
</table>