Open In App

Blaze UI Tables using divs

Improve
Improve
Like Article
Like
Save
Share
Report

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

Blaze UI Tables Using Divs is used to create the table using divs instead of tr, th, and td. We can create the table using divs by using the below classes.

Blaze UI Tables Using Divs Classes:

  • c-table: This class will be used to make the table.
  • c-table–striped: This class will be used to make the striped table.
  • c-table__row–heading: This class will be used to make the row heading.
  • c-table__caption: This class will be used to make table caption.
  • c-table__head: This class will be used to make the table head.
  • c-table__row: This class will be used to make the table row.
  • c-table__cell: This class will be used to make the table cell.
  • c-table__column: This class will be used to make the table column.

Syntax:

<div class="c-table">
   ...
</div>

Example 1: This example demonstrates the Blaze UI Tables Using Divs.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Tables Using Divs </title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="u-centered ">
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
        <h3> Blaze UI Tables Using Divs </h3>
  
        <div class="c-table c-table--striped">
            <div class="c-table__caption">
                GFG Striped Table using divs
            </div>
            <div class="c-table__row c-table__row--heading">
                <span class="c-table__cell">
                    Name
                </span>
                <span class="c-table__cell"
                    Percentage 
                </span>
            </div>
  
            <div class="c-table__row">
                <span class="c-table__cell"
                    Kamal 
                </span>
                <span class="c-table__cell"
                    85% 
                </span>
            </div>
  
            <div class="c-table__row">
                <span class="c-table__cell"
                    Mukul 
                </span>
                <span class="c-table__cell"
                    98% 
                </span>
            </div>
              
            <div class="c-table__row">
                <span class="c-table__cell"
                    Rajendra 
                </span>
                <span class="c-table__cell"
                    84% 
                </span>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Blaze UI Tables Using Divs

Example 2: This example demonstrates the Blaze UI Tables Using Divs.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Tables Using Divs </title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="u-centered ">
        <h1 style="color: green;"
            GeeksforGeeks 
        </h1>
        <h3> Blaze UI Tables Using Divs </h3>
  
        <div class="c-table c-table--condensed">
            <div class="c-table__caption"
                GFG Condensed Table using divs 
            </div>
            <div class="c-table__row c-table__row--heading">
                <span class="c-table__cell"
                    Header 1 
                </span>
                <span class="c-table__cell"
                    Header 2 
                </span>
                <span class="c-table__cell"
                    Header 3 
                </span>
            </div>
  
            <div class="c-table__row">
                <span class="c-table__cell"
                    <a href=""> GFG Courses </a
                </span>
                <span class="c-table__cell"
                    Articles 
                </span>
                <span class="c-table__cell"
                    <a href=""> Java course </a
                </span>
            </div>
  
            <div class="c-table__row">
                <span class="c-table__cell"
                    <a href=""> GeeksforGeeks website </a
                </span>
                <span class="c-table__cell"
                    Python 
                </span>
                <span class="c-table__cell"
                    Dart 
                </span>
            </div>
  
            <div class="c-table__row">
                <span class="c-table__cell"
                    <a href=""> Javascript course </a
                </span>
                <span class="c-table__cell"
                    Flutter 
                </span>
                <span class="c-table__cell"
                    Node.js 
                </span>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Blaze UI Tables Using Divs

Reference: https://www.blazeui.com/components/tables/



Last Updated : 06 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads