sepoto Posted February 11, 2011 Share Posted February 11, 2011 For some reason the last table does not line up with those above it although I feel like it should. I am copy pasting this framework which really outlines things well I think. I'm trying to figure out why the last table seems to be coming up short: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd"><html><head><title>Dating Guru</title><style> body { background-image: url(/imgindex/background.png); width: 1000px; margin-left: auto; margin-right: auto; border-style: solid; border-color: black; border-width: 1px; } th { overflow: hidden; } td { overflow: hidden; }</style></head><body><div align="center"><h2>Saturday Night Dating Guru</h2></div><br><div align="right">Login | Sign Up</div><br><table width="1000px" height="400px" style='table-layout: fixed' border="1px" cellspacing="0" cellpadding="0"><col width="200px"><col width="600px"><col width="200px"><tr><td height="50%"></td><td height="50%" rowspan="2"></td><td height="50%"></td></tr><tr><td height="50%"></td><td height="50%"></td><td height="50%"></td></tr></table><br><div align="center">Hot Box</div><br><table width="1000px" height="300px" style='table-layout: fixed' border="1px" cellspacing="0" cellpadding="0"><col width="200px"><col width="600px"><col width="200px"><tr><td></td><td></td><td></td></tr></table><table width="1000px" height="100px" style='table-layout: fixed' border="1px" cellspacing="0" cellpadding="0"><col width="200px"><col width="600px"><col width="200px"><tr><td></td><td></td><td></td></tr></table><table align="center" width="600px" height="100px" style='table-layout: fixed' border="1px" cellspacing="0" cellpadding="0"><tr><td height="50px"></td></tr><tr><td height="50px"></td></tr><tr><td height="50px"></td></tr><tr><td height="50px"></td></tr></table></body></html> Link to comment Share on other sites More sharing options...
cousineaug Posted February 11, 2011 Share Posted February 11, 2011 Table arithmetic is complicatedthe border between cell 1 and cell 2 is outside the width of the cell but table align center does not seem to allow for that and you wind up a pixel off.Using the current layout try this definition for the last table <table width="602px" height="100px" style='table-layout: fixed; margin-left:200px;' border="1px" cellspacing="0" cellpadding="0"> make the table 2 wider to allow for the outside border which is on the RIGHT of the cellinstead of asking to center, you know column 1 is 200px wide so set a left margin of 200pxto get rid of the double borders, look up border-collapse on this websitethen you will need to adjust for 1px border on the last table.but why use tables for formatting when CSS is so much more precise and flexible? see recent article in this forum entitled page layout by jnf555.a bunch of boxes arranged in tabular fashion without a table element in the whole thing...cheers...Guy Link to comment Share on other sites More sharing options...
WebStudent73 Posted February 11, 2011 Share Posted February 11, 2011 hmmm.... it aligns perfectly on my pc.... Link to comment Share on other sites More sharing options...
cousineaug Posted February 11, 2011 Share Posted February 11, 2011 hmmm.... it aligns perfectly on my pc....hmmm I did not do any cross browser checking. I am using Chrome how about everyone else?probably all the more reason to use divs instead of tables.Also another thought if you must use tables. Rather than close the table and reopen later why not just make one big table and use colspan to make the wider portions? I know browsers tend to be slow at rendering large tables but it would simplify the alignment issues.Guy Link to comment Share on other sites More sharing options...
dsonesuk Posted February 11, 2011 Share Posted February 11, 2011 one problem you should be aware off is<tr><td height="50%"></td><td height="50%" rowspan="2"></td><td height="50%"></td></tr><tr><td height="50%"></td><td height="50%"></td><td height="50%"></td></tr>if the top row is rowspaning 2 rows, you should not have more than 2 td cells in the next, one of these has to be Terminated. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.