-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
210 lines (208 loc) · 14 KB
/
index.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periodic Table</title>
<link rel="stylesheet" href="./css/style.css"/>
</head>
<body>
<!-- 2. Create a periodic table using table element. You have to create any one of the tables attached in this assignment. -->
<div align="center">
<table border="1" cellspacing="12" cellpadding="10" width="100%">
<thead>
<tr></tr>
</thead>
<tbody>
<tr class="heading">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="10"><p >Periodic Table of the Elements</p></td></tr>
<tr>
<td align="center"class="reactive"><p>1</p><p class="ele">H</p></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td align="center"class="noble"><p>2</p><p class="ele">He</p></td>
</tr>
<tr>
<td align="center" class="alkali"><p>3</p><p class="ele">Li</p></td>
<td align="center" class="alkaline"><p>4</p><p class="ele">Be</p></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td align="center"class="metalloids"><p>5</p><p class="ele">B</p></td>
<td align="center" class="reactive"><p>6</p><p class="ele">C</p></td>
<td align="center"class="reactive"><p>7</p><p class="ele">N</p></td>
<td align="center"class="reactive"><p>8</p><p class="ele">O</p></td>
<td align="center"class="reactive"><p>9</p><p class="ele">F</p></td>
<td align="center"class="noble"><p>10</p><p class="ele">Ne</p></td>
</tr>
<tr>
<td align="center"class="alkali"><p>11</p><p class="ele">Li</p></td>
<td align="center"class="alkaline"><p>12</p><p class="ele">Be</p></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td align="center" class="metal2"><p>13</p><p class="ele">Al</p></td>
<td align="center" class="metalloids"><p>14</p><p class="ele">Si</p></td>
<td align="center"class="reactive"><p>15</p><p class="ele">P</p></td>
<td align="center"class="reactive"><p>16</p><p class="ele">S</p></td>
<td align="center"class="reactive"><p>17</p><p class="ele">Cl</p></td>
<td align="center"class="noble"><p>18</p><p class="ele">Ne</p></td>
</tr>
<tr>
<td align="center"class="alkali"><p>19</p><p class="ele">K</p></td>
<td align="center"class="alkaline"><p>20</p><p class="ele">Ca</p></td>
<td align="center"class="metal3"><p>21</p><p class="ele">Sc</p></td>
<td align="center"class="metal3"><p>22</p><p class="ele">Ti</p></td>
<td align="center"class="metal3"><p>23</p><p class="ele">V</p></td>
<td align="center"class="metal3"><p>24</p><p class="ele">Cr</p></td>
<td align="center"class="metal3"><p>25</p><p class="ele">Mn</p></td>
<td align="center"class="metal3"><p>26</p><p class="ele">Fe</p></td>
<td align="center"class="metal3"><p>27</p><p class="ele">Co</p></td>
<td align="center"class="metal3"><p>28</p><p class="ele">Ni</p></td>
<td align="center" class="metal3"><p>29</p><p class="ele">Cu</p></td>
<td align="center" class="metal2"><p>30</p><p class="ele">Zn</p></td>
<td align="center"class="metal2"><p>31</p><p class="ele">Ga</p></td>
<td align="center"class="metalloids"><p>32</p><p class="ele">Ge</p></td>
<td align="center"class="metalloids"><p>33</p><p class="ele">As</p></td>
<td align="center"class="reactive"><p>34</p><p class="ele">Se</p></td>
<td align="center"class="reactive"><p>35</p><p class="ele">Br</p></td>
<td align="center"class="noble"><p>36</p><p class="ele">Kr</p></td>
</tr>
<tr>
<td align="center"class="alkali"><p>37</p><p class="ele">Rb</p></td>
<td align="center"class="alkaline"><p>38</p><p class="ele">Sr</p></td>
<td align="center"class="metal3"><p>39</p><p class="ele">Y</p></td>
<td align="center"class="metal3"><p>40</p><p class="ele">Zr</p></td>
<td align="center"class="metal3"><p>41</p><p class="ele">Nb</p></td>
<td align="center"class="metal3"><p>42</p><p class="ele">Mo</p></td>
<td align="center"class="metal3"><p>43</p><p class="ele">Tc</p></td>
<td align="center"class="metal3"><p>44</p><p class="ele">Ru</p></td>
<td align="center"class="metal3"><p>45</p><p class="ele">Rh</p></td>
<td align="center"class="metal3"><p>46</p><p class="ele">Pd</p></td>
<td align="center"class="metal3"><p>47</p><p class="ele">Ag</p></td>
<td align="center"class="metal2"><p>48</p><p class="ele">Cd</p></td>
<td align="center"class="metal2"><p>49</p><p class="ele">In</p></td>
<td align="center"class="metal2"><p>50</p><p class="ele">Sn</p></td>
<td align="center" class="metalloids"><p>51</p><p class="ele">Sb</p></td>
<td align="center" class="metalloids"><p>52</p><p class="ele">Te</p></td>
<td align="center"class="reactive"><p>53</p><p class="ele">I</p></td>
<td align="center"class="noble"><p>54</p><p class="ele">Xe</p></td>
</tr>
<tr>
<td align="center"class="alkali"><p>55</p><p class="ele">Rh</p></td>
<td align="center" class="alkaline"><p>56</p><p class="ele">Pd</p></td>
<td align="center" class="special-ele ele-lanth"><p>57-71</p><p class="sp-ele-text">Lanthanides</p></td>
<td align="center"class="metal3"><p>72</p><p class="ele">Hf</p></td>
<td align="center"class="metal3"><p>73</p><p class="ele">Ta</p></td>
<td align="center"class="metal3"><p>74</p><p class="ele">W</p></td>
<td align="center"class="metal3"><p>75</p><p class="ele">Re</p></td>
<td align="center"class="metal3"><p>76</p><p class="ele">Os</p></td>
<td align="center"class="metal3"><p>77</p><p class="ele">Ir</p></td>
<td align="center"class="metal3"><p>78</p><p class="ele">Pt</p></td>
<td align="center"class="metal3"><p>79</p><p class="ele">Au</p></td>
<td align="center"class="metal2"><p>80</p><p class="ele">Hg</p></td>
<td align="center"class="metal2"><p>81</p><p class="ele">Tl</p></td>
<td align="center"class="metal2"><p>82</p><p class="ele">Pb</p></td>
<td align="center"class="metal2"><p>83</p><p class="ele">Bi</p></td>
<td align="center"class="metal2"><p>84</p><p class="ele">Po</p></td>
<td align="center" class="metalloids"><p>85</p><p class="ele">At</p></td>
<td align="center" class="noble"><p>86</p><p class="ele">Rn</p></td>
</tr>
<tr>
<td align="center"class="alkali"><p>87</p><p class="ele">Fr</p></td>
<td align="center"class="alkaline"><p>88</p><p class="ele">Ra</p></td>
<td align="center" class="special-ele ele-actin"><p>89-103</p><p class="sp-ele-text">Actinides</p></td>
<td align="center"class="metal3"><p>104</p><p class="ele">Rf</p></td>
<td align="center"class="metal3"><p>105</p><p class="ele">Db</p></td>
<td align="center"class="metal3"><p>106</p><p class="ele">Sg</p></td>
<td align="center" class="metal3""><p>107</p><p class="ele">Bh</p></td>
<td align="center"class="metal3"><p>108</p><p class="ele">Hs</p></td>
<td align="center" class="chem"><p>109</p><p class="ele">Mt</p></td>
<td align="center"class="chem"><p>110</p><p class="ele">Ds</p></td>
<td align="center"class="chem"><p>111</p><p class="ele">Rg</p></td>
<td align="center"class="metal2"><p>112</p><p class="ele">Cn</p></td>
<td align="center"class="chem"><p>113</p><p class="ele">Nh</p></td>
<td align="center"class="chem"><p>114</p><p class="ele">Fl</p></td>
<td align="center"class="chem"><p>115</p><p class="ele">Mc</p></td>
<td align="center"class="chem"><p>116</p><p class="ele">Lv</p></td>
<td align="center"class="chem"><p>117</p><p class="ele">Ts</p></td>
<td align="center"class="chem"><p>118</p><p class="ele">Og</p></td>
</tr>
<tr>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td align="center" bgcolor="#47a3c9" class="ele-lanth"><p>57</p><p class="ele">La</p></td>
<td align="center" class="ele-lanth"><p>58</p><p class="ele">Ce</p></td>
<td align="center" class="ele-lanth"><p>59</p><p class="ele">Pr</p></td>
<td align="center" class="ele-lanth"><p>60</p><p class="ele">Nd</p></td>
<td align="center" class="ele-lanth"><p>61</p><p class="ele">Pm</p></td>
<td align="center" class="ele-lanth"><p>62</p><p class="ele">Sm</p></td>
<td align="center" class="ele-lanth"><p>63</p><p class="ele">Eu</p></td>
<td align="center" class="ele-lanth"><p>64</p><p class="ele">Gd</p></td>
<td align="center" class="ele-lanth"><p>65</p><p class="ele">Tb</p></td>
<td align="center" class="ele-lanth"><p>66</p><p class="ele">Dy</p></td>
<td align="center" class="ele-lanth"><p>67</p><p class="ele">Ho</p></td>
<td align="center" class="ele-lanth"><p>68</p><p class="ele">Er</p></td>
<td align="center" class="ele-lanth"><p>69</p><p class="ele">Tm</p></td>
<td align="center" class="ele-lanth"><p>70</p><p class="ele">Yb</p></td>
<td align="center" class="ele-lanth"><p>71</p><p class="ele">Lu</p></td>
</tr>
<tr>
<td class="em-ele"></td>
<td class="em-ele"></td>
<td align="center" class="ele-actin"><p>89</p><p class="ele">Ac</p></td>
<td align="center" class="ele-actin"><p>90</p><p class="ele">Th</p></td>
<td align="center" class="ele-actin"><p>91</p><p class="ele">Pa</p></td>
<td align="center" class="ele-actin"><p>92</p><p class="ele">U</p></td>
<td align="center" class="ele-actin"><p>93</p><p class="ele">Np</p></td>
<td align="center" class="ele-actin"><p>94</p><p class="ele">Pu</p></td>
<td align="center" class="ele-actin"><p>95</p><p class="ele">Am</p></td>
<td align="center" class="ele-actin"><p>96</p><p class="ele">Cm</p></td>
<td align="center" class="ele-actin"><p>97</p><p class="ele">Bk</p></td>
<td align="center" class="ele-actin"><p>98</p><p class="ele">Cf</p></td>
<td align="center" class="ele-actin"><p>99</p><p class="ele">Es</p></td>
<td align="center" class="ele-actin"><p>100</p><p class="ele">Fm</p></td>
<td align="center" class="ele-actin"><p>101</p><p class="ele">Md</p></td>
<td align="center" class="ele-actin"><p>102</p><p class="ele">No</p></td>
<td align="center" class="ele-actin"><p>103</p><p class="ele">Lr</p></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>