Fixed vs. Dynamic HTML Table Width

There are two ways in which the table/cell width in HTML pages can be defined:

Fixed: Width is defined in pixels
Dynamic: Width is defined in terms of percentage of space available

Consider the tables below. They look alike but are coded differently. The first uses fixed widths, the second dynamic widths.

Fixed Width Col1	Fixed Width Col2
Text in the 1st column	Text in the 2nd column

Dynamic Width Col1	Dynamic Width Col2
Text in the 1st column	Text in the 2nd column

When to use Fixed, when Dynamic?

Use fixed widths if you require pixel-by-pixel control of the table layout (such as if you have embedded a background image and want to place text at a specific position).

A downside of fixed widths is inflexibility – the table may not render correctly on all browser resolutions.

Dynamic is the way to go, so that the table is displayed appropriately whatever the browser resolution may be, neither getting truncated if the resolution is too small nor leaving extra whitespace if too large.

Table Width Problem With Windows Live Writer

If you use Windows Live Writer for blogging, you will notice that it allows specifying table dimensions in pixels only. To work around this limitation, you can edit the source code to change its dimensions to percentages. Here’s how:

1. Define the table structure in Edit mode as usual.

2. Go the the Source view of the post. Locate the portion that defines the table. It will look as below.

<table cellspacing="0" cellpadding="2" width="<strong>400</strong>" border="1">
<tbody>
<tr>
  <td valign="top" width="<strong>150</strong>"><strong>Col1</strong></td>
  <td valign="top" width="<strong>250</strong>"><strong>Col2</strong></td></tr>
<tr>
  <td valign="top" width="<strong>150</strong>">Text in the first column</td>
  <td valign="top" width="<strong>250</strong>">Text in the second column</td>
</tr>
</tbody>
</table>

3. Change the width values to percentages, as below.

<table cellspacing="0" cellpadding="2" width="<strong>98%</strong>" border="1">
<tbody>
<tr>
  <td valign="top" width="<strong>38%</strong>"><strong>Col1</strong></td>
  <td valign="top" width="<strong>62%</strong>"><strong>Col2</strong></td></tr>
<tr>
  <td valign="top" width="<strong>38%</strong>">Text in the first column</td>
  <td valign="top" width="<strong>62%</strong>">Text in the second column</td>
</tr>
</tbody>
</table>

4. That’s it! You’re done.

A word of caution: After changing to percentages, DO NOT tinker with the table/cell boundaries in the Edit view! If you do that, all your hard work will be lost – the dimensions will go back to their fixed pixel definitions. Put in percentages only after you are sure you will not change the table structure anymore in the Edit view.