This minimalistic table design is perfect for developers who need a clean and structured layout for displaying data. With three columns, it organizes information efficiently while maintaining readability. Use this as a base and customize it to fit your project needs!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruits & Vegetables Table</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
table {
width: 80%;
border-collapse: collapse;
background: white;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: left;
}
th {
background-color: #333;
color: white;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
@media (max-width: 600px) {
table {
width: 100%;
}
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Vegetable</th>
<th>Health Benefit</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>Carrot</td>
<td>Rich in fiber & improves vision</td>
</tr>
<tr>
<td>Banana</td>
<td>Spinach</td>
<td>Boosts energy & strengthens bones</td>
</tr>
<tr>
<td>Orange</td>
<td>Broccoli</td>
<td>Boosts immunity & supports digestion</td>
</tr>
<tr>
<td>Strawberry</td>
<td>Tomato</td>
<td>Rich in antioxidants & good for skin</td>
</tr>
<tr>
<td>Mango</td>
<td>Sweet Potato</td>
<td>Supports digestion & boosts immunity</td>
</tr>
</tbody>
</table>
</body>
</html>