Skip to content

Commit 14b62eb

Browse files
rahilsamarahilsama
committed
table component
1 parent 1d2c0c0 commit 14b62eb

File tree

1 file changed

+108
-0
lines changed

1 file changed

+108
-0
lines changed

‎starter/06-Components/03-table.html

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
9+
rel="stylesheet"
10+
/>
11+
12+
<title>Table Component</title>
13+
14+
<style>
15+
/*
16+
SPACING SYSTEM (px)
17+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
18+
FONT SIZE SYSTEM (px)
19+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
20+
*/
21+
/*
22+
MAIN COLOR: #087f5b
23+
GREY COLOR: #343a40
24+
*/
25+
26+
* {
27+
margin: 0;
28+
padding: 0;
29+
box-sizing: border-box;
30+
}
31+
32+
body {
33+
font-family: "Inter", sans-serif;
34+
color: #343a40;
35+
line-height: 1;
36+
display: flex;
37+
justify-content: center;
38+
}
39+
40+
table {
41+
margin-top: 100px;
42+
/*border: 1px solid #343a40;*/
43+
width: 800px;
44+
border-collapse: collapse;
45+
}
46+
47+
th,
48+
td {
49+
/* border: 1px solid #343a40;*/
50+
padding: 16px 24px;
51+
text-align: left;
52+
}
53+
54+
thead th {
55+
background-color: #087f5b;
56+
color: #fff;
57+
width: 25%;
58+
}
59+
60+
tbody tr:nth-child(odd) {
61+
background-color: #f8f9fa;
62+
}
63+
64+
tbody tr:nth-child(even) {
65+
background-color: #e9ecef;
66+
}
67+
</style>
68+
</head>
69+
<body>
70+
<table>
71+
<thead>
72+
<tr>
73+
<th>Chair</th>
74+
<th>The Laid Back</th>
75+
<th>The Worker Bee</th>
76+
<th>The Chair 4/2</th>
77+
</tr>
78+
</thead>
79+
80+
<tbody>
81+
<tr>
82+
<th>Width</th>
83+
<td>80 cm</td>
84+
<td>60 cm</td>
85+
<td>220 cm</td>
86+
</tr>
87+
<tr>
88+
<th>Height</th>
89+
<td>100 cm</td>
90+
<td>110 cm</td>
91+
<td>90 cm</td>
92+
</tr>
93+
<tr>
94+
<th>Depth</th>
95+
<td>70 cm</td>
96+
<td>65 cm</td>
97+
<td>80 cm</td>
98+
</tr>
99+
<tr>
100+
<th>Weight</th>
101+
<td>16 kg</td>
102+
<td>22 kg</td>
103+
<td>80 kg</td>
104+
</tr>
105+
</tbody>
106+
</table>
107+
</body>
108+
</html>

0 commit comments

Comments
 (0)