How to Create a Periodic Table Using HTML and CSS

The Periodic Table of Elements is a fundamental tool used in chemistry to organize and display the properties of all known elements. While traditional periodic tables are static, modern web technologies such as HTML, CSS, and JavaScript allow us to create interactive versions of the periodic table that can provide additional information and enhance the learning experience.

In this blog post, we will walk through the process of creating a simple interactive periodic table using HTML, CSS, and JavaScript. By the end of this post, you will have a basic understanding of how to use web technologies to create dynamic and interactive content, as well as a fully functioning periodic table that you can customize and expand upon.

Project Details

Created byCoding Pakistan
Languages UsingHTML and CSS
Code Download Available Below
PreviewTake Preview

Video Tutorials – Periodic Table Using HTML and CSS

If you prefer visual learning, then the video tutorial is a great resource for you. Each line of code is explained in detail with comments to help you understand what’s happening at each step.

Steps For Creating Periodic Table Using HTML and CSS

To create a Periodic Table using HTML and CSS follow the given steps line by line:

  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css

To start, add the following HTML codes to your index.html file to create the layout of the periodic table.


<!DOCTYPE html>
<html lang="en">
    <!-- Created By -->
    <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>The Periodic Table</title>
    <link href="style.css" type="text/css" rel="stylesheet">
        <h class="heading">The Periodic Table</h>
                <td class="color1">1<br>H</td>
                <td class="none" colspan="16"></td>
                <td class="color9">2<br>He</td>
                <td class="color2">3<br>Li</td>
                <td class="color3">4<br>Be</td>
                <td class="none" colspan="10"></td>
                <td class="color6">5<br>B</td>
                <td class="color1">6<br>C</td>
                <td class="color1">7<br>N</td>
                <td class="color1">8<br>O</td>
                <td class="color8">9<br>F</td>
                <td class="color9">10<br>Ne</td>
                <td class="color2">11<br>Na</td>
                <td class="color3">12<br>Mg</td>
                <td class="none" colspan="10"></td>
                <td class="color7">13<br>Al</td>
                <td class="color6">14<br>Si</td>
                <td class="color1">15<br>P</td>
                <td class="color1">16<br>S</td>
                <td class="color8">17<br>Cl</td>
                <td class="color9">18<br>Ar</td>
                <td class="color2">19<br>K</td>
                <td class="color3">20<br>Ca</td>
                <td class="color5">21<br>Sc</td>
                <td class="color5">22<br>Ti</td>
                <td class="color5">23<br>V</td>
                <td class="color5">24<br>Cr</td>
                <td class="color5">25<br>Mn</td>
                <td class="color5">26<br>Fe</td>
                <td class="color5">27<br>Co</td>
                <td class="color5">28<br>Ni</td>
                <td class="color5">29<br>Cu</td>
                <td class="color5">30<br>Zn</td>
                <td class="color7">31<br>Ga</td>
                <td class="color6">32<br>Ge</td>
                <td class="color6">33<br>As</td>
                <td class="color1">34<br>Se</td>
                <td class="color8">35<br>Br</td>
                <td class="color9">36<br>Kr</td>
                <td class="color2">37<br>Rb</td>
                <td class="color3">38<br>Sr</td>
                <td class="color5">39<br>Y</td>
                <td class="color5">40<br>Zr</td>
                <td class="color5">41<br>Nb</td>
                <td class="color5">42<br>Mo</td>
                <td class="color5">43<br>Tc</td>
                <td class="color5">44<br>Ru</td>
                <td class="color5">45<br>Rh</td>
                <td class="color5">46<br>Pd</td>
                <td class="color5">47<br>Ag</td>
                <td class="color5">48<br>Cd</td>
                <td class="color7">49<br>In</td>
                <td class="color7">50<br>Sn</td>
                <td class="color6">51<br>Sb</td>
                <td class="color6">52<br>Te</td>
                <td class="color8">53<br>I</td>
                <td class="color9">54<br>Xe</td>
                <td class="color2">55<br>Cs</td>
                <td class="color3">56<br>Ba</td>
                <td class="color4">57-71<br>&nbsp;</td>
                <td class="color5">72<br>Hf</td>
                <td class="color5">73<br>Ta</td>
                <td class="color5">74<br>W</td>
                <td class="color5">75<br>Re</td>
                <td class="color5">76<br>Os</td>
                <td class="color5">77<br>Ir</td>
                <td class="color5">78<br>Pt</td>
                <td class="color5">79<br>Au</td>
                <td class="color5">80<br>Hg</td>
                <td class="color7">81<br>Tl</td>
                <td class="color7">82<br>Pb</td>
                <td class="color7">83<br>Bi</td>
                <td class="color6">84<br>Po</td>
                <td class="color8">85<br>At</td>
                <td class="color9">86<br>Rn</td>
                <td class="color2">87<br>Fr</td>
                <td class="color3">88<br>Ra</td>
                <td class="color10">89-103<br>&nbsp;</td>
                <td class="color5">104<br>Rf</td>
                <td class="color5">105<br>Db</td>
                <td class="color5">106<br>Sg</td>
                <td class="color5">107<br>Bh</td>
                <td class="color5">108<br>Hs</td>
                <td class="color5">109<br>Mt</td>
                <td class="color5">110<br>Ds</td>
                <td class="color5">111<br>Rg</td>
                <td class="color5">112<br>Cn</td>
                <td class="color11">113<br>Nh</td>
                <td class="color11">114<br>Fl</td>
                <td class="color11">115<br>Mc</td>
                <td class="color11">116<br>Lv</td>
                <td class="color11">117<br>Ts</td>
                <td class="color11">118<br>Og</td>
                <td class="none"></td>
                <td class="none" colspan="2" rowspan="2"></td>
                <td class="color4">57<br>La</td>
                <td class="color4">58<br>Ce</td>
                <td class="color4">59<br>Pr</td>
                <td class="color4">60<br>Nd</td>
                <td class="color4">61<br>Pm</td>
                <td class="color4">62<br>Sm</td>
                <td class="color4">63<br>Eu</td>
                <td class="color4">64<br>Gd</td>
                <td class="color4">65<br>Tb</td>
                <td class="color4">66<br>Dy</td>
                <td class="color4">67<br>Ho</td>
                <td class="color4">68<br>Er</td>
                <td class="color4">69<br>Tm</td>
                <td class="color4">70<br>Yb</td>
                <td class="color4">71<br>Lu</td>
                <td class="none" colspan="1" rowspan="1"></td>
                <td class="color10">89<br>Ac</td>
                <td class="color10">90<br>Th</td>
                <td class="color10">91<br>Pa</td>
                <td class="color10">92<br>U</td>
                <td class="color10">93<br>Np</td>
                <td class="color10">94<br>Pu</td>
                <td class="color10">95<br>Am</td>
                <td class="color10">96<br>Cm</td>
                <td class="color10">97<br>Bk</td>
                <td class="color10">98<br>Cf</td>
                <td class="color10">99<br>Es</td>
                <td class="color10">100<br>Fm</td>
                <td class="color10">101<br>Md</td>
                <td class="color10">102<br>No</td>
                <td class="color10">103<br>Lr</td>


Next, add the following CSS codes to your style.css file to style the list items and make it easier to use. If you wish, feel free to customize it to your liking by changing the color, font, size, and other properties in the file.

/* Created By */
* {
    margin: 0;
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
.heading {
    font-size: 70px;
    animation: flicker 1.5s infinite alternate;
td {
    text-align: center;
    width: 5vw; /* Pixel (px) = (Viewport width unit (vw) * Viewport width) / 100 */
    border: 1px solid white;
    color: white;
    size: 12px;
    font-weight: 700;
.none {
    border: none;
.color1 {
    background-color: #00b6bc;
.color2 {
    background-color: #1b67c9;
.color3 {
    background-color: #a1669f;
.color4 {
    background-color: #004e75;
.color5 {
    background-color: #f53951;
.color6 {
    background-color: #f5b659;
.color7 {
    background-color: #f36d4a;
.color8 {
    background-color: #59cf6e;
.color9 {
    background-color: #329090;
    background-color: #562d56;
    background-color: #859998;
/* Flickering animation */
@keyframes flicker {
    0%, 17%, 33%, 50%, 66%, 83%, 100% {
        0 0 5px #fff,
        0 0 10px #0fa,
        0 0 20px #0fa,
        0 0 40px #0fa,
        0 0 70px #0fa,
        0 0 110px #0fa,
        0 0 160px #0fa
    20%, 40%, 60%, 80% {        
        text-shadow: none;
td:hover {
    filter: brightness(200%);
    color: black;

Final OutPut

You Might Like This


We have seen how web technologies such as HTML, CSS, and JavaScript can be used to create interactive and dynamic content. By following the steps outlined in this post, you have learned how to create a simple but functional periodic table that can be expanded upon and customized to fit your needs.

With your newfound knowledge of web development, you can now apply these techniques to other projects and create engaging and interactive content for your audience. Whether you are a student studying chemistry or a developer looking to enhance your skills, creating an interactive periodic table is a great way to learn and experiment with web technologies.

So what are you waiting for? Start building your interactive periodic table today!

Leave a Comment