Table of Contents

HTML & CSS Snippet 2 Source code w3pupil.com

Share Now :

Title : Responsive Table Design Ui Using HTML & CSS

Description

Hello W3PUPIL!!

W3pupil provides a dynamic and visually appealing table snippet that showcases your data in a single glance. This table snippet is created with precision using HTML and CSS.

An innovatively designed HTML and CSS table snippet is a powerful tool for presenting data in an organized and visually appealing manner. By leveraging HTML’s structure and CSS’s styling capabilities, you can create tables that not only convey information efficiently but also enhance the overall user experience. Whether you’re displaying financial data, product comparisons, or any other information, a well-crafted HTML and CSS table can elevate your website’s design and functionality. Additionally, CSS allows you to add hover effects and responsive design, making your tables interactive and accessible on various devices. This table is fully responsive, ensuring a seamless viewing experience on various devices. Whether on a desktop, laptop, tablet, or smartphone, your data is always presented in an organized manner.

With this HTML and CSS-powered table snippet, you’re not just sharing data – you’re making a statement about your commitment to professionalism and modern web design. Impress and engage with the world through this creative and informative table snippet.

Let's know how to create a file..

Creating and managing files and folders efficiently is crucial for a seamless development experience.A step-by-step tutorial is provided below:

W3pupil’s suggestion is to download and install Visual Studio Code.

  • After the successful completion of downloading and installing, open Visual Studio Code.
  • Create a new folder in your desktop.
  • Go to file and then open the folder created.
  • Then add a file for html with “.html” or “.htm” extension.
  • Also add another file for css with “.css” extension.
  • Now, you have a blank HTML file and CSS file ready for your code.

Let's know how to open a downloaded file..

  • After downloading the snippet file from W3pupil, you will receive a zip file.
  • Extract the file and open it in Visual Studio Code.
  • Now you have the HTML file and CSS file to work with.
  • Take time to fully understand the code’s functionality before making any desired changes.

Let's take a look at a code snippet created by W3pupil team using HTML and CSS.

HTML SOURCE CODE LOGO

HTML Source Code

HTML (Hypertext Markup Language) is a standard markup language for creating web pages, defining their structure and content using a system of tags and elements. (index.html)

  <!--Hello Future Developer Thanks for Using w3pupil.com, Share & Support us-->
<div class="container">
<div class="sub-container">
    <table>
        <tr>
            <th>DATE</th>
            <th>ORDER ID</th>
            <th>NAME</th>
            <th>PRICE</th>
            <th>QUANTITY</th>
            <th>TOTAL</th>
            </tr>
        <tr>
            <td>23-08-2023</td>
            <td>90012</td>
            <td>Apple MacBook Air</td>
            <td>Rs 99,900</td>
            <td>4</td>
            <td>Rs 3,99,600</td>
        </tr>
        <tr>
            <td>24-08-2023</td>
            <td>90023</td>
            <td>HP 15s</td>
            <td>Rs 38,500</td>
            <td>9</td>
            <td>Rs 3,46,500</td>
        </tr>
        <tr>
            <td>25-08-2023</td>
            <td>90034</td>
            <td>Dell Inspiron 15 3511</td>
            <td>Rs 46,500</td>
            <td>2</td>
            <td>Rs 93,000</td>
        </tr>
        <tr>
            <td>26-08-2023</td>
            <td>90045</td>
            <td>ASUS VivoBook Pro 14 OLED</td>
            <td>Rs 59,990</td>
            <td>7</td>
            <td>Rs 4,19,930</td>
        </tr>
        <tr>
            <td>27-08-2023</td>
            <td>90056</td>
            <td>Lenovo IdeaPad Slim 5i</td>
            <td>Rs 60,728</td>
            <td>4</td>
            <td>Rs 2,42,912</td>
        </tr>
        <tr>
            <td>28-08-2023</td>
            <td>90067</td>
            <td>Acer Aspire 5</td>
            <td>Rs 54,750</td>
            <td>6</td>
            <td>Rs 3,28,500</td>
        </tr>
        <tr>
            <td>29-08-2023</td>
            <td>90078</td>
            <td>Mi Notebook Pro</td>
            <td>Rs 57,990</td>
            <td>3</td>
            <td>Rs 1,73,970</td>
        </tr>
        <tr>
            <td>30-08-2023</td>
            <td>90089</td>
            <td>Acer Aspire Lite</td>
            <td>Rs 41,990</td>
            <td>5</td>
            <td>Rs 2,09,950</td>
        </tr>
        <tr>
            <td>31-08-2023</td>
            <td>90090</td>
            <td>Acer Extensa 15 </td>
            <td>Rs 26,990</td>
            <td>6</td>
            <td>Rs 1,61,940</td>
        </tr>
        <tr>
            <td>01-09-2023</td>
            <td>90001</td>
            <td>HP Victus</td>
            <td>Rs 61,990</td>
            <td>5</td>
            <td>Rs 3,09,995</td>
        </tr>
        <tr>
            <td>02-09-2023</td>
            <td>90112</td>
            <td>HP Pavilion</td>
            <td>Rs 65,990</td>
            <td>4</td>
            <td>Rs 2,63,960</td>
        </tr>
        <tr>
            <td>03-09-2023</td>
            <td>90123</td>
            <td>Dell Inspiron 7420</td>
            <td>Rs 53,990</td>
            <td>8</td>
            <td>Rs 4,31,920</td>
        </tr>
        <tr>
            <td>04-09-2023</td>
            <td>90134</td>
            <td>Xiaomi Notebook Ultra Max</td>
            <td>Rs 48,999</td>
            <td>5</td>
            <td>Rs 2,44,995</td>
        </tr>
        <tr>
            <td>05-09-2023</td>
            <td>90145</td>
            <td>Apple 2023 MacBook Pro</td>
            <td>Rs 3,49,900</td>
            <td>1</td>
            <td>Rs 3,49,900</td>
        </tr>
        <tr>
            <td>06-09-2023</td>
            <td>90156</td>
            <td>Apple 2023 MacBook Air</td>
            <td>Rs 1,49,890</td>
            <td>1</td>
            <td>Rs 1,49,890</td>
        </tr>
    </table>
    <div class="credit">Made with <span>❤ </span>by <a href="https://www.w3pupil.com/">W3pupil</a></div>
</div>
</div>
<!--Check our website Regularly For New Snippets Post-->  
CSS SOURCE CODE IMAGE

CSS Source Code

CSS (Cascading Style Sheet) enhances website aesthetics and layout, applying styles and design elements to create a visually appealing and responsive user interface. (style.css)

  /** 
Hello Future Developer Thanks for Using w3pupil.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@300&family=Nunito+Sans:opsz,wght@6..12,300&display=swap');
:root{
    --bg:#ffffff;
}
body{
    font-family: 'Mukta', sans-serif;
    background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
}
.container{
    min-height:100vh;
    max-height:auto;
    display:flex;
    justify-content:center;
    flex-direction: column;
    align-items:center;
}
.sub-container{
    background-color: var(--bg);
    border-radius: 5px;
    text-align: center;
    width:80vw;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.sub-container table {
    width:100%;
    border-collapse: collapse;
}
.sub-container  th{
    background-color: #36304c;
    color: var(--bg);
    padding: 20px;
}
.sub-container  td{
    padding: 8px;
}
.sub-container tr:nth-child(odd) {
    background-color: #f2f2f2;
}
.sub-container tr:hover {
    background-color: hsla(106, 85%, 79%, 0.5);
    transition:.5s;
}
@media only screen and (max-width: 1024px){
    .sub-container{
        width:95vw;
    }
}
@media only screen and (max-width: 630px){
    .sub-container  th{
        display: none;
    }
    .sub-container  td{
        display:grid;
        grid-template-columns: 15ch auto;
        text-align: left;
        margin:5px;
        padding:.5px;
    }
    .sub-container  td:first-child{
        padding-top: 5px;
    }
    .sub-container  td:last-child{
        padding-bottom: 5px;
    }
    .sub-container  td:nth-of-type(1)::before{
        content: "DATE" " :";
    }
    .sub-container  td:nth-of-type(2)::before{
        content: "ORDER ID" " :";
    }
    .sub-container  td:nth-of-type(3)::before{
        content: "NAME" " :";
    }
    .sub-container  td:nth-of-type(4)::before{
        content: "PRICE" " :";
    }
    .sub-container  td:nth-of-type(5)::before{
        content: "QUANTITY" " :";
    }
    .sub-container  td:nth-of-type(6)::before{
        content: "TOTAL" " :";
    }
}
.credit a{
    text-decoration: none;
    color: #121212;
    font-weight: 800;
}
.credit{
    color: #121212;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}    

Note :

  • The CSS is coded in a separate file and linked to the HTML file.
  • We have changed UI for mobile view for that if you add extra header in the table you must add nth-of-child in CSS.

Download :

Share and Support W3pupil.com

Conclusion :

To modify the code, you can download the snippet’s source code files. To enhance your skills in HTML and CSS, you can try to recreate other creative HTML and CSS snippets available on W3pupil. In case you experience any technical related doubts, you are welcome to contact W3pupil. We’ll try to solve your request at the earliest.

Like Reaction
Like Reaction
Like Reaction
Like Reaction
Like Reaction

LivePreview :