Table Layouts

August 6, 2009 at 7:01 pm 8 comments

The table-layout property lets you explicitly determine how you want the browser to layout a table. It has two values: auto (default) and fixed. Most people are more familiar with auto layout tables, which the browser resizes according to their content, their container size, and their CSS table settings. By contrast, the browser does not take the content into account when sizing a fixed layout table. FIxed-layout tables render more quickly because the browser only has to read up to the first row to start laying out the table. With auto-layout tables, the browser reads the entire table before starting to lay it out because some columns might have different width settings for different rows.

Auto Layout

This example is an auto layout table with auto width columns. These settings are defaults and are how the browser will lay out a table with no settings specified. The table height and width is determined by the content and the container, which in this case is the body page, because there are no table width, column width, or row height settings provided.

Note: Auto width tables use the width of the longest word in the column to determine the column’s minimum width.

<html><body>
<style type='text/css'>
 table,td{border: 1px solid black;}
 div{padding:10px; width: 200px; border: 1px solid #00008b;}
 *.autolayout{table-layout:auto;}
 *.auto{width:auto;}
</style>
<table class="autolayout">
<tr>
  <td class="auto">Row One, Column One</td>
  <td class="auto">Row One, Column Two</td>
</tr>
<tr>
  <td>Row Two, Column One</td>
  <td>Row two, Column Two</td>
</tr>
</table>
</body></html>

autolayout

This is an auto layout table with fixed-size columns, which sets the column widths not to their specified size, but to a proportion of the table’s total width that also accommodates the content. In this example, Column One and Column Two expand to contain the content on one line with Column Two twice the width of Column One.

<html><body>
<style type='text/css'>
 table,td{border: 1px solid black;}
 div{padding:10px; width: 200px; border: 1px solid #00008b;}
 *.autolayout{table-layout:auto;}
 *.col1{width:100px;}
 *.col2{width:300px;}
</style>
<table class="autolayout">
<tr>
  <td class="col1">100px wide</td>
  <td class="col2">300px wide</td>
</tr>
<tr>
  <td>Row Two, Column One</td>
  <td>Row Two, Column Two</td>
</tr>
</table>
</body></html>

autolayoutfixedcols

You can also specify column widths with percentages, which will set the columns to a percentage of the table width. If the total column percentages are less than 100%, the browser scales the percentages to equal 100%. In this example, Column One is 10% and Column 2 is 40%, so the table width scales to 100% of the container’s width and the Column One is one-quarter the width of Column Two.

<html><body>
<style type='text/css'>
 table,td{border: 1px solid black;}
 div{padding:10px; width: 200px; border: 1px solid #00008b;}
 *.autolayout{table-layout:auto;}
 *.p1{width:10%;} *.p2{width:40%;}
</style>
<table class="autolayout">
<tr>
  <td class="p1">10% wide</td>
  <td class="p2">40% wide</td>
</tr>
<tr>
  <td>Row Two, Column One</td>
  <td>Row Two, Column Two</td>
</tr>
</table>
</body></html>

autolayoutpercents

If you change the width of Column One to 60% so the Column One and Column Two widths equal 100%, the table no longer stretches the full width of its container, but sizes to fit the content with the width of Column One being 60% of the table’s resulting width.

<html><body>
<style type='text/css'>
 table,td{border: 1px solid black;}
 div{padding:10px; width: 200px; border: 1px solid #00008b;}
 *.autolayout{table-layout:auto;}
 *.p1{width:60%;}
 *.p2{width:40%;}
 *.fixedlayout{table-layout:fixed;}
 *.minwidth{width:400px;}
</style>
<table class="autolayout">
<tr>
  <td class="p1">60% wide</td>
  <td class="p2">40% wide</td>
</tr>
<tr>
  <td>Row Two, Column One</td>
  <td>Row Two, Column Two</td>
</tr>
</table>
</body></html>

autolayout100percent

Fixed Layout

Tables using fixed layout ignore the width of their content and are sized to specified values. They render much faster because the browser can start rendering once it reads the first row with the column settings. Any subsequent column width settings specific to certain rows are ignored. Use a fixed layout table when you want to truly control the size of the table and its columns. An advantage to fixed table layouts is they render quickly, and therefore, work well with large tables that contain more-or-less consistently sized across the columns.

Fixed tables can size columns smaller than their content and wider than the minimum table width, so are also useful in cases where you would want to do that. Myself, I’m hard-pressed to think of a good example, but the capability is there, so somebody somewhere must have wanted it for some seemingly good reason.

A fixed layout table has a minimum table width and column widths. If the minimum table width is auto, the browser stretches the table to fit the total specified width of all of its columns, as shown here:

<html><body>
<style type='text/css'>
 table,td{border: 1px solid black;}
 div{padding:10px; width: 200px; border: 1px solid #00008b;}
 *.fixedlayout{table-layout:fixed;}
 *.col1{width:100px;}
 *.col2{width:300px;}
 *.minwidth{width:auto;}
</style>
<table class="fixedlayout minwidth">
<tr>
  <td class="col1">100px wide</td>
  <td class="col2">300px wide</td>
</tr>
<tr>
  <td>Row Two, Column One</td>
  <td>Row Two, Column Two</td>
</tr>
</table>
</body></html>

fixedlayoutautowidth

Like with auto layout tables, you can also specify column widths with percentages, which will set the columns to a percentage of the minimum table width. If the total column percentages fall short of 100%, the browser scales the percentages to equal 100%. In this example, Column One is 10% and Column 2 is 40%, so the table width scales to 100% of the container’s width and Column One is one-quarter the width of Column Two.

Note: This does not work on Internet Explorer.

<html><body>
<style type='text/css'>
 table,td{border: 1px solid black;}
 div{padding:10px; width: 200px; border: 1px solid #00008b;}
 *.fixedlayout{table-layout:fixed;}
 *.p1{width:10%;}
 *.p2{width:40%;}
 *.minwidth{width:auto;}
</style>

<table class="fixedlayout minwidth">
<tr>
  <td class="p1">10% wide wide</td>
  <td class="p2">40% wide</td>
</tr>
<tr>
  <td>Row Two, Column One</td>
  <td>Row Two, Column Two</td>
</tr>
</table>
</body></html>

fixedlayoutpercents

If you set the minimum width to a fixed value or a percentage, the table width is sized to exactly that value: Either the precise table width or a percentage of the table’s container. However, using percentages defeats the purpose of using a fixed layout table, so you might as well use an auto layout table and set the column widths instead. This example uses fixed values.

<html><body>
<style type='text/css'>
 table,td{border: 1px solid black;}
 div{padding:10px; width: 200px; border: 1px solid #00008b;}
 *.fixedlayout{table-layout:fixed;}
 *.col1{width:100px;}
 *.col2{width:300px;}
 *.minwidth{width:400px;}
</style>
<table class="fixedlayout minwidth">
<tr>
  <td class="col1">100px wide</td>
  <td class="col2">300px wide</td>
</tr>
<tr>
  <td>Row Two, Column One</td>
  <td>Row Two, Column Two</td>
</tr>
</table>
</body></html>

fixedlayoutfixedvalues

Here is the same table with it’s Column One width set to 35px, which is very narrow relative to the length of the longest word in the column, Column. Notice how the word, Column, overlaps the cell borders.

<html><body>
<style type='text/css'>
 table,td{border: 1px solid black;}
 div{padding:10px; width: 200px; border: 1px solid #00008b;}
 *.fixedlayout{table-layout:fixed;}
 *.col1{width:35px;}
 *.col2{width:300px;}
 *.minwidth{width:400px;}
</style>
<table class="fixedlayout minwidth">
<tr>
  <td class="col1">Row One, Column One</td>
  <td class="col2">Row One, Column two</td>
</tr>
<tr>
  <td>Row Two, Column One</td>
  <td>Row Two, Column Two</td>
</tr>
</table>

fixedlayoutundersizedcolumn

About these ads

Entry filed under: See All, Tables. Tags: , , , , , , , , .

Table Styling: Spacing and Borders Managing Tabular Data

8 Comments Add your own

  • 1. sisca  |  August 13, 2009 at 10:45 pm

    Good Job,thanks for share.. :D :D visit my Blog Ya :P

    Reply
  • 2. Keith  |  October 22, 2009 at 9:42 am

    Thanks for the good write-up.
    You say:
    “Fixed tables can size columns smaller than their content and wider than the minimum table width, so are also useful in cases where you would want to do that. Myself, I’m hard-pressed to think of a good example, but the capability is there, so somebody somewhere must have wanted it for some seemingly good reason.”
    I can tell you why we do it. We have cells with text that can be long amounts of text, so we set overflow:hidden text-overflow:ellipsis; and then when the cell gets smaller than the text, the user sees *some* of the string, and the rest is ellipsis, until they size the table wider and then they can see more text. That is not possible with auto layout

    Reply
  • 3. In Business Solutions  |  June 29, 2010 at 1:41 am

    Thanks for this there is some excellent information here

    Reply
  • 4. links for 2011-08-04 - CreativeArtGroup - Blog  |  August 4, 2011 at 1:01 am

    [...] Table Layouts « Web Design & Development Tips (tags: CSS web_design) [...]

    Reply
  • 5. Mike  |  January 9, 2012 at 3:02 pm

    I have an interesting question – I think anyway.
    If you have a table that uses “thead” and “tbody” does the “table-layout:fixed” still work as hoped only on the tbody.
    (BTW I’m using fixed layout for cosmetic reasons to give my tables a consistent look within the layout and yes AUTO would be nicer and easier just looks a little weird)

    I don’t think the below works, tried and failed. I suspect I will need to use a separate div as a header or embed a table within a table.

    Thoughts?

    table,td{border: 1px solid black;}
    div{padding:10px; width: 200px; border: 1px solid #00008b;}
    *.fixedlayout{table-layout:fixed;}
    *.col1{width:35px;}
    *.col2{width:300px;}
    *.minwidth{width:400px;}

    Customer Service

    Row One, Column One
    Row One, Column two

    Row Two, Column One
    Row Two, Column Two

    Reply
  • 6. KAsun  |  May 6, 2012 at 3:37 pm

    Just add tag inside or define width inside . This will help you. Nothing else works.

    eg.

    ...............

    Reply
  • 7. Cenaopotimzacijesajta Scofield  |  September 8, 2013 at 5:21 pm

    An outstanding share! I’ve just forwarded this onto a co-worker who was doing a little
    homework on this. And he in fact bought me dinner simply because I discovered it for him…
    lol. So allow me to reword this…. Thanks for the meal!!

    But yeah, thanks for spending time to discuss this topic here on your site.

    Reply
  • 8. guides  |  February 21, 2014 at 3:47 am

    Just want to say your article is as amazing. The clarity in your post is simply cool and i could assume you
    are an expert on this subject. Fine with your permission let me to
    grab your RSS feed to keep updated with forthcoming post.
    Thanks a million and please continue the gratifying work.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Recent Posts

Blog Stats

  • 63,639 hits

Archives


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: