Styles Table with awesome Hover effect using HTML And CSS : Source Code

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.

Styles Table with awesome Hover effect using HTML And CSS || Web Tutorials : Source Code

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%;
    }
}