Scribd
Upload
3 views3 pages

Grade 7 Sample Table HTML Program

The document contains two HTML examples for creating a simple student mark list table. The first example uses basic HTML elements, while the second incorporates CSS for styling, including hover effects and layout adjustments. Both tables display student names and their respective scores in theory and practical subjects.

Uploaded by

jacksonaria640
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

Grade 7 Sample Table HTML Program

The document contains two HTML examples for creating a simple student mark list table. The first example uses basic HTML elements, while the second incorporates CSS for styling, including hover effects and layout adjustments. Both tables display student names and their respective scores in theory and practical subjects.

Uploaded by

jacksonaria640
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

1.

Simple table using HTML 5

<html>
<head>
<title>Student Mark List</title>
</head>
<body>
<Table border=10 bordercolor=red width=75% height=50% cellspacing=10
cellpadding=20 bgcolor="yellow" background="[Link]">
<Caption>Student Mark List</caption>
<tr>
<th>Sl. No</th>
<th>Students' Name</th>
<th>CSC Theory</th>
<th>CSC Practical</th>
</tr>
<tr>
<th>1</th>
<th>Rani</th>
<th>50</th>
<th>50</th>
</tr>
<tr>
<th>2</th>
<th>Vani</th>
<th>45</th>
<th>48</th>
</tr>
</table >
</body>
</html>
2. Simple table using HTML and CSS

<html>
<head>
<title>Student Mark List</title>
<style>
caption{
font-size:40px;
color:red;
caption-side:bottom;
}

table{
background-color:yellow;
border:10px solid blue;
table-layout:fixed;
border-collapse:separate;
empty-cells:hide;
width:75%;
height:75%;
padding:10px 20px 10px 20px;
border-spacing:20px 40px;
}
th,td{
text-align:right;
vertical-align:bottom;
border:5px dashed red;
}
tr:hover{
background:cyan;
}

</style>
</head>
<body>
<Table>
<Caption>Student Mark List</caption>
<tr>
<th>Sl. No</th>
<th>Students' Name</th>
<th>CSC Theory</th>
<th>CSC Practical</th>
</tr>
<tr>
<th>1</th>
<th>Rani</th>
<th>50</th>
<th>50</th>
</tr>
<tr>
<th>2</th>
<th>Vani</th>
<th>45</th>
<th>48</th>
</tr>
</table >
</body>
</html>

You might also like