A layout that arranges its data into rows and columns. The table layout consists of several rows and columns in the table. You can create as many rows and columns as you need in the table.
In this blog (Responsive Event Booking Table), as you see on the webpage, there is a table with five columns and six rows. The first row of the table is considered to be the header line, where data or events can be entered in the upcoming rows. From the second row, data are listed. There is a column with a heading named Booking Status, that consists of buttons. The book now buttons appears to be indifferent color than the closed button. The table tag is used to create the table. The tr tag stands for table row, which helps to create an entire row of the table. The tr tag contains th tag and the td tag. The th tag stands for table heading whereas td tag stands for table data.
The source code of this Responsive Event Booking 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 Event Booking Table with your creativity and can take this table to the next level.
Responsive Event Booking Table 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.
body {
font-family: "Roboto", sans-serif;
background: #FDC830;
background: -webkit-linear-gradient(to right, #F37335, #FDC830);
background: linear-gradient(to right, #F37335, #FDC830);
}
.table {
margin: 20px auto;
width: 90%;
border-spacing: 0;
text-align: center;
border-radius: 12px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
padding: 10px;
background-color: #12192c;
}
.table th {
font-weight: 300;
font-size: 16px;
color: #FDC830;
line-height: 26px;
padding: 18px 30px;
}
.table thead tr {
background: #12192c;
}
.table td {
padding: 30px 10px;
font-weight: 300;
font-size: 16px;
color: black-2;
line-height: 26px;
text-transform: uppercase;
color:#fff
}
.table tbody tr:nth-child(odd) {
background: #002147;
}
.table tbody tr:nth-child(even) {
background: #12192c;
}
.table__wrapper {
padding-top: 40px;
}
.btn {
display: inline-block;
font-weight: 700;
font-size: 15px;
line-height: 25px;
text-transform: uppercase;
width: 170px;
text-align: center;
padding: 10px;
border-radius:10px;
transition: 0.3s ease;
text-decoration: none;
}
.btn:hover {
color: white;
}
.btn__active {
color: #4ed99c;
border: 2px solid #4ed99c;
}
.btn__active:hover {
background: #4ed99c;
}
.btn__pledged {
color: #f14044;
border: 2px solid #f14044;
}
.btn__pledged:hover {
background: #f14044;
}
@media (max-width: 768px) {
.table td {
display: block;
text-align: right;
}
.table td:before {
content: attr(data-label);
float: left;
text-transform: uppercase;
font-weight: bold;
}
.table thead display none tr {
margin-bottom: 30px;
display: block;
}
}
.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 Responsive Event Booking 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