Hello developers, today in this blog, you'll learn how to create a Modern Table Layout using HTML & CSS.
A 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 (Modern Table Layout), as you see on the webpage, there are nine rows and six 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 Modern Table Layout, the data in a column are alternatively colored. You can even color for the rows and columns separately.
In this Modern Table Layout, the th tag stands for table heading, tr tag stands for table row and td stands for table data. In this modern table layout, 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 Modern Table Layout 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 Modern Table Layout with your creativity and can take this table to the next level.
Modern Table Layout using HTML & 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.
@import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Roboto');
*{
margin:0;
padding: 0;
outline: 0;
}
body{
background: #1488CC;
background: -webkit-linear-gradient(to right, #2B32B2, #1488CC);
background: linear-gradient(to right, #2B32B2, #1488CC);
}
table{
position: relative;
margin:10% 20% 0 20%;
width: 60%;
border-collapse: collapse;
border-spacing: 0;
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;
overflow: hidden;
}
td , th{
padding: 15px 20px;
text-align: center;
}
th{
background-color: #000;
color: #fafafa;
font-family: 'Open Sans',Sans-serif;
font-weight: 200;
text-transform: uppercase;
}
tr{
width: 100%;
color:#fff;
font-family: 'Montserrat', sans-serif;
}
tr:nth-child(even){
background-color: #002147;
}
tr:nth-child(odd){
background-color: #12192c;
}
.credit a{
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin: 10px;
}
Thank you for reading our blog. If you face any problem in creating this Modern Table Layout 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