Skip to content
Related Articles

Related Articles

Blaze UI Tables Condensed

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 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=
</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=
</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>

Output:

Blaze UI Tables Condensed

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!