HTML Table Column Widths

 

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:
html-line

<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:
html-line

column widths

Set HTML Table Width as a Percentage

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

column widths

Set HTML Table Column Width in Pixels

HTML Code

HTML code viewed within an HTML document:
html-line

<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:
html-line

column widths

 

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:
html-line

<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:
html-line

column widths

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:
html-line

<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:
html-line

column widths

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

This concludes the Creating an HTML Mouseover Text Description code.

 

 

 
Visit the following pages for a wealth of copy and paste codes and tips:

HTML Tips
Copy and paste special effect HTML codes for your web page.

HTML Codes
An HTML codes chart you can use to copy and paste codes into your web page.

HTML Color Codes
An HTML color codes chart you can use to copy and paste color codes into your web page.

JavaScript Codes
Copy and paste special effect JavaScript codes for your web page.

Web Design Tips
Tips, tricks, and special effect codes for your web page.

HTML Tags
A list of HTML tags.

HTML 5 Tags
A list of the latest HTML tags to be developed.

ASCII Codes
Special text characters and code for your web page.