How do I increase the width of a column in an HTML table?_问答_开发者

How do I increase the width of a column in an HTML table?

Below is my code. I am trying to get the second <td> tag in each row to expand so that there is more space between the input text box (1st <td> tag) and the name of the cookie and it's price (3rd <td> tag). Any ideas?

<!--Order Info. table -nested table 2 -->
<!--This is the first nested table within the main table -->
        <table border="0" width="65%" cellpadding="2">
        <!--Row 1 -->
                <tr>
                    <th colspan="3" align="left">Order Information</th>
                </tr>
        <!--Row 2 -->   
                <tr>
                    <td>QTY</td>
                    <td colspan="15"></td>
                    <td>Subtotal</td>
                    <td colspan="90"><input name="Gift Wrapping" id="Gift Wrapping" type="checkbox" /> Gift wrapping? (Additional charge of 1.95 per box)</td>
                </tr>
        <!-- Row 3 -->  
                <tr>
                    <td><input name="quantitya" id="quantitya" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Chocolate Nut - $10.99</td>
                    <td><input name="subtotala" id="subtotala" size="10" type="textbox" value="0"/></td>
                    <td colspan="40">If yes, note the text for the gift card:</td>
                </tr>
        <!-- Row 4 -->  
                <tr>
                    <td><input name="quantityb" id="quantityb" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Chocolate Chip - $9.99</td>
                    <td><input name="subtotalb" id="subtotalb" size="10" type="textbox" value="0"/></td>
                    <td colspan="5"><textarea wrap="soft" name="giftcardtext" id="giftcardtext" rows="3" cols="20" ></textarea></td> 
                </tr>
        <!--Row 5 -->
                <tr>
                    <td><input name="quantityc" id="quantityc" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Macadamia Nut - $12.99</td>
                    <td><input name="subtotalc" id="subtotalc" size="10" type="textbox" value="0"/></td> 
                </tr>
        <!--Row 6 -->
                <tr>
                    <td><input name="quantityd" id="quantityd" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Oatmeal Raisin - $10.99</td>
                    <td><input name="subtotald" id="subtotald" size="10" type="textbox" value="0"/></td> 
                </tr>
        <!--Row 7 -->
                <tr>
                    <td><input name="quantitye" id="quantitye" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Chocolate Dessert - $开发者_JS百科10.99</td>
                    <td><input name="subtotale" id="subtotale" size="10" type="textbox" value="0"/></td></td>
                    <td>Shipping:</td>
                    <td colspan="30"></td>
                    <td colspan="150">$5.95 for 1-5 boxes, $10.95 for five or more boxes</td>
                </tr>
        <!--Row 8 -->
                <tr>
                    <td><input name="quantityf" id="quantityf" size="3" type="textbox" value="0"/></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Butter - $7.99</td>
                    <td><input name="subtotalf" id="subtotalf" size="10" type="textbox" value="0"/></td></td>
                    <td>Total:</td>
                    <td colspan="30"></td>
                    <td colspan="1"><input name="totala" id="totala" size="3" type="textbox" value="0.00" /></td>
                </tr>
        <!--Row 9 -->
                <tr>
                    <td colspan="0"></td>
                    <td colspan="4"></td>
                    <td colspan="11" align="left">Subtotal</td>
                    <td><input name="subtotalg" id="subtotalg" size="10" type="textbox" value="0" /></td></td>
                </tr>
        </table>

You can do it in pixels or as a percentage:

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="300">
<TR>
<TD WIDTH="100">Column 1</TD>
<TD WIDTH="200">Column 2</TD>
</TR>
</TABLE>

<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD WIDTH="25%">Column 1</TD>
<TD WIDTH="75%">Column 2</TD>
</TR>
</TABLE>

You would give the column a width, either using inline styles

<td style="width: 50%">

or, better, in a style sheet

td.column1 { width: 50% }
....
<td class="column1">
....

You can also specify padding for space between columns

td.column1 { padding-right: 64px }

by the way, the varying huge colspan values look very weird. What are they supposed to achieve?

If you need more space between table columns, you can use CSS margin/width properties with any value suitable for you. I would highly discourage including html visual formatting in your html code, albeit if you do, take the time to learn the meaning of some html properties, as "colspan" does not specify the width between tds, but combines them into one td.

<td style="width: 100px;">Cell data here</td>

Replace the number with whatever width you want. Note that the columns will be the max size throughout the table. So if column 2 is 200px in row 1 and 300px in row 2, the column will end up being 300px in all rows.

After you resolve the colspan issue that Jared Updike brought up, I'd check out using CSS and increasing the values for padding-left and padding-right.