<!DOCTYPE html>
<html lang="en-US" class="no-js">


<!-- Mirrored from quickdevs.com/demo/merit/elements/tables.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 29 Mar 2023 10:24:33 GMT -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- TITLE -->
    <title>Tables - Merit Premium Multi-Purpose HTML5 Template</title>

    <!-- META TAGS -->
    <meta name="keywords"
        content="premium multi-Purpose, html template, multipurpose template, bootstrap template, niches, clean, modern, multipurpose, responsive">
    <meta name="description" content="Merit is a modern Multi-Purpose HTML Template any bussines.">

    <!--  FAVICON  -->
    <link rel="shortcut icon" href="../images/icons/favicon.png">

    <!-- MAIN CSS STYLE SHEET -->
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/stylesheet.css">
    <link rel="stylesheet" href="../css/responsive.css">

    <!-- MODERNIZR LIBRARY -->
    <script src="../js/modernizr-custom.js"></script>

</head>

<body>

    <!-- PRELOADER START -->
    <div id="loader-wrapper">
        <div class="loader">
            <span class="loader-26"></span>
        </div> 
    </div>
    <!-- PRELOADER END -->

    <!-- HEADER START -->
    <header>
        <!-- TOP HEADER START -->
        <div class="top-header">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <ul class="top-contact text-left">
                            <li class="phone"><span class="tel-no"><a href="tel:123-456-7890"> +123-456-7890</a></span>
                            </li>
                            <li class="email"><a href="mailto:info@merit.com">info@merit.com</a></li>
                        </ul>
                    </div>
                    <div class="col-md-6 text-right">
                        <div class="top-social">
                            <ul class="social-list">
                                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fab fa-dribbble"></i></a></li>
                                <li>
                                    <!-- Button trigger modal -->
                                    <div class="center-element">
                                        <button type="button" class="btn btn-default" data-toggle="modal" data-target="#exampleModal2">Login</button>
                                    </div>

                                    <!-- Modal -->
                                    <div class="modal fade custom-modal" id="exampleModal2" tabindex="-1" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content login-modal">
                                                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                                                <div class="modal-body">
                                                    <figure class="login-avatar">
                                                        <img src="../images/icons/user-login-2.png" alt="">
                                                    </figure>
                                                    <h4>Merit</h4>
                                                    <p>Welcome Back!</p>
                                                    <div class="google-btn">
                                                        <button type="submit" class="tp-btn-primary">
                                                            <img class="tp-goole-icon" src="../images/icons/google-icon.png" alt="">
                                                            Sign in with Google
                                                        </button>
                                                    </div>
                                                    <p>Or</p>
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <form>
                                                                <div class="form-group">
                                                                    <input type="email" class="form-control login-fc" placeholder="Email or Username">
                                                                </div>
                                                                <div class="form-group mt-3">
                                                                    <input type="password" class="form-control login-fc" placeholder="Password">
                                                                </div>
                                                                <div class="login-options d-flex justify-content-between mt-3">
                                                                    <div class="have-account">
                                                                        <p><a href="#">Dont have an account?</a></p>
                                                                    </div>
                                                                    <div class="forgot-password">
                                                                        <p><a href="#">Forgot password?</a></p>
                                                                    </div>
                                                                </div>
                                                                <div class="login-btn">
                                                                    <button type="submit" class="tp-btn-primary">Login</button>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <hr class="top-line">
            </div>
        </div>
        <!-- TOP HEADER END -->

        <!-- MEGAMENU START -->
        <div class="main-nav">
            <div class="container">
                <nav id="navigation1" class="navigation">
                    <div class="nav-header">
                        <a class="nav-logo" href="../index.html">
                            <img src="../images/logos/logo.png" class="white-logo" alt="">
                            <img src="../images/logos/logo-black.png" class="dark-logo" alt="">
                        </a>
                        <div class="nav-toggle"></div>
                    </div>
                    <div class="nav-menus-wrapper">
                        <ul class="nav-menu align-to-right">
                            <li><a href="#">HOME</a>
                                <div class="megamenu-panel">
                                    <div class="megamenu-lists">
                                        <ul class="megamenu-list list-col-4">
                                            <li><a href="../1-agency.html">Agency</a></li>
                                            <li><a href="../2-beauty.html">Beauty</a></li>
                                            <li><a href="../3-construction.html">Construction</a></li>
                                            <li><a href="../4-corporate.html">Corporate</a></li>
                                            <li><a href="../5-courier.html">Courier</a></li>
                                            <li><a href="../6-dealer.html">Dealer</a></li>
                                        </ul>
                                        <ul class="megamenu-list list-col-4">
                                            <li><a href="../7-dental.html">Dental</a></li>
                                            <li><a href="../8-education.html">Education</a></li>
                                            <li><a href="../9-gym.html">Gym</a></li>
                                            <li><a href="../10-hotel.html">Hotel</a></li>
                                            <li><a href="../11-medical.html">Medical</a></li>
                                            <li><a href="../12-restaurant.html">Restaurant</a></li>
                                        </ul>
                                        <ul class="megamenu-list list-col-4">
                                            <li><a href="../13-charity.html">Charity</a></li>
                                            <li><a href="../14-cleaning.html">Cleaning</a></li>
                                            <li><a href="../15-finance.html">Finance</a></li>
                                            <li><a href="../16-industrial.html">Industrial</a></li>
                                            <li><a href="../17-hosting.html">Hosting</a></li>
                                            <li><a href="../18-portfolio.html">Portfolio</a></li>
                                        </ul>
                                        <ul class="megamenu-list list-col-4">
                                            <li><a href="../19-organic.html">Organic</a></li>
                                            <li><a href="../20-farm.html">Farm</a></li>
                                            <li><a href="../21-yoga.html">Yoga</a></li>
                                            <li><a href="../22-travel.html">Travel</a></li>
                                            <li><a href="../23-lawyer.html">Lawyer</a></li>
                                            <li><a href="../24-fitness.html">Fitness</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li><a href="#">PAGES</a>
                                <div class="megamenu-panel">
                                    <div class="megamenu-lists">
                                        <ul class="megamenu-list list-col-4">
                                            <li><a href="../about-style-1.html">About Us</a></li>
                                            <li><a href="../about-style-2.html">About Me</a></li>
                                            <li><a href="../about-style-3.html">About Us - ALT 2</a></li>
                                            <li><a href="../about-style-4.html">About Us - ALT 3</a></li>
                                            <li><a href="../careers-style-1.html">Careers</a></li>
                                            <li><a href="../careers-style-2.html">Careers - ALT 2</a></li>
                                            <li><a href="../careers-style-3.html">Careers - ALT 3</a></li>
                                        </ul>
                                        <ul class="megamenu-list list-col-4">
                                            <li><a href="../services-style-1.html">Services</a></li>
                                            <li><a href="../services-style-2.html">Services - ALT 2</a></li>
                                            <li><a href="../services-style-3.html">Services - ALT 3</a></li>
                                            <li><a href="../services-style-4.html">Services - ALT 4</a></li>
                                            <li><a href="../profile-style-1.html">Profile</a></li>
                                            <li><a href="../profile-style-2.html">Profile - ALT 2</a></li>
                                            <li><a href="../profile-style-3.html">Profile - ALT 3</a></li>
                                        </ul>
                                        <ul class="megamenu-list list-col-4">
                                            <li><a href="../contact-style-1.html">Contact Us </a></li>
                                            <li><a href="../contact-style-2.html">Contact Us - ALT 2</a></li>
                                            <li><a href="../contact-style-3.html">Contact Us - ALT 3</a></li>
                                            <li><a href="../contact-style-4.html">Contact Us - ALT 4</a></li>
                                            <li><a href="../team-style-1.html">Our Team</a></li>
                                            <li><a href="../team-style-2.html">Our Team - ALT 2</a></li>
                                            <li><a href="../team-style-3.html">Our Team - ALT 3</a></li>
                                        </ul>
                                        <ul class="megamenu-list list-col-4">
                                            <li><a href="../coming-soon-style-1.html">Coming Soon</a></li>
                                            <li><a href="../coming-soon-style-2.html">Coming Soon - ALT 2</a></li>
                                            <li><a href="../404-error-style-1.html">404 Page</a></li>
                                            <li><a href="../404-error-style-2.html">404 Page - ALT 2</a></li>
                                            <li><a href="../login-register-style-1.html">Login / Register</a></li>
                                            <li><a href="../faq.html">Faq</a></li>
                                            <li><a href="../faq-alt.html">Faq - ALT</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li><a href="#">ELEMENTS</a>
                                <div class="megamenu-panel">
                                    <div class="megamenu-lists">
                                        <ul class="megamenu-list list-col-4">
                                            <li class="megamenu-list-title"><a href="#">ELEMENTS 1</a></li>
                                            <li><a href="accordions.html"><i class="fas fa-plus-square"></i> &nbsp;
                                                    Accordions</a></li>
                                            <li><a href="alerts.html"><i class="fas fa-exclamation-circle"></i> &nbsp;
                                                    Alerts</a></li>
                                            <li><a href="animations.html"><i class="fas fa-exchange-alt"></i> &nbsp;
                                                    Animations</a></li>
                                            <li><a href="blockquotes.html"><i class="fas fa-quote-left"></i> &nbsp;
                                                    Blockquotes</a></li>
                                            <li><a href="breadcrumbs.html"><i class="fas fa-share"></i> &nbsp;
                                                    Breadcrumbs</a></li>
                                            <li><a href="buttons.html"><i class="fas fa-square"></i> &nbsp; Buttons</a>
                                            </li>
                                            <li><a href="call-to-action.html"><i class="fas fa-bullhorn"></i> &nbsp;
                                                    Call to Action</a></li>
                                            <li><a href="charts.html"><i class="fas fa-circle-notch"></i> &nbsp;
                                                    Charts</a></li>
                                            <li><a href="content-boxes.html"><i class="fas fa-th-large"></i> &nbsp;
                                                    Content Boxes</a></li>
                                            <li><a href="counters.html"><i class="fas fa-bullseye"></i> &nbsp;
                                                    Counters</a></li>
                                        </ul>
                                        <ul class="megamenu-list list-col-4">
                                            <li class="megamenu-list-title"><a href="#">ELEMENTS 2</a></li>
                                            <li><a href="customers.html"><i class="fas fa-user-circle"></i> &nbsp;
                                                    Customer</a></li>
                                            <li><a href="dropcaps.html"><i class="fas fa-font"></i> &nbsp; Dropcaps</a>
                                            </li>
                                            <li><a href="flip-boxes.html"><i class="fas fa-sync-alt"></i> &nbsp; Flip
                                                    Box</a></li>
                                            <li><a href="google-maps.html"><i class="fas fa-map"></i> &nbsp; Google
                                                    Maps</a></li>
                                            <li><a href="grid-boxes.html"><i class="fas fa-th"></i> &nbsp; Grid
                                                    Boxes</a></li>
                                            <li><a href="icon-boxes.html"><i class="fas fa-th-large"></i> &nbsp; Icon
                                                    Boxes</a></li>
                                            <li><a href="icon-circle.html"><i class="far fa-circle"></i> &nbsp; Icon
                                                    Circle</a></li>
                                            <li><a href="image-gallery.html"><i class="fas fa-expand"></i> &nbsp; Image
                                                    Gallery</a></li>
                                            <li><a href="images.html"><i class="far fa-image"></i> &nbsp; Images</a>
                                            </li>
                                            <li><a href="image-hover.html"><i class="fas fa-object-ungroup"
                                                        aria-hidden="true"></i> &nbsp; Image Hover</a></li>
                                        </ul>
                                        <ul class="megamenu-list list-col-4">
                                            <li class="megamenu-list-title"><a href="#">ELEMENTS 3</a></li>
                                            <li><a href="lightbox.html"><i class="fas fa-lightbulb"></i> &nbsp;
                                                    LightBox</a></li>
                                            <li><a href="modal-popup.html"><i class="fas fa-search-plus"></i> &nbsp;
                                                    Modal Popup</a></li>
                                            <li><a href="pagination.html"><i class="fas fa-angle-double-right"></i>
                                                    &nbsp; Pagination</a></li>
                                            <li><a href="parallax.html"><i class="fas fa-random"></i> &nbsp;
                                                    Parallax</a></li>
                                            <li><a href="pricing-table.html"><i class="fas fa-table"></i> &nbsp; Pricing
                                                    Tables</a></li>
                                            <li><a href="process-steps.html"><i class="fas fa-arrow-right"></i> &nbsp;
                                                    Process Steps</a></li>
                                            <li><a href="profile-cards.html"><i class="fas fa-address-card"></i> &nbsp;
                                                    Profile Cards</a></li>
                                            <li><a href="progress-bar.html"><i class="fas fa-tasks"></i> &nbsp; Progress
                                                    Bar</a></li>
                                            <li><a href="recent-posts.html"><i class="fas fa-newspaper"></i> &nbsp;
                                                    Recent Posts</a></li>
                                            <li><a href="section-styles.html"><i class="fas fa-outdent"></i> &nbsp;
                                                    Section Styles</a></li>
                                        </ul>
                                        <ul class="megamenu-list list-col-4">
                                            <li class="megamenu-list-title"><a href="#">ELEMENTS 4</a></li>
                                            <li><a href="separators.html"><i class="fas fa-minus"></i> &nbsp;
                                                    Separators</a></li>
                                            <li><a href="shop-banners.html"><i class="fas fa-language"></i> &nbsp; Shop
                                                    Banners</a></li>
                                            <li><a href="social-icons.html"><i class="fab fa-twitter"></i> &nbsp; Social
                                                    Icons</a></li>
                                            <li><a href="tables.html"><i class="fas fa-table"></i> &nbsp; Tables</a>
                                            </li>
                                            <li><a href="tabs.html"><i class="fas fa-window-maximize"></i> &nbsp;
                                                    Tabs</a></li>
                                            <li><a href="team.html"><i class="fas fa-users"></i> &nbsp; Team</a></li>
                                            <li><a href="testimonials.html"><i class="fas fa-edit"></i> &nbsp;
                                                    Testimonials</a></li>
                                            <li><a href="timeline.html"><i class="fas fa-arrow-down"></i> &nbsp;
                                                    Timeline</a></li>
                                            <li><a href="videos.html"><i class="fas fa-video"></i> &nbsp; Videos & Audio</a>
                                            </li>
                                            <li><a href="video-background.html"><i class="fas fa-columns"></i> &nbsp; Wide
                                                    Sections</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li><a href="#">SLIDERS</a>
                                <div class="megamenu-panel">
                                    <div class="megamenu-lists">
                                        <ul class="megamenu-list list-col-4">
                                            <li class="megamenu-list-title"><a href="#">SLIDERS 1</a></li>
                                            <li><a href="../rev-sliders/3d-parallax-scenes.html">3D Parallax Scenes</a>
                                            </li>
                                            <li><a href="../rev-sliders/404-error.html">404 Error</a></li>
                                            <li><a href="../rev-sliders/agency-slider.html">Agency Slider</a></li>
                                            <li><a href="../rev-sliders/blend-mode.html">Blend Mode</a></li>
                                            <li><a href="../rev-sliders/blur-effect.html">Blur Effect</a></li>
                                            <li><a href="../rev-sliders/car-dealer.html">Car Dealer</a></li>
                                            <li><a href="../rev-sliders/carousel-gallery.html">Carousel Gallery</a></li>
                                            <li><a href="../rev-sliders/classic-carousel.html">Classic Carousel</a></li>
                                            <li><a href="../rev-sliders/coming-soon.html">Coming soon</a></li>
                                            <li><a href="../rev-sliders/concept-slider.html">Concept Slider</a></li>
                                        </ul>
                                        <ul class="megamenu-list list-col-4">
                                            <li class="megamenu-list-title"><a href="#">SLIDERS 2</a></li>
                                            <li><a href="../rev-sliders/double-exposure-effect.html">Double Exposure
                                                    Effect</a></li>
                                            <li><a href="../rev-sliders/exploration-header.html">Exploration Header</a>
                                            </li>
                                            <li><a href="../rev-sliders/film-strip.html">Film Strip Effect</a></li>
                                            <li><a href="../rev-sliders/fine-dining.html">Fine Dining</a></li>
                                            <li><a href="../rev-sliders/gravity-design.html">Gravity Design</a></li>
                                            <li><a href="../rev-sliders/happy-hollidays.html">Happy Hollidays</a></li>
                                            <li><a href="../rev-sliders/hero-sports.html">Hero Sports</a></li>
                                            <li><a href="../rev-sliders/inspiration-header.html">Inspiration Header</a>
                                            </li>
                                            <li><a href="../rev-sliders/levano-slider.html">Levano Slider</a></li>
                                            <li><a href="../rev-sliders/magazine-posts.html">Magazine Posts</a></li>
                                        </ul>
                                        <ul class="megamenu-list list-col-4">
                                            <li class="megamenu-list-title"><a href="#">SLIDERS 3</a></li>
                                            <li><a href="../rev-sliders/mask-showcase.html">Mask Showcase</a></li>
                                            <li><a href="../rev-sliders/mountain-parallax.html">Mountain Parallax</a>
                                            </li>
                                            <li><a href="../rev-sliders/over-expousure.html">Over Exposure</a></li>
                                            <li><a href="../rev-sliders/panorama.html">Panorama</a></li>
                                            <li><a href="../rev-sliders/parallax-joy.html">Parallax Joy</a></li>
                                            <li><a href="../rev-sliders/parallax-zoom.html">Parallax Zoom</a></li>
                                            <li><a href="../rev-sliders/particle-effect-one.html">Particle Effect
                                                    one</a></li>
                                            <li><a href="../rev-sliders/particle-effect-two.html">Particle Effect
                                                    Two</a></li>
                                            <li><a href="../rev-sliders/particle-effect-three.html">Particle Effect
                                                    Three</a></li>
                                            <li><a href="../rev-sliders/style-intro.html">Style Intro</a></li>
                                        </ul>
                                        <ul class="megamenu-list list-col-4">
                                            <li class="megamenu-list-title"><a href="#">SLIDERS 4</a></li>
                                            <li><a href="../rev-sliders/reveal.html">Reveal</a></li>
                                            <li><a href="../rev-sliders/rock-band.html">Rock Band</a></li>
                                            <li><a href="../rev-sliders/scroll-effects.html">Scroll Effect</a></li>
                                            <li><a href="../rev-sliders/slider-gym.html">Slider Gym</a></li>
                                            <li><a href="../rev-sliders/slider-news.html">Slider News</a></li>
                                            <li><a href="../rev-sliders/sliding-overlays.html">Sliding Overlays</a></li>
                                            <li><a href="../rev-sliders/web-agency.html">Web Agency</a></li>
                                            <li><a href="../rev-sliders/web-product.html">Web Product</a></li>
                                            <li><a href="../rev-sliders/website-intro.html">Website Intro</a></li>
                                            <li><a href="../rev-sliders/youtube-hero.html">Youtube Hero</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li><a href="#">SHOP</a>
                                <ul class="nav-dropdown">
                                    <li><a href="#">CLASSIC</a>
                                        <ul class="nav-dropdown">
                                            <li><a href="../shop-full-width.html">Full width</a></li>
                                            <li><a href="../shop-left-sidebar.html">Left sidebar</a></li>
                                            <li><a href="../shop-right-sidebar.html">Right sidebar</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">PRODUCT DETAILS</a>
                                        <ul class="nav-dropdown">
                                            <li><a href="../product-full-width.html">Full width</a></li>
                                            <li><a href="../product-left-sidebar.html">Left sidebar</a></li>
                                            <li><a href="../product-right-sidebar.html">Right sidebar</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="../shopping-cart.html">SHOPING CART</a></li>
                                    <li><a href="../checkout.html">CHECKOUT</a></li>
                                </ul>
                            </li>
                            <li><a href="#">BLOG</a>
                                <ul class="nav-dropdown">
                                    <li><a href="#">CLASSIC</a>
                                        <ul class="nav-dropdown">
                                            <li><a href="../blog-full-width.html">Full width</a></li>
                                            <li><a href="../blog-left-sidebar.html">Left sidebar</a></li>
                                            <li><a href="../blog-right-sidebar.html">Right sidebar</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">GRID</a>
                                        <ul class="nav-dropdown">
                                            <li><a href="../blog-grid-one-column.html">One column</a></li>
                                            <li><a href="../blog-grid-two-column.html">Two column</a></li>
                                            <li><a href="../blog-grid-three-column.html">Three column</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">MASONRY</a>
                                        <ul class="nav-dropdown">
                                            <li><a href="../masonry-two-columns.html">Two Columns</a></li>
                                            <li><a href="../masonry-three-columns.html">Three Columns</a></li>
                                            <li><a href="../masonry-four-columns.html">Four Columns</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#">BLOG SINGLE</a>
                                        <ul class="nav-dropdown">
                                            <li><a href="../blog-single-full-width.html">Blog Single Full Width</a></li>
                                            <li><a href="../blog-single-left-sidebar.html">Blog Single Left Sidebar</a>
                                            </li>
                                            <li><a href="../blog-single-right-sidebar.html">Blog Single Right
                                                    Sidebar</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </div>
        <!-- MEGAMENU END -->

        <!-- PAGE HERO START -->
        <div class="pages-hero">
            <div class="pages-hero-diagonal"></div>
            <div class="container">
                <div class="pages-title-center">
                    <h1>Tables</h1>
                    <p>Build modern websites with this powefull Multi-Purpose Template.</p>
                </div>
                <div class="left-page-nav">
                    <!-- Breadcrumbs -->
                    <ul class="breadcrumb">
                        <li><a href="#">Home</a></li>
                        <li>Elements</li>
                        <li class="current">Tables</li>
                    </ul>
                    <!--/ Breadcrumbs -->
                </div>
            </div>
        </div>
        <!-- PAGE HERO END -->
    </header>
    <!-- HEADER END -->

    <!-- CONTENT START -->
    <section>
        <div class="container table-element mt-5">
            <div class="center-title">
                <h2>Table</h2>
                <p>Style 1</p>
            </div>
            <div class="table">
                <div class="row-table header">
                    <div class="cell">
                        Name
                    </div>
                    <div class="cell">
                        Age
                    </div>
                    <div class="cell">
                        Occupation
                    </div>
                    <div class="cell">
                        Location
                    </div>
                </div>

                <div class="row-table">
                    <div class="cell" data-title="Name">
                        Luke Peters
                    </div>
                    <div class="cell" data-title="Age">
                        25
                    </div>
                    <div class="cell" data-title="Occupation">
                        Freelance Web Developer
                    </div>
                    <div class="cell" data-title="Location">
                        Brookline, MA
                    </div>
                </div>

                <div class="row-table">
                    <div class="cell" data-title="Name">
                        Joseph Smith
                    </div>
                    <div class="cell" data-title="Age">
                        27
                    </div>
                    <div class="cell" data-title="Occupation">
                        Project Manager
                    </div>
                    <div class="cell" data-title="Location">
                        Somerville, MA
                    </div>
                </div>

                <div class="row-table">
                    <div class="cell" data-title="Name">
                        Maxwell Johnson
                    </div>
                    <div class="cell" data-title="Age">
                        26
                    </div>
                    <div class="cell" data-title="Occupation">
                        UX Architect & Designer
                    </div>
                    <div class="cell" data-title="Location">
                        Arlington, MA
                    </div>
                </div>

                <div class="row-table">
                    <div class="cell" data-title="Name">
                        Harry Harrison
                    </div>
                    <div class="cell" data-title="Age">
                        25
                    </div>
                    <div class="cell" data-title="Occupation">
                        Front-End Developer
                    </div>
                    <div class="cell" data-title="Location">
                        Boston, MA
                    </div>
                </div>
            </div>
        </div>

        <div class="container table-element mt-5">
            <div class="center-title">
                <h2>Table</h2>
                <p>Style 2</p>
            </div>
            <div class="table">
                <div class="row-table header green">
                    <div class="cell">
                        Product
                    </div>
                    <div class="cell">
                        Unit Price
                    </div>
                    <div class="cell">
                        Quantity
                    </div>
                    <div class="cell">
                        Date Sold
                    </div>
                    <div class="cell">
                        Status
                    </div>
                </div>

                <div class="row-table">
                    <div class="cell" data-title="Product">
                        Solid oak work table
                    </div>
                    <div class="cell" data-title="Unit Price">
                        $800
                    </div>
                    <div class="cell" data-title="Quantity">
                        10
                    </div>
                    <div class="cell" data-title="Date Sold">
                        03/15/2014
                    </div>
                    <div class="cell" data-title="Status">
                        Waiting for Pickup
                    </div>
                </div>

                <div class="row-table">
                    <div class="cell" data-title="Product">
                        Leather iPhone wallet
                    </div>
                    <div class="cell" data-title="Unit Price">
                        $45
                    </div>
                    <div class="cell" data-title="Quantity">
                        120
                    </div>
                    <div class="cell" data-title="Date Sold">
                        02/28/2014
                    </div>
                    <div class="cell" data-title="Status">
                        In Transit
                    </div>
                </div>

                <div class="row-table">
                    <div class="cell" data-title="Product">
                        27" Apple Thunderbolt displays
                    </div>
                    <div class="cell" data-title="Unit Price">
                        $1000
                    </div>
                    <div class="cell" data-title="Quantity">
                        25
                    </div>
                    <div class="cell" data-title="Date Sold">
                        02/10/2014
                    </div>
                    <div class="cell" data-title="Status">
                        Delivered
                    </div>
                </div>

                <div class="row-table">
                    <div class="cell" data-title="Product">
                        Bose studio headphones
                    </div>
                    <div class="cell" data-title="Unit Price">
                        $60
                    </div>
                    <div class="cell" data-title="Quantity">
                        90
                    </div>
                    <div class="cell" data-title="Date Sold">
                        01/14/2014
                    </div>
                    <div class="cell" data-title="Status">
                        Delivered
                    </div>
                </div>
            </div>
        </div>

        <div class="container table-element mt-5 mb-5">
            <div class="center-title">
                <h2>Table</h2>
                <p>Style 3</p>
            </div>
            <div class="table">
                <div class="row-table header blue">
                    <div class="cell">
                        Username
                    </div>
                    <div class="cell">
                        Email
                    </div>
                    <div class="cell">
                        Password
                    </div>
                    <div class="cell">
                        Active
                    </div>
                </div>

                <div class="row-table">
                    <div class="cell" data-title="Username">
                        ninjalug
                    </div>
                    <div class="cell" data-title="Email">
                        misterninja@hotmail.com
                    </div>
                    <div class="cell" data-title="Password">
                        ************
                    </div>
                    <div class="cell" data-title="Active">
                        Yes
                    </div>
                </div>

                <div class="row-table">
                    <div class="cell" data-title="Username">
                        jsmith41
                    </div>
                    <div class="cell" data-title="Email">
                        joseph.smith@gmail.com
                    </div>
                    <div class="cell" data-title="Password">
                        ************
                    </div>
                    <div class="cell" data-title="Active">
                        No
                    </div>
                </div>

                <div class="row-table">
                    <div class="cell" data-title="Username">
                        1337hax0r15
                    </div>
                    <div class="cell" data-title="Email">
                        hackerdude1000@aol.com
                    </div>
                    <div class="cell" data-title="Password">
                        ************
                    </div>
                    <div class="cell" data-title="Active">
                        Yes
                    </div>
                </div>

                <div class="row-table">
                    <div class="cell" data-title="Username">
                        hairyharry19
                    </div>
                    <div class="cell" data-title="Email">
                        harryharry@gmail.com
                    </div>
                    <div class="cell" data-title="Password">
                        ************
                    </div>
                    <div class="cell" data-title="Active">
                        Yes
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- CONTENT END -->

    <!-- FOOTER START -->
    <footer>
        <div class="container mt-5">
            <div class="top-footer">
                <div class="row">
                    <div class="col-lg-12 col-xl-7">
                        <h3>Creative and affordable website solution</h3>
                        <p>Build modern websites with this powefull Multi-Purpose Template.</p>
                    </div>
                    <div class="col-lg-12 col-xl-5">
                        <div class="footer-btn">
                            <a class="tp-btn-primary" href="https://themeforest.net/item/merit-premium-multipurpose-html5-template/21866679" target="_blank" role="button">Purchase now</a>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="footer-line">
            <div class="center-footer">
                <div class="row">
                    <div class="col-lg-5">
                        <div class="footer-col footer-left-col">
                            <figure class="site-footer-logo">
                                <img src="../images/logos/logo.png" alt="">
                            </figure>
                            <p>Let's develop your project with this impressive and powerful template that helps you
                                create beautiful web pages. An original solution for any business.</p>
                            <ul class="footer-social">
                                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fab fa-dribbble"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="footer-col">
                            <h5>Quick Links</h5>
                            <ul class="quick-links">
                                <li><a href="../index.html">Home</a></li>
                                <li><a href="../services-style-1.html">Services</a></li>
                                <li><a href="../blog-full-width.html">Blogs</a></li>
                                <li><a href="../contact-style-1.html">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-2">
                        <div class="footer-col">
                            <h5>About</h5>
                            <ul class="quick-links">
                                <li><a href="../profile-style-1.html">Profile</a></li>
                                <li><a href="../team-style-1.html">Team</a></li>
                                <li><a href="../careers-style-1.html">Careers</a></li>
                                <li><a href="../faq.html">FAQ</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="footer-col">
                            <h5>Get in Touch</h5>
                            <ul class="footer-contact">
                                <li class="phone"><a href="tel:123-456-7890">+ 123-456-7890</a></li>
                                <li class="email"><a href="mailto:info@merit.com">info@merit.com</a></li>
                                <li>
                                    <div class="d-flex">
                                        <div class="flex-shrink-0">
                                            <i class="fas fa-map-pin"></i>
                                        </div>
                                        <div class="flex-grow-1 ms-3">
                                            <p>7391 North Bay Meadows Circle New York, NY 10040.</p>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="footer-line">
            <div class="bottom-footer">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="footer-copyright">
                            <p>© 2022 <a
                                    href="https://themeforest.net/item/merit-premium-multipurpose-html5-template/21866679"
                                    target="_blank">Merit Premium Template</a> all rights reserved.</p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <ul class="footer-terms">
                            <li><a href="../terms.html">Terms</a></li>
                            <li><a href="../privacy.html">Privacy</a></li>
                            <li><a href="../support.html">Support</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- FOOTER END -->

    <!-- SCROLL TOP -->
    <a href="#0" class="cd-top">Top</a>

    <!-- JAVASCRIPTS START -->
    <script src="../js/lib/jquery-3.6.0.min.js"></script>
    <script src="../js/lib/bootstrap.min.js"></script>
    <script src="../js/lib/plugins.js"></script>
    <script src="../js/lib/megamenu.js"></script>
    <script src="../js/lib/navigation.js"></script>
    <script src="../js/lib/navigation.fixed.min.js"></script>
    <script src="../js/main.js"></script>
    <!-- JAVASCRIPTS END -->

</body>


<!-- Mirrored from quickdevs.com/demo/merit/elements/tables.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 29 Mar 2023 10:24:33 GMT -->
</html>