You will learn to create a table design in this blog, which we will learn to create a responsive table with the help of html and css.
By using css table, we help a lot in creating the beauty and design of the website, which we will learn to make a responsive table in this blog, which is created by using any frame work. This responsive table design has been custom made, which is going to help you a lot in the future, this table decoration which is made from html and css.
In the website we have to put the data inside the table for which we either use frame work or we design the table but we are not able to make it responsive, so we will design a custom and responsive table for you. I have brought which you guys will like this design very much.
You might like this:
We have created this table by dividing it into multiple rows and columns, in which we have put the data inside the table which you are seeing in the image above.
By using all the columns, we designed the columns of responsive table design in mobile and tabs in rows with the help of attributes, which you will love this trick, which is a helpful design.
Now we know that it was designed with the help of css and html. How is the code for Responsive Table Design written?
First of all we know in this table design how the code of htm is written. A div is taken inside the body tag whose class name is { class="table-container" }.
The table tag has been taken inside this div (to design the table we have first written the table tag) and inside this table tag the head tag ( <thead> ) is taken. Head tag is used for this, if we have to write heading inside the table, then we use this tag.
And inside this head tag we have taken a rows tag ( <tr> ) we have to create rows inside the table, then we write this tag. And inside this rows tag <th> tag is taken which is written to bleed the text of the table.
Another body tag has been taken inside the table tag ( <table> ) which we write this tag ( <tbody> ) using this tag we write as much data as we have to put inside the table inside this tag itself.
We hope above that you have understood this responsive table design completely. If you using this css and html a responsive table is well designed.
If you want to clear Doubt this Responsive Table Design Only HTML & CSS, then you can end your confusion by watching the video which we have given to the video below.
I hope you have understood by watching the above video, in which step by step code is written, the htlm and css code of this video is given below, which you can easily copy this code. And paste it in the software of your system and you can see it in your browser.
HTML CODE FILE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Table Desing Using HTML & CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>#</th>
<th>Full Name</th>
<th>Age</th>
<th>Status</th>
<th>Job Title</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ravi Ranjan Prakash</td>
<td>31</td>
<td><span class="label label-success">Active</span></td>
<td>iOS Developer</td>
<td><a href="#" class="btn">Manage</a></td>
</tr>
<tr>
<td>2</td>
<td>Ram Sundar Singh</td>
<td>25</td>
<td><span class="label label-warning">Inactive</span></td>
<td>UI/UX Developer</td>
<td><a href="#" class="btn">Manage</a></td>
</tr>
<tr>
<td>3</td>
<td>Rajiv Kumar Singh</td>
<td>26</td>
<td><span class="label label-success">active</span></td>
<td>Frontend Developer</td>
<td><a href="#" class="btn">Manage</a></td>
</tr>
<tr>
<td>4</td>
<td>Hetansh Kumar Singh</td>
<td>29</td>
<td><span class="label label-danger">Blocked</span></td>
<td>Web Desingner</td>
<td><a href="#" class="btn">Manage</a></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CSS CODE FILE :
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: sans-serif;
background: linear-gradient(104deg, #204B66, #00324a);
background-size: cover;
}
.table-container{
display: flex;
justify-content: center;
margin:20vh auto;
width: 80%;
background-color: #fff;
border-radius: 10px;
padding: 5px;
}
table{
width: 100%;
box-shadow: 15px 15px #0000000d;
border-collapse: collapse;
}
tr:nth-of-type(odd){
background-color: #006cc6;
color: #fff;
}
tr:nth-of-type(even){
background-color: #fff;
color: #333;
}
th{
background-color: #Dc005A;
color: #fff;
font-weight: 800;
font-size: 20px;
}
td,th{
padding: 12px;
border: 1px solid #ccc;
text-align: center;
}
.label{
display: inline;
padding: 0.2em 0.6em 0.3em;
font-size: 75%;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 0.25em;
}
.label-success{
background-color: #5cb85c;
}
.label-warning{
background-color: #f0ad4e;
}
.label-danger{
background-color: #d9534f;
}
.btn{
color: #fff;
background-color: #37BC9B;
font-size: 13px;
padding: 5px 8px;
border: none;
border-radius: 2px;
transition: all 0.3s ease;
text-decoration: none;
}
.btn:hover{
background-color: #2e9c81;
}
@media only screen and (max-width:768px),
(min-device-width:768px) and (max-device-width:992px){
.table-container{
width:95%;
background: transparent;
}
table,
thead,
tbody,
th,
td,
tr{
display: block;
}
thead tr{
position: absolute;
top: -9999px;
left: -9999px;
}
tr{
border: 1px solid #ccc;
margin-bottom: 10px;
}
td{
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
text-align: right;
}
td::before{
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-size: 16px;
font-weight: 600;
text-align: left;
}
td:nth-of-type(1)::before{
content: "#";
}
td:nth-of-type(2)::before{
content: "Full Name";
}
td:nth-of-type(3)::before{
content: "Age";
}
td:nth-of-type(4)::before{
content: "Status";
}
td:nth-of-type(5)::before{
content: "Job Title";
}
td:nth-of-type(6)::before{
content: "Action";
}
}
Post a Comment