How do I increase the width of a column in an HTML table?
Solution 1
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>
or
<TABLE BORDER="2" CELLPADDING="2" CELLSPACING="2" WIDTH="100%">
<TR>
<TD WIDTH="25%">Column 1</TD>
<TD WIDTH="75%">Column 2</TD>
</TR>
</TABLE>
Solution 2
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?
Ashley
I went to school for graphic design and have been doing freelance work for the past 4+ years. In that time I did several websites for clients and taught myself web design. I recently got a job as a web designer and look forward to fine-tuning my skills.
Updated on July 09, 2022Comments
-
Ashley almost 2 years
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 - $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>