Skip to content
Related Articles

Related Articles

Improve Article

What are the usage of “table-layout” property in CSS ?

  • Difficulty Level : Hard
  • Last Updated : 24 Aug, 2021
Geek Week

The table-layout property in CSS specifies the layout of the table which consists of table cells, rows, and columns.

Syntax:

table-layout: auto | fixed | initial | inherit;

Property value: These are the properties and their usage for a table layout.

  • auto: The property value auto is used to create an automatic table layout on the browser. This property creates the column width by unbreakable content in the cells of the table.
  • fixed: The property value fixed is used to create a fixed table layout. The table and column widths are created by the widths of the table and column or by the width of the first row of cells.
  • initial: The property value is used to create its default value.
  • inherit: The property value to inherit the property from its parent.

Example 1: In this example, table-layout: the auto property is used in which an automatic table layout on the browser is created and this property creates the column width by unbreakable content in cells of the table.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>table-layout property</title>
        <style>
            table {
            border-collapse: collapse;
            border: 1px solid black;
            }
            th, td {
            border: 1px solid black;
            }
            table#table1 {
            table-layout: auto;
            width: 200px;
            }
            div {
                max-width:200px;
                padding:10px;
                border:10px solid black;
            }
            h1 {
                color:green;
            }
        </style>
    </head>
    <body>
        <center>
        <h1>GeeksforGeeks</h1>
        <h2>table-layout property</h2>
        <div>
        <h3>table-layout:auto</h3>
        <table id = "table1">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Books</th>
            </tr>
            <tr>
                <td>Rita Shrivastava</td>
                <td>30</td>
                <td>Good Days</td>
            </tr>
            <tr>
                <td>Priya </td>
                <td>18</td>
                <td>Bad Days</td>
            </tr>
        </table>
        </div>
        <br>
        </center>
    </body>
</html>


 



Output:

Example 2: In this example, table-layout: the fixed property is used in which a fixed table layout is created and the table and column widths are created by the widths of table and column or by the width of the first row of cells.

HTML




<!DOCTYPE html>
<html>
    <head>
        <title>table-layout property</title>
        <style>
            table {
            border-collapse: collapse;
            border: 1px solid black;
            }
            th, td {
            border: 1px solid black;
            }
            table#table1 {
            table-layout: fixed;
            width: 200px;
            }
            div {
                max-width:200px;
                padding:10px;
                border:10px solid black;
            }
            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>Books</th>
            </tr>
            <tr>
                <td>Rita Shrivastava</td>
                <td>30</td>
                <td>Good Days</td>
            </tr>
            <tr>
                <td>Priya</td>
                <td>18</td>
                <td>Bad Days</td>
            </tr>
        </table>
        </div>
        </center>
    </body>
</html>

Output:

table-layout




My Personal Notes arrow_drop_up
Recommended Articles
Page :