Blaze UI Tables Condensed
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;" > w3wiki </ 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.
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;" > w3wiki </ h1 > < h3 > Blaze UI Tables Condensed </ h3 > < table class = "c-table c-table--condensed" > < caption class = "c-table__caption" > w3wiki 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 = "" > w3wiki </ 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 = "" > w3wiki.net </ a > </ td > < td class = "c-table__cell" > Flutter </ td > </ tr > </ tbody > </ table > </ div > </ body > </ html > |
Output:
Reference: https://www.blazeui.com/components/tables/
Contact Us