CSS Table Width

Even if you use CSS exlusively to control your layouts, there may be times where an HTML table is still required (for example, to present tabular data). You can still use CSS to control the table width, borders, background and other properties.

To use CSS to control the table width, use the CSS width property. For example:

Code
<table style="width:400px;">

If you're using an embedded style sheet or external style sheet, table width can be declared there too - just call its class. For example:

Code
HTML Code (for your HTML document): <table class="wide-table"> CSS Code (for your style sheet): table.wide-table { width:100%; }

Examples

Here are some examples of tables with different widths.

Code	Result
<table style="width:90%;" border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>	Cell 1 Cell 2 Cell 3 Cell 4

Code	Result
<table style="width:50%;" border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>	Cell 1 Cell 2 Cell 3 Cell 4

Code	Result
<table style="width:150px;" border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>	Cell 1 Cell 2 Cell 3 Cell 4

Code	Result
<table style="width:100px;" border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>	Cell 1 Cell 2 Cell 3 Cell 4

You can also use the CSS table-layout property to make larger tables load faster.

For more on tables, check out the HTML Table Tutorial and the HTML Table Generator.

Enjoy this page?

2. Link to this page (copy/paste into your own website or blog):
   <a href="http://www.quackit.com/css/css_table_width.cfm">CSS Table Width</a> from Quackit.com
3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!