ch. 91: Building a Table Component - Part 1

FrankGecko · FrankGecko · commit 772834f6c235 · 2024-05-06T14:43:03.000+02:00
diff --git a/starter/06-Components/03-table.html b/starter/06-Components/03-table.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Table Component</title>
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
+	<style>
+		/*
+			SPACING SYSTEM (px)
+			2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
+
+			FONT SIZE SYSTEM (px)
+			10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
+			*/
+
+		/*
+			MAIN COLOR: #087f5b
+			GREY COLOR: #343a40
+			*/
+
+		* {
+			margin: 0;
+			padding: 0;
+			box-sizing: border-box;
+		}
+
+		/* ------------------------ */
+		/* GENERAL STYLES */
+		/* ------------------------ */
+		body {
+			font-family: "Inter", sans-serif;
+			color: #343a40;
+			line-height: 1;
+		}
+	</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>
