Hello developers, today in this blog, you'll learn how to create a Responsive Team Table using HTML & CSS.
A table layout that arranges its data into rows and columns. Table Layout consists of several rows and columns in the table. You can create as many rows and columns as you need.
In this blog (Responsive Team Table), as you see on the webpage, there are six rows and four columns. The first row of the table is the header line where the headings of each column can be filled. From the second row of the table, you can fill in the data. In this Responsive Team Table, the heading and the data in a row are differentiated using different colors and there is also a line that separates data from the heading.
This page is made responsive by using the CSS media query property. On the larger screen, consider the first row as a heading and all the other rows as data. Whereas on the smaller screen, each row contains the heading with its respective data.
In this Responsive Team Table, the th tag stands for table heading, tr tag stands for table row and td stands for table data. In this Responsive Team Table, by using the th tag the heading of the table is created, by using the tr tag the row of the table is created, and by using the td tag the data of the table is created.
The source code of this Responsive Team Table using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this code of Responsive Team Table with your creativity and can take this table to the next level.
Responsive Team Table [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.
body{
height:100vh;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
table {
width: 850px;
border-collapse: collapse;
margin:50px auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 12px;
}
th {
background: #152147;
color: white;
font-weight: bold;
border-bottom:2px solid#4158D0 ;
}
td, th {
padding: 30px 10px;
text-align: left;
font-size: 18px;
text-align: center;
}
td{
background-color: #12192c;
color:#fff;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
table {
width: 100%;
}
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
content: attr(data-column);
color: #000;
font-weight: bold;
}
}
.credit a{
text-decoration: none;
color: #fff;
font-weight: 800;
}
.credit {
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
color:#fff;
text-align: center;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Team Table using HTML & CSS then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team