Responsive Pricing Table using HTML & 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. Creating an innovative table snippet with HTML and CSS is a fundamental web development skill. HTML provides the structure, while CSS enhances the style and layout. A typical table consists of rows and columns, each filled with data or content. CSS can be used to customize the appearance of the table. By combining HTML and CSS, you can create visually appealing and clear tables that effectively present information on your website. Properly designed tables not only improve readability, but also contribute to an engaging user experience, making them a valuable tool in web design. In addition, you can add hover effects and responsive design with CSS, making your tables interactive and accessible on different devices. This table is fully responsive and 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 table snippet, you not only share information, but also show that you are committed to professionalism and modern web design. Show yourself and interact with the world with this innovative 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 Responsive 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>TLD</th> <th>DURATION</th> <th>PRICE</th> <th>RENEWAL</th> <th>TRANSFER</th> <th>REGISTER</th> </tr> <tr> <td>.com</td> <td>2 years</td> <td>$70.00</td> <td>$5.00</td> <td>$10.00</td> <td><button>Sign In</button></td> </tr> <tr> <td>.in</td> <td>2 years</td> <td>$75.00</td> <td>$5.00</td> <td>$10.00</td> <td><button>Sign In</button></td> </tr> <tr> <td>.org</td> <td>2 years</td> <td>$65.00</td> <td>$5.00</td> <td>$10.00</td> <td><button>Sign In</button></td> </tr> <tr> <td>.me</td> <td>2 years</td> <td>$60.00</td> <td>$5.00</td> <td>$10.00</td> <td><button>Sign In</button></td> </tr> <tr> <td>.edu</td> <td>2 years</td> <td>$80.00</td> <td>$5.00</td> <td>$10.00</td> <td><button>Sign In</button></td> </tr> <tr> <td>.net</td> <td>2 years</td> <td>$55.00</td> <td>$5.00</td> <td>$10.00</td> <td><button>Sign In</button></td> </tr> <tr> <td>.blog</td> <td>2 years</td> <td>$50.00</td> <td>$5.00</td> <td>$10.00</td> <td><button>Sign In</button></td> </tr> <tr> <td>.net</td> <td>2 years</td> <td>$45.00</td> <td>$5.00</td> <td>$10.00</td> <td><button>Sign In</button></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{
    background-color: rgb(19, 19, 19);
    font-family: 'Mukta', sans-serif;
}
.container{
    min-height:100vh;
    max-width:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.sub-container{
    text-align: center;
    border-radius:5px;
    width:80vw;
}
.sub-container table{
    border-collapse: separate;
    border-spacing: 0px 15px;
    width:100%;
}
.sub-container  th{
    color: var(--bg);
    background-color:#383838;
    padding: 20px;
}
.sub-container  td{
    padding: 10px;
    background-color:#232323;
    color: #ffffff;  

}
.sub-container  td:first-child,th:first-child{
    border-top-left-radius:11px;
    border-bottom-left-radius:11px;
}
.sub-container  td:last-child,th:last-child{
    border-bottom-right-radius:11px;
    border-top-right-radius:11px;
}
.sub-container button{
    width:100px;
    height:30px;
    border: none;
    border-radius: 5px;
    background-color: #383838;
    color:var(--bg);
}
.sub-container button:hover{
    cursor: pointer;
    color:black;
    background-color:#aecbd4;
    transition:0.5s;
}
span{
    color:#ffffff
}
@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;
        border-radius:11px;
    }
    .sub-container  td:nth-of-type(1)::before{
        content: "TLD" " :";
    }
    .sub-container  td:nth-of-type(2)::before{
        content: "DURATION" " :";
    }
    .sub-container  td:nth-of-type(3)::before{
        content: "PRICE" " :";
    }
    .sub-container  td:nth-of-type(4)::before{
        content: "RENEWAL" " :";
    }
    .sub-container  td:nth-of-type(5)::before{
        content: "TRANSFER" " :";
    }
    .sub-container  td:nth-of-type(6)::before{
        content: "REGISTER" " :";
    }
}
.credit a{
    text-decoration: none;
    color: #ddd;
    font-weight: 800;
}
.credit{
    color: #ddd;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
We hope you would like this Responsive Pricing Table using HTML CSS.

Thank you for reading our blog. If you face any problem in Creating a Responsive 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