I have a table that I am trying to code for a header for a website. The basic format is below ____________________________ |____|_________________|____| |__________________________ | |_________|________|________| I think this really relates to 5 columns since the two rows with three columns are different sizes I have tried coding this as <tr> <td> </td> <td colspan=3> </td> <td> </td> </tr> <tr> <td colspan=5> </td> </tr> <tr> <td colspan=2> </td> <td> </td> <td colspan=2> </td> </tr> Anyone know why this isn't working correctly? The column spans don't seem to be working in the table. Any help would be greatly appreciated! Thanks!
It looks fine, are you sure it doesn't work? Try the below to see the columns' spacing. <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td colspan="3"> </td> <td> </td> </tr> <tr> <td colspan="5"> </td> </tr> <tr> <td colspan="2"> </td> <td> </td> <td colspan="2"> </td> </tr> </table>
Your code is correct. You'll need to specify td's width to get the look you want, however. Here's the sample code: <html> <head> <style> <!-- td { background: #eee; text-align: center; border: solid 1px white; } --> </style> </head> <body> <table cellspacing=0 width=100%> <tr> <td width=25%>a1</td> <td width=50% colspan=3>a2</td> <td widt=25%>a3</td> </tr> <tr> <td width=100% colspan=5>b</td> </tr> <tr> <td width=33% colspan=2>c1</td> <td width=33%>c2</td> <td width=33% colspan=2>c3</td> </tr> </table> </body> HTML:
Thanks for the help everyone, glad that I'm on the right track at least. I simplified it a bit since I thought the problem was in that part of the table, but maybe not. Here is the actual table __________________________________ | | |__|_____________|__| | | | |___________________| | |_|_|______|_____|______|_| I have coded it as follows: <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center"> <tr> <td rowspan="3" width="152"> <img src="styles/media/media/header_logo.gif" /></td> <td rowspan="3" style="background-image:url(styles/media/media/header_fill.gif);"> </td> <td width="9" > <img src="styles/media/media/header_top_left.gif" /></td> <td width="443" colspan="3" > TEST </td> <td width="9"><img src="styles/media/media/header_top_right.gif" /></td> <td width="14" rowspan="3"><img src="styles/media/media/header_right.gif" /></td> </tr> <tr> <td height="61" width="461" colspan="5" style="background-image:url(styles/media/media/header_between.gif);"> </td> </tr> <tr> <td width="158" colspan="2"> <img src="styles/media/media/header_dealscanner.gif" border="0" /> </td> <td width="163"> <img src="styles/media/media/header_outletscanner.gif" border="0" /> </td> <td width="140" colspan="2" > <img src="styles/media/media/header_forums.gif" border="0" /> </td> </tr> </tr> </table> <!-- /logo --> HTML: The <td rowspan="3" style="background-image:url(styles/media/media/header_fill.gif);"> </td> lines column I would like to have fluid, so that if the user resizes the window, it will still take up the correct percentage. So I didn't specify a width for that one, however, I did try it and it didn't seem to make a difference. Attached is what I am getting: No matter what size I put in for the test column, it always lines up with the left side of the third image in the bottom row. Thanks again for all of the help!
In the case of this complicated layout, I would suggest you to use 2-level table (nested). I usually have the same problem with both rowspan and colspan in the same table. It's difficult to debug. Just add outer table with 4 columns and put the inner table in the third column should do the trick.
did u get it right yet? i think a nested table shoud do the trick. the code is perfect for the design as of now.
Thanks again for the suggestions, I did try a nested table, and I had the same results. However, when I specified five individual TDs for the middle row, things started looking up. The banner renders perfectly in firefox now, but IE displays it messed up at the top and the bottom. See the attached image for the example. If I shrink the middle column in the internal table, the it displays fine, but then the buttons aren't at the top and bottom anymore. I've tried setting the height of the individual TDs to 61, and that didn't work, so I tried setting the TR height to 61 but that didn't work as well. Also, I found that if I change the cellpadding (which is set to 0) I can make the problem worse (the bars on the top and bottom get bigger), and it will happen in Firefox as well. The code is below: <table align="center" border="0" cellpadding="0" cellspacing="0" width="95%"> <tbody><tr style="background-image: url(styles/media/media/header_fill.gif);"> <td width="291"> <img title="DealScans" src="styles/media/media/header_logo.gif" alt="DealScans"></td> <td width="100%"> </td> <td height="30" width="475"> <table align="center" border="0" cellpadding="0" cellspacing="0" width="475"> <tbody><tr> <td width="9"> <img src="styles/media/media/header_top_left.gif" alt=""></td> <td colspan="3" width="443"> TEST </td> <td width="9"><img src="styles/media/media/header_top_right.gif" alt=""></td> <td rowspan="3" width="14"><img src="styles/media/media/header_right.gif" alt=""></td> </tr> <tr style="height: 61px;"> <td width="9"></td> <td width="149"></td> <td width="163"></td> <td width="131"></td> <td width="9"></td> </tr> <tr> <td colspan="2" width="158"> <img title="DealScanner" src="styles/media/media/header_dealscanner.gif" alt="DealScanner" border="0"> </td> <td width="163"> <img title="OutletScanner" src="styles/media/media/header_outletscanner.gif" alt="OutletScanner" border="0"> </td> <td colspan="2" width="140"> <img title="Forums" src="styles/media/media/header_forums.gif" alt="Forums" border="0"> </td> </tr> </tbody></table> </td> </tr> </tbody></table> HTML: This was more work than I ever imagined, but it's somewhat fun Thanks again!
Alright, I've started to get a bit frustrated with it now! If someone has a few extra minutes and wants to fix it for me so that it works, I'll send you a bit of paypal, say $5?
smitts, It seems that all you need is to put an image in each TD. If that's the case, you can use ImageReady CS (comes with PhotoShop, I believe) to do the table things for you. If you designed your graphic with PhotoShop, you can transfer it to ImageReady, use slice tool to cut graphic in pieces. You can then save the page as html. ImageReady will give you a nice html tables with proper images. It will work on all popular browsers. If you don't have the ImageReady, or need something more sophisticated, PM me the URL of the page you're working on. I'll take a quick look to see if I can fix it.
It looks like the problem is actually something within the inner table. When I open the code for just the inner table in IE, there is actually (it looks like 1px) of whitespace between the three rows. I have no idea why that would be happening though... This looks to be causing the background for the entire table to expand to fit these rows, and that's why there's the extra lines on the top and bottom.