Blaze UI Tables Condensed

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 Condensed is used to create the condensed table with small text and table using c-table–condensed modifier class. The font size is smaller compared to the default font size.

Blaze UI Tables Condensed Classes:

c-table–condensed: This class is used to make the condensed table.

Syntax:

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

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Tables Condensed </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 Condensed </h3> 
  
        <table class="c-table c-table--condensed"> 
            <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">  
                        Rohit  
                    </td> 
                    <td class="c-table__cell">  
                        97  
                    </td> 
                </tr> 
                
                <tr class="c-table__row"> 
                    <td class="c-table__cell">  
                        Harish  
                    </td> 
                    <td class="c-table__cell">  
                        86  
                    </td> 
                </tr> 
                
                <tr class="c-table__row"> 
                    <td class="c-table__cell">  
                        Rakesh  
                    </td> 
                    <td class="c-table__cell">  
                        79  
                    </td> 
                </tr> 
            </tbody> 
        </table> 
    </div> 
</body> 
  
</html> 

Output:

Blaze UI Tables Condensed

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Tables Condensed </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 Condensed </h3> 
  
        <table class="c-table c-table--condensed"> 
            <caption class="c-table__caption">  
                GeeksforGeeks Condensed 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=""> GFG Courses </a>  
                    </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"> 
                        <a href=""> Python course </a> 
                    </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> 