HTML Table - width of cell
Hi,
I have this code:
Code:
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="62"><img src="../Site web/images/greenbar.png" width="62"></td>
<td style="background-image: url(../Site web/images/graybar.png); background-repeat:repeat-x;"></td>
</tr>
<tr>
<td colspan="2">This is my content</td>
</tr>
</table>
The problem I have is that I can't have my right-cell of the 1st row to expand the whole screen.
This table gives something like that
-----------
|..........|..|
-----------
|.............|
-----------
I want something to look like this:
-----------
|..|..........|
-----------
|.............|
-----------
The only size I know is the 1st row, 1st column cell image which is 62 px.
The 1st row, 2nd cell should resize depending of the browser/resolution.
If I remove the 2nd row, it works, but when I add the 2nd row, then I just can't put a fixed size to my first cell.
I hope it is clear.
Thank you.
Re: HTML Table - width of cell
Hi there dbelley_office,
Quote:
The problem I have is that I can't have my right-cell of the 1st row to expand the whole screen.
This only happens in IE, compliant browsers like Safari, Opera or Firefox handle the code correctly.
Of course, you should not be using tables for page layout, that is not their purpose.
Further reading:-
Here is a possible solution to your problem...
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
#container {
border:1px solid #000;
padding:2px;
}
#left {
width:62px;
height:62px;
border:1px solid #000;
float:left;
}
#left img {
width:62px;
height:62px;
display:block;
}
#right {
height:62px;
border:1px solid #000;
margin-left:66px;
background-image: url(../Site web/images/graybar.png);
}
#content {
border:1px solid #000;
margin-top:2px;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<div id="left"><img src="../Site web/images/greenbar.png" alt=""></div>
<div id="right"></div>
<div id="content">This is my content</div>
</div><!-- end #container -->
</body>
</html>
