Practical – 114.4 : Create a Attractive Table With CSS (આકર્ષક ટેબલ બનાવવું…)
Program Code :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Attractive ITI Table</title>
<style>
body {
font-family: ‘Segoe UI’, sans-serif;
background-color: #f0f8ff;
padding: 40px;
text-align: center;
}
h1 {
color: #004080;
margin-bottom: 30px;
}
table {
width: 80%;
margin: auto;
border-collapse: collapse;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
background-color: #ffffff;
}
th, td {
padding: 15px;
text-align: center;
border-bottom: 1px solid #ddd;
}
th {
background-color: #004080;
color: white;
text-transform: uppercase;
letter-spacing: 1px;
}
tr:hover {
background-color: #e0f0ff;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>ITI Student Record</h1>
<table>
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Trade</th>
<th>Marks</th>
</tr>
<tr>
<td>101</td>
<td>Amit Kumar</td>
<td>Electrician</td>
<td>85</td>
</tr>
<tr>
<td>102</td>
<td>Suman Yadav</td>
<td>Fitter</td>
<td>78</td>
</tr>
<tr>
<td>103</td>
<td>Ravi Singh</td>
<td>Welder</td>
<td>90</td>
</tr>
<tr>
<td>104</td>
<td>Priya Sharma</td>
<td>COPA</td>
<td>88</td>
</tr>
</table>
</body>
</html>
