Blaze UI Basic Tables

Last Updated : 06 May, 2022

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 Basic Tables is used to create the table with the help of rows and columns to store the tabular data. To create the table in Blaze UI, we will use the below classes.

Blaze UI Basic Tables Classes:

c-table: This class is used to create the table.
c-table__caption: This class is used to create the table caption.
c-table__head: This class is used to create the table header.
c-table__row: This class is used to create the table row.
c-table__row–heading: This class is used to create the table row heading.
c-table__cell: This class is used to create the table cell.

Syntax:

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

Example 1: This example demonstrates the Blaze UI Basic Tables.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Basic Tables </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered "> 
        <h1 style="color: green;">  
            GeeksforGeeks 
        </h1> 
        <h3> Blaze UI Basic Tables </h3> 
  
        <table class="c-table"> 
            <thead class="c-table__head"> 
                <tr class="c-table__row c-table__row--heading"> 
                    <th class="c-table__cell"> 
                        Name 
                    </th> 
                    <th class="c-table__cell"> 
                        Marks 
                    </th> 
                </tr> 
            </thead> 
            <tbody class="c-table__body"> 
                <tr class="c-table__row"> 
                    <td class="c-table__cell"> 
                        Amit 
                    </td> 
                    <td class="c-table__cell"> 
                        98 
                    </td> 
                </tr> 
  
                <tr class="c-table__row"> 
                    <td class="c-table__cell"> 
                        Rohan 
                    </td> 
                    <td class="c-table__cell"> 
                        86 
                    </td> 
                </tr> 
                  
                <tr class="c-table__row"> 
                    <td class="c-table__cell"> 
                        Rajit 
                    </td> 
                    <td class="c-table__cell"> 
                        91 
                    </td> 
                </tr> 
            </tbody> 
        </table> 
    </div> 
</body> 
  
</html> 

Output:

Blaze UI Basic Tables

Example 2: This example demonstrates the Blaze UI Basic Tables with table caption and links.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Basic Tables </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered "> 
        <h1 style="color: green;">  
            GeeksforGeeks  
        </h1> 
        <h3> Blaze UI Basic Tables </h3> 
  
        <table class="c-table"> 
            <caption class="c-table__caption">  
                GeeksforGeeks Basic Table 
            </caption> 
            <thead class="c-table__head"> 
                <tr class="c-table__row c-table__row--heading"> 
                    <th class="c-table__cell"> 
                        Header 1 
                    </th> 
                    <th class="c-table__cell"> 
                        Header 2 
                    </th> 
                    <th class="c-table__cell"> 
                        Header 3 
                    </th> 
                </tr> 
            </thead> 
              
            <tbody class="c-table__body"> 
                <tr class="c-table__row"> 
                    <td class="c-table__cell"> 
                        Java 
                    </td> 
                    <td class="c-table__cell"> 
                        C++ 
                    </td> 
                    <td class="c-table__cell"> 
                        <a href=""> GFG </a> 
                    </td> 
                </tr> 
  
                <tr class="c-table__row"> 
                    <td class="c-table__cell"> 
                        <a href=""> GeeksforGeeks </a> 
                    </td> 
                    <td class="c-table__cell"> 
                        Dart 
                    </td> 
                    <td class="c-table__cell"> 
                        Javascript 
                    </td> 
                </tr> 
  
                <tr class="c-table__row"> 
                    <td class="c-table__cell"> 
                        Python 
                    </td> 
                    <td class="c-table__cell"> 
                        <a href=""> GeeksforGeeks.org </a> 
                    </td> 
                    <td class="c-table__cell">  
                        Flutter  
                    </td> 
                </tr> 
            </tbody> 
        </table> 
    </div> 
</body> 
  
</html> 