Blaze UI Tables Striped Table

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 Tables Striped Table is used to create the striped table with the help of rows and columns to store the data. To create the striped table, we will use the c-table–striped modifier class.

Blaze UI Tables Striped Table Class:

c-table–striped: This class will be used to make the striped table.

Syntax:

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

Example 1: This example demonstrates the Blaze UI Tables Striped Table.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Tables Striped Table </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 Tables Striped Table </h3> 
  
        <table class="c-table c-table--striped"> 
            <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">  
                        Akash  
                    </td> 
                    <td class="c-table__cell">  
                        75  
                    </td> 
                </tr> 
                <tr class="c-table__row"> 
                    <td class="c-table__cell">  
                        Ajay  
                    </td> 
                    <td class="c-table__cell">  
                        68  
                    </td> 
                </tr> 
                <tr class="c-table__row"> 
                    <td class="c-table__cell">  
                        Kapil  
                    </td> 
                    <td class="c-table__cell">  
                        61  
                    </td> 
                </tr> 
            </tbody> 
        </table> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Tables Striped Table

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Tables Striped Table </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 Tables Striped Table </h3> 
  
        <table class="c-table c-table--striped"> 
            <caption class="c-table__caption">  
                GeeksforGeeks Striped 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">  
                        <a href=""> Articles </a>  
                    </td> 
                    <td class="c-table__cell">  
                        GeeksforGeeks  
                    </td> 
                    <td class="c-table__cell">  
                        <a href=""> Python course </a>  
                    </td> 
                </tr> 
  
                <tr class="c-table__row"> 
                    <td class="c-table__cell">  
                        <a href=""> Java course </a>  
                    </td> 
                    <td class="c-table__cell">  
                        Flutter  
                    </td> 
                    <td class="c-table__cell">  
                        Javascript  
                    </td> 
                </tr> 
  
                <tr class="c-table__row"> 
                    <td class="c-table__cell">  
                        Dart  
                    </td> 
                    <td class="c-table__cell">  
                        <a href=""> GFG website </a>  
                    </td> 
                    <td class="c-table__cell">  
                        Java  
                    </td> 
                </tr> 
            </tbody> 
        </table> 
    </div> 
</body> 
  
</html>