Skip to content
Related Articles

Related Articles

Blaze UI Tables using divs

View Discussion
Improve Article
Save Article
  • Last Updated : 06 May, 2022
View Discussion
Improve Article
Save Article

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/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!