Nathan Sokalski

I recently switched from ASP.NET 1.1 to ASP.NET 2.0. I'm not sure exactly why, but my HTML tables (which are just html tags, not server-side tags), are looking kind of strange. My table layout is as follows:

<table border="0" cellpadding="0" cellspacing="0" bgcolor="white" width="1000" align="center">
<tr><td colspan="3"></td></tr>
<tr valign="top" style="padding-top:15px;padding-bottom:15px;">
<td width="205" align="center"></td>
<td width="528" align="center"></td>
<td width="267"></td>
</tr>
<tr><td colspan="3"></td></tr>
</table>

The first row contains an img that is exactly 1000 pixels wide. The second row contains three columns, the first and third of which I want to be exactly 205 and 267 pixels wide, the second column should take up the remaining space (which should be 528 pixels). The third column seems to be ending up being too wide. I looked for a CSS property to fix this, but I could not find one. One thing that I did find was style="table-layout:fixed;" as seen on the following page:

http://www.w3.org/TR/REC-CSS2/tables.html#fixed-table-layout

However, if I understand correctly, this only looks at the width attribute if it is specified in the first row. This obviously won't work for my table because my first row spans all three columns. What do I need to do to make my table render with the widths that I specify Thanks.
--
Nathan Sokalski
njsokalski@hotmail.com
http://www.nathansokalski.com/


Re: Internet Explorer Web Development HTML tables, the width attribute, CSS, and ASP.NET 2.0

Stanley1271

Nathan,

Not sure if you have fixed this or not yet, but you should look into the XHTML Guidelines. Putting the attributes for your cells is obsolete and by default ASP.NET 2.0 Webforms use the XHTML markup. Below is a simple page using your width attributes in CSS that work fine in ASP.NET 2.0 Webforms.

<html>
<head>
<style type="text/css">
#cell1 {
background-color: green;
width:205px;
}
#cell2 {
background-color: red;
width:auto;
text-align:center;
}
#cell3 {
background-color: blue;
width:267px;
}
#row2 {
padding-top:15px;
padding-bottom:15px;
}
#longrow {
background-color:yellow;
}
table {
background-color:white;
width:1000px;
height:500px; /*added to show the table better*/
}
</style>

</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td colspan="3" id="longrow"></td></tr>
<tr valign="top" id="row2">
<td id="cell1"></td>
<td id="cell2"></td>
<td id="cell3"></td>
</tr>
<tr><td colspan="3"></td></tr>
</table>
</body>
</html>