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

HTML Code

HTML code viewed within an HTML document:

<table border="2" cellpadding="2" cellspacing="2" width="200">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Browser View

HTML coding viewed through a web browser:

Set HTML Table Width as a Percentage

HTML Code

HTML code viewed within an HTML document:

<table border="2" cellpadding="2" cellspacing="2" width="50%">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

Browser View

HTML coding viewed through a web browser:

Set HTML Table Column Width in Pixels

HTML Code

HTML code viewed within an HTML document:

<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

HTML coding viewed through a web browser:

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%.

HTML Code

HTML code viewed within an HTML document:

<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

HTML coding viewed through a web browser:

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

HTML Code

HTML code viewed within an HTML document:

<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

HTML coding viewed through a web browser:

You can learn much more about HTML tables within the HTML Tutorial section.

This concludes the Creating an HTML Mouseover Text Description code.