CSS Table-Layout Property

In this chapter you will learn:
About table-layout property
Values of this property
Example of this property

Table-layout property is used to specify the algorithm to render the layout of a table (including cells, rows, columns).

Values of this property-
Values Description
fixed This property is used to determine cells in the first row.
auto Used to determine column widths in all row
initial Used to specify the default value

Example of this property 

<html>
<head>
    <title>Example of table-layout property</title>
    <style type="text/css">
        #a
        {
            table-layout:auto;
        }
        #b
        {
            table-layout:fixed;
        }                    
       
           
    </style>
    </head>
<body>
<table id="a"  border="1px"  width="100%">
<tr><td width="3%">beautiful</td>
<td width="97%">picture</td></tr>
</table><br/>
<table id="b"  border="1px"  width="100%">
<tr><td width="3%">beautiful</td>
<td width="97%">picture</td></tr>
</table>
</body>
</html>
Guide:-

In the given program, there are two tables in which the first table has used CSS property (table-layout) value auto but second has used fixed to the output of both tables are different.


Output:-
example of table-layout property
SUMMARY

In this chapter, you have learned about the table-layout property. Given the example of this property will help you to understand it better so try it yourself and click on Next button to continue-

 

Share your thought