Open In App

How to create the tabular layout using CSS Property ?

Improve
Improve
Like Article
Like
Save
Share
Report

Tabular layouts are a common requirement for web developers when designing websites. Traditionally, tables were used to create these layouts, but with the advent of CSS, developers now can use more modern approaches like flexbox and grid. This article will discuss how to create tabular layouts using flexbox and grid, syntax, approaches, and examples.

Approach 1:

This flexbox approach will be utilized for creating the tabular layout, which is described below:

Using Nested Flexbox:

The first approach involves using nested flexbox containers. We can create a parent flex container with flex-wrap: wrap to wrap the items onto multiple lines. Then, we can create child flex containers for each row of the table, each with a fixed number of columns. 

Syntax:

.table {
display: flex;
flex-wrap: wrap;
...
}
.row {
display: flex;
width: 100%;
}
.cell {
/* or other percentage value */
flex-basis: 33.33%;
...
}

.header {
...
}

We create a flex container with display: flex, and set flex-wrap: wrap to wrap the content onto multiple lines. Inside the flex container, we create flex items for each row, using the same display: flex property. We then set the flex-basis property to the appropriate percentage value to create equal-width columns.

Example 1: In this example, we create a .table container with display: flex and flex-wrap: wrap. We then create three .row containers, each with a fixed width of 100%. Inside each .row container, we create three .cell containers, each with a flex-basis of 33.33%, which gives us three equal columns. We also add some padding and a border to the cells to create a visual separation between them.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Using Nested Flexbox</title>
 
    <style>
        h1,
        h3 {
            text-align: center;
            color: green;
        }
 
        .table {
            display: flex;
            flex-wrap: wrap;
            border: 1px solid black;
        }
 
        .row {
            display: flex;
            width: 100%;
        }
 
        .cell {
            flex-basis: 33.33%;
            padding: 10px;
            border: 1px solid black;
        }
 
        .header {
            font-weight: bold;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h3>
        Creating the tabular layout
        using flexbox property
    </h3>
     
    <div class="table">
        <div class="row">
            <div class="cell header">Header 1</div>
            <div class="cell header">Header 2</div>
            <div class="cell header">Header 3</div>
        </div>
        <div class="row">
            <div class="cell">Row 1, Column 1</div>
            <div class="cell">Row 1, Column 2</div>
            <div class="cell">Row 1, Column 3</div>
        </div>
        <div class="row">
            <div class="cell">Row 2, Column 1</div>
            <div class="cell">Row 2, Column 2</div>
            <div class="cell">Row 2, Column 3</div>
        </div>
        <div class="row">
            <div class="cell">Row 3, Column 1</div>
            <div class="cell">Row 3, Column 2</div>
            <div class="cell">Row 3, Column 3</div>
        </div>
    </div>
</body>
 
</html>


Output:

Table layout using flexbox

Approach 2:

This grid approach will be utilized for creating the tabular layout, which is described below:

Using Grid:

This second approach involves using CSS Grid to create the tabular layout. We can create a grid container with a fixed number of rows and columns, and then place our content in the appropriate grid cells.

Syntax:

.table {
display: grid;
grid-template-columns: repeat(3, 1fr); /* or other values */
...
}

.cell {
...
}

.header {
...
}

We create a CSS grid container with display: grid and set the grid-template-columns property to the appropriate value to create equal-width columns. We then create grid items for each cell and apply any necessary styling to the cells and headers.

Example 2: In this example, we create a table with headers and content using a CSS grid. We set the grid-template-columns property to repeat(3, 1fr) to create three equal columns and use the gap property to add some spacing between the cells.

HTML




<html>
<head>
    <title>Using CSS grid</title>
    <style>
        h1, h3 {
               text-align: center;
               color: green;
           }
           .table {
               display: grid;
               grid-template-columns: repeat(3, 1fr);
               gap: 10px;
               border: 1px solid black;
           }
           .cell {
               padding: 10px;
               border: 1px solid black;
           }
           .header {
               font-weight: bold;
           }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h3> Creating the tabular layout using flexbox property</h3>
    <div class="table">
        <div class="cell header"> Header 1 </div>
        <div class="cell header"> Header 2 </div>
        <div class="cell header"> Header 3 </div>
        <div class="cell"> Row 1, Column 1 </div>
        <div class="cell"> Row 1, Column 2 </div>
         <div class="cell"> Row 1, Column 3 </div>
        <div class="cell"> Row 2, Column 1 </div>
        <div class="cell"> Row 2, Column 2 </div>
        <div class="cell"> Row 2, Column 3 </div>
        <div class="cell"> Row 3, Column 1 </div>
        <div class="cell"> Row 3, Column 2 </div>
        <div class="cell"> Row 3, Column 3 </div>
    </div>
</body>
 
</html>


Output:

Table layout using grid



Last Updated : 16 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads