Marksheet Using Table Tag

by Akash DineshKumar

HTML CSS
The Marksheet webpage is a structured HTML document designed to display a student’s examination results in a clear and professional format. It begins with a header section that highlights important details such as the exam title, student’s name, roll number, and division. This ensures that the identity of the student and the context of the exam are immediately visible at the top of the page.

The core of the webpage is the marksheet table, created using the <table> tag. The table is divided into three logical parts:

thead : Contains the column headings Subject Code, Subject Name, and Marks Obtained.

tbody: Displays individual subject entries with alternating row colors (light gray and white) for better readability. Each row shows the subject code, subject name, and marks obtained.

tfoot: Summarizes the results with total marks, percentage, and final result status. The summary rows are highlighted with a light green background to draw attention to the overall performance.

The table also uses a <colgroup> element to define column widths, ensuring consistent alignment and spacing. Attributes like border, cellpadding, and cellspacing are applied to make the table neat and easy to read. The alternating background colors in rows create a “zebra striping” effect, which is a common design practice to improve clarity in tabular data.
← Back to Akash DineshKumar
Ready to build, learn, or ship?

Join 500+ students and businesses who trust Versatile Technology
for education, development, and cybersecurity.