Your Guide to Professional
Web Site Design and Development

• HTML Tips
• HTML Codes
• Web Development		 • Web Design Tips
• JavaScript Codes
• 216 Web Safe Colors
 • CSS Tutorial
• JavaScript Tutorial
• ASCII Character Codes

Offering a guide to professional web site design, web page design and web design guidelines

| Web Site Development | HTML Codes | HTML Tips | Web Design Tips | Javascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial |

Setting HTML Table and Column Widths

The HTML TABLE tag is the opening tag used to create a table within a web page.

You can specify your HTML TABLE width as a set number value or use a percentage.

Set HTML Table Width in Pixels

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

Browser View:

Column 1 Column 2

Set HTML Table Width as a Percentage

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

Browser View:

Column 1 Column 2

Set HTML Table Column Width in Pixels

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

Browser View:

Column 1 Column 2

Set HTML Table Column Widths as a Percentage

In addition, you can set the widths of your TABLE columns to display your columns at a specific width. In the following example, the column widths are set to 50%.

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

Browser View:

Column 1 Column 2

In the following example, the first column width is set to 25% and the second column is set to 75%.

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

Browser View:

Column 1 Column 2

 More Web Design Tips