8770447379 | Info@paramclasses.in
Paramclasses Academy - Blog

Blog

Home / Blog

Blog Details

Interactive Student Grades Overview: Building a Responsive Table with HTML and CSS

Interactive Student Grades Overview: Building a Responsive Table with HTML and CSS

October 16, 2024

1. HTML (table.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylish Table using HTML and CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="table-container">
        <h2>Student Grades</h2>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Mathematics</th>
                    <th>Science</th>
                    <th>English</th>
                    <th>History</th>
                    <th>Geography</th>
                    <th>Grade</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Anuradha</td>
                    <td>A</td>
                    <td>B</td>
                    <td>A</td>
                    <td>A</td>
                    <td>B</td>
                    <td>A</td>
                    <td>Pass</td>
                </tr>
                <tr>
                    <td>Devendra</td>
                    <td>B</td>
                    <td>C</td>
                    <td>B</td>
                    <td>A</td>
                    <td>C</td>
                    <td>B</td>
                    <td>Pass</td>
                </tr>
                <tr>
                    <td>Nikhil</td>
                    <td>C</td>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>A</td>
                    <td>B</td>
                    <td>Pass</td>
                </tr>
                <tr>
                    <td>Roshan Dev</td>
                    <td>D</td>
                    <td>D</td>
                    <td>C</td>
                    <td>B</td>
                    <td>D</td>
                    <td>C</td>
                    <td>Fail</td>
                </tr>
                <tr>
                    <td>Sushmita</td>
                    <td>B</td>
                    <td>A</td>
                    <td>A</td>
                    <td>A</td>
                    <td>A</td>
                    <td>A</td>
                    <td>Pass</td>
                </tr>
                <tr>
                    <td>Pooja</td>
                    <td>C</td>
                    <td>B</td>
                    <td>A</td>
                    <td>D</td>
                    <td>B</td>
                    <td>B</td>
                    <td>Pass</td>
                </tr>
                <tr>
                    <td>Gouri</td>
                    <td>A</td>
                    <td>A</td>
                    <td>B</td>
                    <td>A</td>
                    <td>C</td>
                    <td>A</td>
                    <td>Pass</td>
                </tr>
                <tr>
                    <td>Heena</td>
                    <td>B</td>
                    <td>B</td>
                    <td>C</td>
                    <td>B</td>
                    <td>A</td>
                    <td>B</td>
                    <td>Pass</td>
                </tr>
                <tr>
                    <td>Imran</td>
                    <td>A</td>
                    <td>C</td>
                    <td>B</td>
                    <td>A</td>
                    <td>B</td>
                    <td>A</td>
                    <td>Pass</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

2. CSS (style.css)

 

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

.table-container {
    width: 90%;
    max-width: 800px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
    margin-bottom: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

th {
    background-color: #4CAF50;
    color: white;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}

Explanation:

HTML:

  1. Table Structure:
    • The table is wrapped in a div with the class table-container.
    • It includes a heading (<h2>) and a <table> element.
    • The table has a header section (<thead>) and a body section (<tbody>).
    • Each row of the table consists of <tr> elements, containing header cells (<th>) in the header and data cells (<td>) in the body.

CSS:

  1. Layout and Centering:
    • The body uses Flexbox to center the table container on the page.
    • The table container has a white background, padding, rounded corners, and a subtle shadow.
  2. Table Styling:
    • The table takes up the full width of its container, and border-collapse: collapse; ensures that borders between cells are combined.
    • Padding is applied to both table headers (<th>) and data cells (<td>), with a light border around each cell.
  3. Header Styling:
    • The header cells have a green background (#4CAF50) and white text for contrast.
  4. Row Styling:
    • Every even row of the table has a light grey background color to enhance readability.
    • The :hover effect changes the background color of a row when hovered over, providing a nice visual effect.

Recent post

Interactive Student Grades Overview: Building a Responsive Table with HTML and CSS
October 16, 2024
Interactive Student Grades Overview: Building a Responsive Table with HTML and CSS
How to Create a Stylish Centered Login Form Using HTML and CSS
October 16, 2024
How to Create a Stylish Centered Login Form Using HTML and CSS
What is an Array method in Java script ?
October 16, 2024
What is an Array method in Java script ?
What is an Array in Javascript with explaination ?
October 16, 2024
What is an Array in Javascript with explaination ?

Get In Touch

Paramwebinfo,Raja talab Pandri, Raipur,Chhattisgarh India

8770447379

Info@paramclasses.in

Quick Links

Home About Course Our Gallery Contact Us Terms & Conditions Privacy Policy

Explore More

Placement Registration Enquiry Login Registration sitemap

Recent post

Interactive Student Grades Overview: Building a Responsive Table with HTML and CSS
How to Create a Stylish Centered Login Form Using HTML and CSS
What is an Array method in Java script ?
What is an Array in Javascript with explaination ?

Copyright © Paramwebinfo Academy.All Rights Reserved

Designed by PARAMWEBINFO