Skip to content
Related Articles

Related Articles

Improve Article

How to set the table layout algorithm using CSS ?

  • Difficulty Level : Basic
  • Last Updated : 23 Apr, 2021

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

Syntax:

table-layout: auto|fixed;

Example 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  need to analyze the entire table’s content. which can be a little bit slow processing layout.

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:



Example 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.

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>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :