tables

rameskum · rameskum · commit ac3248a49f26 · 2022-02-14T11:23:23.000+05:30
diff --git a/practice/06 - Components/03-table.html b/practice/06 - Components/03-table.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+	      name="viewport">
+	<meta content="ie=edge" http-equiv="X-UA-Compatible">
+	<title>Table Component</title>
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
+	<style>
+		*,
+		*::before,
+		*::after {
+			margin: 0;
+			padding: 0;
+			box-sizing: border-box;
+		}
+
+		body {
+			font-family: 'Inter', sans-serif;
+			color: #343a40;
+			line-height: 1;
+			display: flex;
+			justify-content: center;
+		}
+
+		table {
+			width: 800px;
+			margin-top: 100px;
+			font-size: 18px;
+			/*border: 1px solid #343a40;*/
+			border-collapse: collapse;
+		}
+
+		th,
+		td {
+			/*border: 1px solid #343a40;*/
+			padding: 16px 24px;
+			text-align: left;
+		}
+
+		thead th {
+			background-color: #087f5b;
+			color: #fff;
+			width: 25%;
+		}
+
+		tbody tr:nth-child(odd) {
+			background-color: #f8f9fa;
+		}
+
+		tbody tr:nth-child(even) {
+			background-color: #e9ecef;
+		}
+
+		tbody tr:hover {
+			background-color: #e9ecef;
+		}
+	</style>
+</head>
+<body>
+<table>
+	<thead>
+	<tr>
+		<th>Chair</th>
+		<th>The Laid Back</th>
+		<th>The Worker Bee</th>
+		<th>The Chair 4/2</th>
+	</tr>
+	</thead>
+	<tbody>
+	<tr>
+		<th>Width</th>
+		<td>80 cm</td>
+		<td>60 cm</td>
+		<td>220 cm</td>
+	</tr>
+	<tr>
+		<th>Height</th>
+		<td>100 cm</td>
+		<td>110 cm</td>
+		<td>90 cm</td>
+	</tr>
+	<tr>
+		<th>Depth</th>
+		<td>70 cm</td>
+		<td>65 cm</td>
+		<td>80 cm</td>
+	</tr>
+	<tr>
+		<th>Weight</th>
+		<td>16 kg</td>
+		<td>22 kg</td>
+		<td>80 kg</td>
+	</tr>
+	</tbody>
+</table>
+</body>
+</html>
