Gallery
Newsletter
Subscribe for awesome tech news
By voidman on Sep 07, 2025 05:02
<!DOCTYPE html>
<html>
<head>
<title>Styled Table with Images</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(skyblue, yellow, lightgreen);
padding: 20px;
height: 100vh;
}
table {
border-collapse: collapse;
width: 60%;
margin: auto;
background: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
th,
td {
border: 1px solid #ccc;
text-align: center;
padding: 12px;
}
thead {
background: #0077cc;
color: white;
}
.box {
width: 80px;
height: 250px;
background-size: cover;
background-position: center;
}
.box:nth-child(1) {
background-image: url("pics/art.png");
}
.box:nth-child(2) {
background-image: url("pics/momo.png");
}
.box:nth-child(3) {
background-image: url("pics/demon.png");
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rajesh</td>
<td>Actor</td>
</tr>
<tr>
<td>2</td>
<td>Harka</td>
<td>Mayor</td>
</tr>
<tr>
<td class="box"></td>
<td class="box"></td>
<td class="box"></td>
</tr>
</tbody>
</table>
</body>
</html>
Subscribe for awesome tech news