td widths, not working?

Question

So I have this code here:

<table>     <tr>         <td width="200px" valign="top">             <div class="left_menu">                 <div class="menu_item">                     <a href="#">Home</a>                 </div>             </div>         </td>         <td width="1000px" valign="top">Content</td>     </tr> </table> 

with the CSS

.left_menu {     background: none repeat scroll 0 0 #333333;     border-radius: 5px 5px 5px 5px;     font-family: Arial,Helvetica,sans-serif;     font-size: 12px;     font-weight: bold;     padding: 5px; }  .menu_item {     background: none repeat scroll 0 0 #CCCCCC;     border-bottom: 1px solid #999999;     border-radius: 5px 5px 5px 5px;     border-top: 1px solid #FFFFCC;     cursor: pointer;     padding: 5px; } 

It works fine on my browser and I have tested it in every browser both mac and PC, but someone is complaining that the td with the width of 200 keeps changing width. I have no idea what he is talking about. Does anyone know why he or she is seeing the width change on the td?

Answer 1

It should be:

<td width="200"> 

or

<td style="width: 200px"> 

Note that if your cell contains some content that doesn't fit into the 200px (like somelongwordwithoutanyspaces), the cell will stretch nevertheless, unless your CSS contains table-layout: fixed for the table.

EDIT

As kristina childs noted on her answer, you should avoid both the width attribute and using inline CSS (with the style attribute). It's a good practice to separate style and structure as much as possible.

Answer 2

Width and/or height in tables are not standard anymore; as Ianzz says, they are deprecated. Instead the best way to do this is to have a block element inside your table cell that will hold the cell open to your desired size:

<table>     <tr>         <td valign="top">             <div class="left_menu">                 <div class="menu_item">                     <a href="#">Home</a>                 </div>             </div>         </td>         <td valign="top" class="content">Content</td>     </tr> </table> 

CSS

.content {     width: 1000px; }  .left_menu {     background: none repeat scroll 0 0 #333333;     border-radius: 5px 5px 5px 5px;     font-family: Arial,Helvetica,sans-serif;     font-size: 12px;     font-weight: bold;     padding: 5px;     width: 200px; }  .menu_item {     background: none repeat scroll 0 0 #CCCCCC;     border-bottom: 1px solid #999999;     border-radius: 5px 5px 5px 5px;     border-top: 1px solid #FFFFCC;     cursor: pointer;     padding: 5px; }