Quackit Logo
HTML
CSS
Scripting
Database
Hosting
Design
XML

Print Version

CSS Table-layout

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

Example code:

<table style="table-layout:fixed;width:600px;">
  <tr height="30">
    <td width="150">CSS table layout cell 1</td>
    <td width="200">CSS table layout cell 2</td>
    <td width="250">CSS table layout cell 3</td>
  </tr>
</table>

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 website?

  • Share
  • Add this page to your Favorites
  • Link to this page (copy/paste into your own website or blog):
  • Link to Quackit using one of these banner ads.
  • Help support Quackit by making a donation

Oh, and thank you for supporting Quackit!

© Copyright 2000 - 2010 Quackit.com