Path = Home : Webmaster Resources : HTML Design Tips : How To Set Table Widths

How To Set Table Widths

 

The <table> tag is the HTML tag which is used to create a table on a web page.

You can set the width of the table width as a value (in pixels) or as a percentage of the page width (or column width if it is inside a table itself).

Seting a table width as a value

<table width="400" border="1" cellpadding="5" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>

This code will result in a table 400 pixels wide with two columns of equal width.

Column 1

Column 2

 

Setting a table width as a percentage

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

This code will result in a table which has a width of 80% of the width of the page with two columns of equal width.

Column 1

Column 2

Note that because this table is inside the table that we use for this page it is 80% of the width of the column.

 

Setting a column width as a value

You can set the widths of your columns to a fixed width.

<table width="460" border ="1" cellpadding="5" cellspacing="0">
<tr>
<td width ="300">Column 1</td>
<td width="160">Column 2</td>
</tr>
</table>

Column 1

Column 2

 

Setting a column width as a percentage

You can set the widths of your columns to a percentage of your page width.

<table width="80%" border ="1" cellpadding="5" cellspacing="0">
<tr>
<td width ="70%">Column 1</td>
<td width="30%">Column 2</td>
</tr>
</table>

Column 1

Column 2

Note that the two column widths total 100% not 80%