CSS Table-layout

Use the table-layout property to make your tables load much faster.

Example code:

Code	Result
<table style="table-layout:fixed;width:150px;" border="1"> <tr> <td style="width:70px;">Cell Contents</td> <td style="width:80px;">Cell Contents</td> </tr> <tr> <td style="width:70px;">Cell Contents</td> <td style="width:80px;">Cell Contents</td> </tr> </table>	Cell Contents Cell Contents Cell Contents Cell Contents

You will notice the benefits more on large tables. The reason this makes tables load faster is because with traditional HTML, the browser had to calculate every cell before finally rendering the table. When you set the table-layout algorithm to fixed however, it only needs to look at the first row before rendering the whole table. This means that your table will need to have fixed column widths and row heights.

Check out the table-layout example

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-layout.cfm">CSS Table-layout</a> from Quackit.com
3. Link to Quackit using one of these banner ads.

Thanks for supporting Quackit!