Posts tagged ‘column widths’
Table Layouts
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>
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>
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>
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>
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>
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>
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>
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>
Web Design & Development Tips 