-
Notifications
You must be signed in to change notification settings - Fork 2
/
Table-Semantics.html
100 lines (98 loc) · 2.17 KB
/
Table-Semantics.html
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- optional styling.
tables by default don't show the border outline
add.
apply the border style below to either:
A) table
B) table, td
C) table, th
D) table, td, th
see what you like
change up the style itself by making the border thicker or thinner
solid can be changed to dotted, dashed, inset
color can be any color
border style docs - https://developer.mozilla.org/en-US/docs/Web/CSS/border-style
-->
<!-- <style>
table, td {
border: 3px solid black;
}
</style> -->
<!-- Basic Table -->
<table>
<tr>
<td>Name</td>
<td>Age</td>
<td>Location</td>
</tr>
<tr>
<td>Tom</td>
<td>23</td>
<td>Nashville</td>
</tr>
<tr>
<td>Jerry</td>
<td>20</td>
<td>Memphis</td>
</tr>
</table>
<br/>
<br/>
<br/>
<!-- Semantic Tables -->
<!-- Column scope header-->
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>30</td>
<td>Miami</td>
</tr>
<tr>
<td>Jerry</td>
<td>30</td>
<td>Memphis</td>
</tr>
</tbody>
</table>
<br/>
<br/>
<br/>
<!-- Row scope headers-->
<table>
<thead>
<tr>
<th scope="row">Name</th>
<td>Tom</td>
<td>Jerry</td>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Age</th>
<td>30</td>
<td>40</td>
</tr>
<tr>
<th scope="row">Location</td>
<td>London</td>
<td>Memphis</td>
</tr>
</tbody>
</table>
</body>
</html>