Pricing Table Using HTML and CSS

0







Hello Developers, Learning Robo offers a dynamic and visually appealing table snippet that shows your data at a glance. This table snippet was precisely created with HTML and CSS. An innovatively designed HTML and CSS table snippet is a powerful tool for displaying data in a clear and visually appealing way. By utilizing the structure of HTML and the design capabilities of CSS, 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 other information, a well-designed HTML and CSS table can enhance the design and functionality of your website. In addition, you can add hover effects and responsive design with CSS so that your tables are interactive and accessible on different devices. This table is fully responsive, which ensures a seamless viewing experience on different devices. Whether on a desktop, laptop, tablet or smartphone, your data will always be clearly displayed. With this HTML and CSS-based table snippet, you're not just sharing data, – you're making a statement about your commitment to professionalism and modern web design. Impress the world with this creative and informative table snippet. Remark: The CSS is coded in a separate file and linked to the HTML file. We have changed the UI for the mobile view so that if you add an additional header row in the table, you need to add nth-of-child in CSS.

How to Create Pricing Table using HTML and CSS .[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>Table UI design - learningrobo</title> <meta name="description" content="Table UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="learningrobo.com table,responsive,learningrobo.com,html & css projects"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.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 style="color:tomato;font-size:20px;">❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> </div> <!--Check our website Regularly For New Snippets Post--> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


/** 
Hello Future Developer Thanks for Using learningrobo.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;
}
We hope you would like this Pricing Table using HTML CSS.

Thank you for reading our blog. If you face any problem in Creating a Pricing Table using HTML CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome