How to set the table layout algorithm using CSS ?

Last Updated : 24 May, 2023

You can set the table layout algorithm using table-layout property which is used to display the layout of the table. In this article, you learn both auto and fixed layout algorithms to form table.

Syntax:

table-layout: auto|fixed;

Approach 1: Using auto layout algorithm.

Note: In the auto-layout algorithm, the browser expands the rows or columns to accommodate the larger bit of content, so that content doesn’t overflow. Here Browser needs to analyze the entire table’s content. which can be a little bit slow processing layout.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            border: 3px solid black;
        }
 
        th,
        td {
            border: 2px solid green;
        }
 
        table#gfg {
            table-layout: auto;
            width: 200px;
        }
 
        div {
            max-width: 200px;
            padding: 10px;
            border: 5px solid green;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>table-layout property</h2>
        <div>
            <h3>table-layout:auto;</h3>
            <table id="gfg">
                <tr>
                    <th>Author Name</th>
                    <th>Age</th>
                    <th>College</th>
                </tr>
                <tr>
                    <td>Aman Rathod</td>
                    <td>20</td>
                    <td>NCE</td>
                </tr>
                <tr>
                    <td>Ranveer Sequeira</td>
                    <td>19</td>
                    <td>Google</td>
                </tr>
            </table>
        </div>
 
    </center>
</body>
</html>

Output:

Approach 2: Using fixed layout algorithm.

Note: In a fixed layout algorithm, Browser uses the first row to determine the column widths and does not need to analyze the entire table’s content. So it is a faster processing layout.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: separate;
            border: 3px solid black;
        }
 
        th,
        td {
            border: 2px solid green;
        }
 
        table#table1 {
            table-layout: fixed;
            width: 200px;
        }
 
        div {
            max-width: 200px;
            padding: 10px;
            border: 5px solid green;
        }
 
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>table-layout property</h2>
        <div>
            <h3>table-layout:Fixed;</h3>
            <table id="table1">
                <tr>
                    <th>Author Name</th>
                    <th>Age</th>
                    <th>College</th>
                </tr>
                <tr>
                    <td>Aman Rathod</td>
                    <td>20</td>
                    <td>GeeksforGeeks</td>
                </tr>
                <tr>
                    <td>Ranveer Sequeira</td>
                    <td>19</td>
                    <td>Google</td>
                </tr>
            </table>
        </div>
 
    </center>
</body>
</html>