Skip to content

Commit 2582247

Browse files
zangeronimozangeronimo
committed
feat: building a table component
1 parent 495b6a3 commit 2582247

File tree

2 files changed

+113
-0
lines changed

2 files changed

+113
-0
lines changed

‎starter/06-Components/Table/index.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="preconnect" href="https://fonts.googleapis.com" />
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Table Component</title>
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
14+
<link rel="stylesheet" href="style.css" />
15+
</head>
16+
<body>
17+
<table>
18+
<thead>
19+
<tr>
20+
<th>Chair</th>
21+
<th>The Laid Back</th>
22+
<th>The Worker Bee</th>
23+
<th>The Chair 4/2</th>
24+
</tr>
25+
</thead>
26+
27+
<tbody>
28+
<tr>
29+
<th>Width</th>
30+
<td>80 cm</td>
31+
<td>60 cm</td>
32+
<td>220 cm</td>
33+
</tr>
34+
<tr>
35+
<th>Height</th>
36+
<td>100 cm</td>
37+
<td>110 cm</td>
38+
<td>90 cm</td>
39+
</tr>
40+
<tr>
41+
<th>Depth</th>
42+
<td>70 cm</td>
43+
<td>65 cm</td>
44+
<td>80 cm</td>
45+
</tr>
46+
<tr>
47+
<th>Weight</th>
48+
<td>16 kg</td>
49+
<td>22 kg</td>
50+
<td>80 kg</td>
51+
</tr>
52+
</tbody>
53+
</table>
54+
</body>
55+
</html>

‎starter/06-Components/Table/style.css

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/*
2+
SPACING SYSTEM (px)
3+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
4+
5+
FONT SIZE SYSTEM (px)
6+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
7+
*/
8+
9+
/*
10+
MAIN COLOR: #087f5b
11+
GREY COLOR: #343a40
12+
*/
13+
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
}
19+
20+
/* ------------------------ */
21+
/* GENERAL STYLES */
22+
/* ------------------------ */
23+
body {
24+
font-family: "Inter", sans-serif;
25+
color: #343a40;
26+
line-height: 1;
27+
}
28+
29+
table {
30+
width: 800px;
31+
margin: 100px auto;
32+
border-collapse: collapse;
33+
font-size: 18px;
34+
}
35+
36+
th,
37+
td {
38+
/* border: 1px solid #343a40; */
39+
padding: 16px 24px;
40+
text-align: left;
41+
}
42+
43+
thead tr {
44+
background-color: #087f5b;
45+
color: #fff;
46+
}
47+
48+
thead th {
49+
width: 25%;
50+
}
51+
52+
tbody tr:nth-child(odd) {
53+
background-color: #f8f9fa;
54+
}
55+
56+
tbody tr:nth-child(even) {
57+
background-color: #e9ecef;
58+
}

0 commit comments

Comments
 (0)