How do I set specific widths for an HTML table layout?

Question

Hi everyone, I have a layout made in photoshop and I'm trying to slice it up and put it into a table layout. I'm trying to make a layout using a table that looks like this: http://imgur.com/eKndd.gif

but when I marked up the table all the widths of the cells seem to be incorrect and not what I want.

My markup is:

<table width="950" border="1">
  <tr>
    <td colspan="2" rowspan="3" width="268" height="251">rotating pic</td>
    <td colspan="2" width="682" height="150">banner</td>
  </tr>
  <tr>
    <td colspan="2" width= "682" height="48">top nav</td>
  </tr>
  <tr>
    <td width="404" height="54">filler</td>
    <td rowspan="2" width="278" height="533">right bar</td>
  </tr>
  <tr>
    <td width="191" height="479">left bar</td>
    <td colspan="2" width="481">content</td>
  </tr>
</table>

The cells need to be of specific width and height for the images, but when rendered none of the widths are correct. What am I doing wrong? Please help. Thanks.

Answer 1

Your heights are too high for the layout you are expecting, also for your banner, top nav and filler to be the same height, you actually have to make their height attributes the same...

Also, not to be a downer, but might I suggest not doing table based layouts? You should considering using CSS.

Answer 2

I see there are two possibilities

1) The images you are adding are not re-sized to the size which you want to fit into.

2) When adding images using tag try explicitly setting the height and width. Try this HTML IMAGE LINK TUTORIAL

IF you are new then try the layout using DIV, tables are old school way.

Answer 3

Layout is not function of HTML. That is what style sheets are for. With that said your code will be completely inaccessible. That means if your code is for any sort of business in the US or UK are wide open to discrimination lawsuits. In addition to accessibility failures your page code will be seriously bloated and will waste your bandwidth and your user's time.

My suggestion is do not use HTML for layout. Practice separation of markup and presentation. Do not use any attributes that have any sort of cosmetic purpose, such as: width, height, border, cellpadding, cellspacing, and so on.

Do your users a tremendous favor and do not use markup for presentation.

Answer 4

Can we see your code with images included? I would suggest taking out the heights and widths, putting the images in, and then playing around with heights/widths to get the to your liking. Your layout looks overly complicated. Could you go with a simpler 3 column layout and treat the whole header as one element?