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.
<!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:
Example 2: This example demonstrates the Blaze UI Tables Condensed with table caption and links.
<!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:
Reference: https://www.blazeui.com/components/tables/