Below chunk shows the pure html code for generating a periodic table based different tags in a table attributes. The output of the code is given on this link
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<th style="text-align: center; font-size: 50px; width: 1020px; height: 30px; background-color: #f5f116;">The Periodic Table</th>
</tr>
</table>
<table>
<tr>
<td style="width: 50px; height: 50px; background-color: #dd8484; text-align: center; border: 1px solid black;">1<br>
H</td>
<!-- adding 16 empty cells -->
<td style = "empty-cells: hide; width: 50px; height: 50px;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<!-- <td style = "empty-cells: hide;"></td> -->
<td style="color: rgb(28, 126, 6);background-color: #bbc8e6;width: 50px; height: 50px;text-align: center; border: 1px solid black;">2<br>
He </td>
</tr>
<!-- New row -->
<tr>
<td style= "background-color: #e99bd8; width: 50px; height: 50px;text-align: center; border: 1px solid black;">3<br>
Li </td>
<td style= "background-color: #9bc7e9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">4<br>
Be </td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style= "background-color: #bc6406; width: 50px; height: 50px;text-align: center;border: 1px solid black;">5<br>
B </td>
<td style= "background-color: #f1845f; width: 50px; height: 50px;text-align: center;border: 1px solid black;">6<br>
C </td>
<td style= "color: rgb(28, 126, 6);background-color: #f1845f; width: 50px; height: 50px;text-align: center;border: 1px solid black;">7<br>
N </td>
<td style= "color: rgb(28, 126, 6);background-color: #f1845f; width: 50px; height: 50px;text-align: center;border: 1px solid black;">8<br>
O </td>
<td style= "color: rgb(28, 126, 6);background-color: #f5f5d9; width: 50px; height: 50px;text-align: center;border: 1px solid black;">9<br>
F </td>
<td style= "color: rgb(28, 126, 6);background-color: #bbc8e6; width: 50px; height: 50px;text-align: center;border: 1px solid black;">10<br>
Ne </td>
</tr>
<!-- New row -->
<tr>
<td style= "background-color: #e99bd8; width: 50px; height: 50px;text-align: center; border: 1px solid black;">11<br>
Na </td>
<td style= "background-color: #9bc7e9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">12<br>
Mg </td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style= "background-color: #b1f38b; width: 50px; height: 50px;text-align: center;border: 1px solid black;">13<br>
Al </td>
<td style= "background-color: #bc6406; width: 50px; height: 50px;text-align: center;border: 1px solid black;">14<br>
Si </td>
<td style= "background-color: #f1845f; width: 50px; height: 50px;text-align: center;border: 1px solid black;">15<br>
P </td>
<td style= "background-color: #f1845f; width: 50px; height: 50px;text-align: center;border: 1px solid black;">16<br>
S </td>
<td style= "color: rgb(28, 126, 6);background-color: #f5f5d9; width: 50px; height: 50px;text-align: center;border: 1px solid black;">17<br>
Cl </td>
<td style= "color: rgb(28, 126, 6);background-color: #bbc8e6; width: 50px; height: 50px;text-align: center;border: 1px solid black;">18<br>
Ar </td>
</tr>
<!-- New row -->
<tr>
<td style= "background-color: #e99bd8; width: 50px; height: 50px;text-align: center; border: 1px solid black;">19<br>
K </td>
<td style= "background-color: #9bc7e9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">20<br>
Ca </td>
<td style= "background-color: #eae7a9; width: 80px; height: 50px;text-align: center; border: 1px solid black;">21<br>
Sc </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">22<br>
Ti </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">23<br>
V </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">24<br>
Cr </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">25<br>
Mn </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">26<br>
Fe </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">27<br>
Co </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">28<br>
Ni </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">29<br>
Cu </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">30<br>
Zn </td>
<td style= "background-color: #b1f38b; width: 50px; height: 50px;text-align: center;border: 1px solid black;">31<br>
Ga </td>
<td style= "background-color: #bc6406; width: 50px; height: 50px;text-align: center;border: 1px solid black;">32<br>
Ge </td>
<td style= "background-color: #bc6406; width: 50px; height: 50px;text-align: center;border: 1px solid black;">33<br>
As </td>
<td style= "background-color: #f1845f; width: 50px; height: 50px;text-align: center;border: 1px solid black;">34<br>
Se </td>
<td style= "background-color: #f5f5d9; width: 50px; height: 50px;text-align: center;border: 1px solid black;">35<br>
Br </td>
<td style= "color: rgb(28, 126, 6);background-color: #bbc8e6; width: 50px; height: 50px;text-align: center;border: 1px solid black;">36<br>
Kr </td>
</tr>
<!-- New row -->
<tr>
<td style= "background-color: #e99bd8; width: 50px; height: 50px;text-align: center; border: 1px solid black;">37<br>
Rb </td>
<td style= "background-color: #9bc7e9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">38<br>
Sr </td>
<td style= "background-color: #eae7a9; width: 80px; height: 50px;text-align: center; border: 1px solid black;">39<br>
Y </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">40<br>
Zr </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">41<br>
Nb </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">42<br>
Mo </td>
<td style= "color: red;background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">43<br>
Tc </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">44<br>
Ru </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">45<br>
Rh </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">46<br>
Pd </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">47<br>
Ag </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">48<br>
Cd </td>
<td style= "background-color: #b1f38b; width: 50px; height: 50px;text-align: center;border: 1px solid black;">49<br>
In </td>
<td style= "background-color: #b1f38b; width: 50px; height: 50px;text-align: center;border: 1px solid black;">50<br>
Sn </td>
<td style= "background-color: #bc6406; width: 50px; height: 50px;text-align: center;border: 1px solid black;">51<br>
Sb </td>
<td style= "background-color: #bc6406; width: 50px; height: 50px;text-align: center;border: 1px solid black;">52<br>
Te </td>
<td style= "background-color: #f5f5d9; width: 50px; height: 50px;text-align: center;border: 1px solid black;">53<br>
I </td>
<td style= "color: rgb(28, 126, 6);background-color: #bbc8e6; width: 50px; height: 50px;text-align: center;border: 1px solid black;">54<br>
Xe </td>
</tr>
<!-- New row -->
<tr>
<td style= "background-color: #e99bd8; width: 50px; height: 50px;text-align: center; border: 1px solid black;">55<br>
Cs </td>
<td style= "background-color: #9bc7e9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">56<br>
Ba </td>
<td style= "background-color: #f9ddf5; width: 80px; height: 50px;text-align: center; border: 1px solid black;">57-71<br>
</td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">72<br>
Hf </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">73<br>
Ta </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">74<br>
W </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">75<br>
Re </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">76<br>
Os </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">77<br>
Ir </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">78<br>
Pt </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">79<br>
Au </td>
<td style= "background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">80<br>
Hg </td>
<td style= "background-color: #b1f38b; width: 50px; height: 50px;text-align: center; border: 1px solid black;">81<br>
Tl </td>
<td style= "background-color: #b1f38b; width: 50px; height: 50px;text-align: center; border: 1px solid black;">82<br>
Pb </td>
<td style= "background-color: #b1f38b; width: 50px; height: 50px;text-align: center; border: 1px solid black;">83<br>
Bi </td>
<td style= "background-color: #bc6406; width: 50px; height: 50px;text-align: center; border: 1px solid black;">84<br>
Po </td>
<td style= "background-color: #f5f5d9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">85<br>
At </td>
<td style= "color: rgb(28, 126, 6);background-color: #bbc8e6; width: 50px; height: 50px;text-align: center; border: 1px solid black;">86<br>
Rn </td>
</tr>
<!-- New row -->
<tr>
<td style= "background-color: #e99bd8; width: 50px; height: 50px;text-align: center; border: 1px solid black;">87<br>
Fr </td>
<td style= "background-color: #9bc7e9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">88<br>
Ra </td>
<td style= "background-color: #f9ddf5; width: 80px; height: 50px;text-align: center; border: 1px solid black;">89-103<br>
</td>
<td style= "color: red;background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">104<br>
Rf </td>
<td style= "color: red;background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">105<br>
Db </td>
<td style= "color: red;background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">106<br>
Sg </td>
<td style= "color: red;background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">107<br>
Bh </td>
<td style= "color: red;background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">108<br>
Hs </td>
<td style= "color: red;background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">109<br>
Mt </td>
<td style= "color: red;background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">110<br>
Ds </td>
<td style= "color: red;background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">111<br>
Rg </td>
<td style= "color: red;background-color: #eae7a9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">112<br>
Cn </td>
<td style= "color: red;background-color: #fefef9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">113<br>
Nh </td>
<td style= "color: red;background-color: #fefef9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">114<br>
Fl </td>
<td style= "color: red;background-color: #fefef9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">115<br>
Mc </td>
<td style= "color: red;background-color: #fefef9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">116<br>
Lv </td>
<td style= "color: red;background-color: #fefef9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">117<br>
Ts </td>
<td style= "color: red;background-color: #fefef9; width: 50px; height: 50px;text-align: center; border: 1px solid black;">118<br>
Ar </td>
</tr>
</table>
<!-- Adding 1 complete row of empty cells here -->
<table>
<tr>
<td style = "empty-cells: hide;width: 50px; height: 50px"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
<td style = "empty-cells: hide;"></td>
</tr>
<!-- New row -->
<tr>
<td style = "empty-cells: hide;width: 50px; height: 50px"></td>
<td style = "empty-cells: hide;width: 50px; height: 50px"></td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">57<br>
La </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">58<br>
Ce </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">59<br>
Pr </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">60<br>
Nd </td>
<td style= "color: red;background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">61<br>
Pm </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">62<br>
Sm </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">63<br>
Eu </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">64<br>
Gd </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">65<br>
Tb </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">66<br>
Dy </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">67<br>
Ho </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">68<br>
Er </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">69<br>
Tm </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">70<br>
Yb </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">71<br>
Lu </td>
</tr>
<!-- New row -->
<tr>
<td style = "empty-cells: hide;width: 50px; height: 50px"></td>
<td style = "empty-cells: hide;width: 50px; height: 50px"></td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">89<br>
Ac </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">90<br>
Th </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">91<br>
Pa </td>
<td style= "background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">92<br>
U </td>
<td style= "color: red;background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">93<br>
Np </td>
<td style= "color: red;background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">94<br>
Pu </td>
<td style= "color: red;background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">95<br>
Am </td>
<td style= "color: red;background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">96<br>
Cm </td>
<td style= "color: red;background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">97<br>
Bk </td>
<td style= "color: red;background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">98<br>
Cf </td>
<td style= "color: red;background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">99<br>
Es </td>
<td style= "color: red;background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">100<br>
Fm </td>
<td style= "color: red;background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">101<br>
Md </td>
<td style= "color: red;background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">102<br>
No </td>
<td style= "color: red;background-color: #f9ddf5; width: 50px; height: 50px;text-align: center; border: 1px solid black;">103<br>
Lr </td>
</tr>
</body>
</html>