Standard fixed table width

Question

Is there a standard method for calculating fixed width values for tables in HTML? Right now, I'm working on formatting tables on a web page to be a fixed width, I have a table that's within another table, when testing the page in IE I notice that the alignment of the colon is off as the second picture below illustrates. My intention is to make sure the colons are properly aligned as they are in Firefox and was just curious if the misalignment was due to the settings in the HTML or if it has more to do with how the browser renders the page.

Firefox:

Internet Explorer:

UPDATE:

Sorry for not providing any reference code, here's a snippet of the particular section I'm working with.

<div style="width: 1600px; text-align: center; position: absolute; top: 10%; left: 0%;">
    <span id="labelInstructions" style="font-size: xx-large;">PAGE TITLE <br><br></span>
    <table style="width: 1000px;" align="Center" border="0">
        <tbody>
            <tr>
                <td style="width: 1000px;"><label for="FileUpload1" style="font-size: x-large;">ENTER: </label><input name="FileUpload1" id="FileUpload1" size="70%" type="file"></td>
            </tr>
            <tr>
                <td style="width: 1000px;"><span id="fileUploadError" style="color: Red; font-size: medium;"><br><br></span></td>
            </tr>
            <tr>
                <td style="width: 1000px;">
                <table style="width: 1260px;" border="0">
                    <tbody>
                        <tr>
                            <td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE INSTRUCTIONS:</td>
                            <td style="font-size: x-large; width: 1800px;" align="left" valign="top">INSTRUCTION 1<br>INSTRUCTION 2<br></td>
                        </tr>
                        <tr>
                            <td></td>
                        </tr>
                        <tr>
                            <td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE EXAMPLE:</td>
                            <td style="font-size: x-large; width: 1800px;" align="left" valign="top">EXAMPLE 1<br>EXAMPLE 2<br><br></td>
                        </tr>
                    </tbody>
                </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

I know it's ugly, just a note, this is an ASP.Net generated webpage and I'm setting the attributes of the HTML elements pro-grammatically from the code behind. I sorta inherited this and my employer wants to keep major changes to a minimum.

UPDATE 2:

When I adjust the inner table width I can get it to align in IE when set to 1377px. For Firefox, the sweet spot for alignment is 1260px.

Answer 1

Sorry for not directly answering to your question, but...

Stoneage is over! You really shouldn't use Tables for layouting-purposes, as they are hardly-accessible for disabled people and make your HTML-File way too big (in relation to the content).

Seperate Content and Layout, use CSS .

Answer 2

All you have to do is make the table columns the same width as each other.

Example of style:

table tr td:first-child { background-color:yellow; width:200px; }

HTML:

<table>
  <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr>
  <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr>
  <tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr>
</table>

Answer 3

Make sure to place the the parts that you want to align together in one table.

<table id="layout">
    <tr><td>HEADER</td>
    <tr><td>
        <table id="form">
            <tr><td>LABEL</td><td>INPUT FIELD</td></tr>
            <tr><td>LABEL</td><td>INPUT FIELD</td></tr>
            <tr><td>LABEL</td><td>INPUT FIELD</td></tr>
        </table>
    </tr>
    <tr><td>FOOTER</td>
</table>

Answer 4

i would create two classes, left and right and apply the left class to the <td> on the left and the right class to the <td> on the right. the left class would be something like

.left{width:100px; text-align:right;}

heres an example