css/css_entr_3.html at master · marclll/css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
	<head>
		<title>Table with grid</title>
		<style>
			.table{
				width:50%;
				display:grid;
				grid-template-columns:auto auto auto auto auto;
				background-color:rgb(0,0,0);
				padding:0.5px;
			}
			.table>div{
				display:flex;
				justify-content:center;
				align-items:center;
				background-color:rgb(255,255,255);
				margin: 0.5px;
			}
			.item1{
				grid-column:span 2;
			}
			.item2{
				grid-row:span 3;
			}
			.item3{
				grid-column:span 5;
			}
			.item4{
				grid-row:span 2;
			}
			.item5{
				grid-column:span 3;
				grid-row:span 2;
			}
		</style>
	</head>
	<body>
		<div class="table">
			<div><b>Degree</b></div>
			<div class="item1"><b>Student</b></div>
			<div><b>Age</b></div>
			<div><b>Course</b></div>
			<div class="item2">Computer Science</div>
			<div>Pepito</div>
			<div>G</div>
			<div>22</div>
			<div>1r</div>
			<div>Jack</div>
			<div>Meier</div>
			<div>94</div>
			<div>????</div>
			<div>John</div>
			<div>Brown</div>
			<div>18</div>
			<div>4rt</div>
			<div>Electrical Engineering</div>
			<div>Aina</div>
			<div>Soler</div>
			<div>23</div>
			<div>4rt</div>
			<div class="item3">Random item</div>
			<div>A</div>
			<div class="item4">B</div>
			<div class="item1">C</div>
			<div>E</div>
			<div class="item4">A</div>
			<div>C</div>
			<div class="item1">D</div>
			<div class="item5">B</div>
			<div>C</div>
			<div>C</div>
			<div>A</div>
		</div>
	</body>
</html>