Programming Examples
Use tables to provide layout to your HTML page describing your college infrastructure.
Use tables to provide layout to your HTML page describing your college infrastructure.
Solution<!DOCTYPE html>
<html>
<head>
<title>College Infrastructure</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #555;
padding: 10px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
h2 {
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h2>Our College Infrastructure</h2>
<table>
<tr>
<th>Infrastructure Component</th>
<th>Description</th>
<th>Image</th>
</tr>
<tr>
<td>Library</td>
<td>Well-stocked library with thousands of books and journals.</td>
<td><img src="https://via.placeholder.com/150" alt="Library"></td>
</tr>
<tr>
<td>Laboratories</td>
<td>Modern computer and science labs equipped with latest technology.</td>
<td><img src="https://via.placeholder.com/150" alt="Lab"></td>
</tr>
<tr>
<td>Classrooms</td>
<td>Spacious and ventilated classrooms with projectors.</td>
<td><img src="https://via.placeholder.com/150" alt="Classroom"></td>
</tr>
<tr>
<td>Sports Facilities</td>
<td>Indoor and outdoor sports facilities for students' fitness.</td>
<td><img src="https://via.placeholder.com/150" alt="Sports"></td>
</tr>
<tr>
<td>Auditorium</td>
<td>Large auditorium for seminars, workshops, and cultural events.</td>
<td><img src="https://via.placeholder.com/150" alt="Auditorium"></td>
</tr>
</table>
</body>
</html>
▶ RUN Output/ Explanation: