Tutorial 8
Styles Table with awesome Hover effect using HTML And CSS || Web Tutorials : Source Code
Hey Guys , Welcome To My Blog :- Web Tutorials || Yuvan Art
Full Process To Create Styles Table :- Click On The Below Link To Watch Full Process To Make Styles Table Using HTML And CSS.
Part ( 1 ) HTML Code :-
<!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>Styling Table</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>12th Examination Result</h2>
<table>
<tr id="head">
<th>Subjects</th>
<th>Theory</th>
<th>Practical</th>
<th>Total Marks</th>
<th>Grades</th>
</tr>
<tr>
<th class="head">English</th>
<td>82</td>
<td>-</td>
<td>82</td>
<td>A</td>
</tr>
<tr>
<th class="head">Hindi</th>
<td>85</td>
<td>-</td>
<td>85</td>
<td>A</td>
</tr>
<tr>
<th class="head">Maths</th>
<td>77</td>
<td>-</td>
<td>77</td>
<td>A</td>
</tr>
<tr>
<th class="head">Chemistry</th>
<td>31</td>
<td>30</td>
<td>61</td>
<td>B</td>
</tr>
<tr>
<th class="head">physics</th>
<td>63</td>
<td>30</td>
<td>93</td>
<td>A</td>
</tr>
<tr>
<th class="head">Grand Total</th>
<td>338</td>
<td>60</td>
<td>398</td>
<td>A</td>
</tr>
<tr id="last">
<th colspan="2">Percentages = 79.6%</th>
<th>---</th>
<th colspan="2">Result : Passed In First Division</th>
</tr>
</table>
</body>
</html>
Part ( 2 ) CSS Code :-
body{
padding: 0;
margin: 0;
}
table{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-collapse: collapse;
width: 800px;
height: 200px;
border: 1px solid #bdc3c7;
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);
}
tr{
transition: a .2s ease-in;
cursor: pointer;
}
th, td{
padding: 12px;
text-align: left;
border-bottom: 1px solid #ddd;
}
#head, #last{
background-color: #16a085;
color: #fff;
}
h2{
font-weight: 600;
text-align: center;
background-color: #16a085;
color: #fff;
padding: 10px 0px;
}
tr:hover{
background-color: #f5f5f5;
transform: scale(1.02);
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2), -1px -1px 8px rgba(0, 0, 0, 0.2);
}
@media only screen and (max-width: 878px) {
table{
width: 90%;
}
}
Thank You !!!
Comments
Post a Comment