This article will show you how to create a Periodic Table design using HTML, and CSS. The Periodic Table is a tabular arrangement of chemical elements, where they are organized by their atomic number, electron configuration, and recurring chemical properties. It provides a systematic way to understand and study the vast array of elements and their interactions.
Approach
- To create the Periodic Table, we start by designing the HTML layout, which includes a container for the table and a legend to distinguish element types.
- To make elements identifiable, we use CSS to apply specific colors and styles to their respective groups, ensuring a visually clear presentation.
- We employ Grid and FlexBox layout methods to structure the elements effectively on the web page.
- Each element is represented using <div> elements with unique CSS classes, allowing us to specify properties like atomic number and element name, resulting in an organized and visually appealing display.
CSS Properties
- grid-template-rows: This property specifies the rows of the grid layout in the ‘.periodic-table’.
- font-family: This property is used to define the font family of the entire HTML document.
- ::before: This is the pseudo-element that is inserted before the content of the selected element.
- grid-template-columns: This property defines the column of the grid layout in the ‘.periodic-table’.
- box-sizing: This property is used to set the box model for all the elements.
Example: This example describes the basic implementation of the Periodic Table using HTML and CSS.
HTML
<!DOCTYPE html> < head >
< meta charset = "UTF-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" >
< link rel = 'stylesheet' href = 'style.css' >
< title >Periodic table using HTML and CSS</ title >
</ head >
< body >
< h1 id = "page-title" >
GeeksforGeeks Periodic Table with HTML and CSS
</ h1 >
< div class = 'p-Table' aria-labelledby = 'page-title' >
< div tabindex = '0' class = 'ele ele-1 d-nonmetal gas' >
< div class = 'ele-name' title = 'Hydrogen' >
H
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-2 n-gas gas' >
< div class = 'ele-name' title = 'Helium' >
He
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-3 al-metal' >
< div class = 'ele-name' title = 'Lithium' >
Li
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-4 alearth-metal' >
< div class = 'ele-name' title = 'Beryllium' >
Be
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-5 metalloid' >
< div class = 'ele-name' title = 'Boron' >
B
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-6 patomic-nonmetal' >
< div class = 'ele-name' title = 'Carbon' >
C
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-7 d-nonmetal gas' >
< div class = 'ele-name' title = 'Nitrogen' >
N
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-8 d-nonmetal gas' >
< div class = 'ele-name' title = 'Oxygen' >
O
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-9 d-nonmetal gas' >
< div class = 'ele-name' title = 'Fluorine' >
F
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-10 n-gas gas' >
< div class = 'ele-name' title = 'Neon' >
Ne
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-11 al-metal' >
< div class = 'ele-name' title = 'Sodium' >
Na
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-12 alearth-metal' >
< div class = 'ele-name' title = 'Magnesium' >
Mg
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-13 pTransition-metal' >
< div class = 'ele-name' title = 'Aluminium' >
Al
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-14 metalloid' >
< div class = 'ele-name' title = 'Silicon' >
Si
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-15 patomic-nonmetal' >
< div class = 'ele-name' title = 'Phosphorus' >
P
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-16 patomic-nonmetal' >
< div class = 'ele-name' title = 'Sulfur' >
S
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-17 d-nonmetal gas' >
< div class = 'ele-name' title = 'Chlorine' >
Cl
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-18 n-gas gas' >
< div class = 'ele-name' title = 'Argon' >
Ar
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-19 al-metal' >
< div class = 'ele-name' title = 'Potassium' >
K
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-20 alearth-metal' >
< div class = 'ele-name' title = 'Calcium' >
Ca
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-21 trans' >
< div class = 'ele-name' title = 'Scandium' >
Sc
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-22 trans' >
< div class = 'ele-name' title = 'Titanium' >
Ti
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-23 trans' >
< div class = 'ele-name' title = 'Vanadium' >
V
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-24 trans' >
< div class = 'ele-name' title = 'Chromium' >
Cr
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-25 trans' >
< div class = 'ele-name' title = 'Manganese' >
Mn
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-26 trans' >
< div class = 'ele-name' title = 'Iron' >
Fe
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-27 trans' >
< div class = 'ele-name' title = 'Cobalt' >
Co
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-28 trans' >
< div class = 'ele-name' title = 'Nickel' >
Ni
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-29 trans' >
< div class = 'ele-name' title = 'Copper' >
Cu
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-30 pTransition-metal' >
< div class = 'ele-name' title = 'Zinc' >
Zn
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-31 pTransition-metal' >
< div class = 'ele-name' title = 'Gallium' >
Ga
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-32 metalloid' >
< div class = 'ele-name' title = 'Germanium' >
Ge
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-33 metalloid' >
< div class = 'ele-name' title = 'Arsenic' >
As
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-34 patomic-nonmetal' >
< div class = 'ele-name' title = 'Selenium' >
Se
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-35 d-nonmetal liquid' >
< div class = 'ele-name' title = 'Bromine' >
Br
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-36 n-gas gas' >
< div class = 'ele-name' title = 'Krypton' >
Kr
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-37 al-metal' >
< div class = 'ele-name' title = 'Rubidium' >
Rb
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-38 alearth-metal' >
< div class = 'ele-name' title = 'Strontium' >
Sr
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-39 trans' >
< div class = 'ele-name' title = 'Yttrium' >
Y
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-40 trans' >
< div class = 'ele-name' title = 'Zirconium' >
Zr
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-41 trans' >
< div class = 'ele-name' title = 'Niobium' >
Nb
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-42 trans' >
< div class = 'ele-name' title = 'Molybdenum' >
Mo
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-43 trans' >
< div class = 'ele-name' title = 'Technetium' >
Tc
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-44 trans' >
< div class = 'ele-name' title = 'Ruthenium' >
Ru
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-45 trans' >
< div class = 'ele-name' title = 'Rhodium' >
Rh
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-46 trans' >
< div class = 'ele-name' title = 'Palladium' >
Pd
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-47 trans' >
< div class = 'ele-name' title = 'Silver' >
Ag
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-48 pTransition-metal' >
< div class = 'ele-name' title = 'Cadmium' >
Cd
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-49 pTransition-metal' >
< div class = 'ele-name' title = 'Indium' >
In
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-50 pTransition-metal' >
< div class = 'ele-name' title = 'Tin' >
Sn
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-51 metalloid' >
< div class = 'ele-name' title = 'Antimony' >
Sb
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-52 metalloid' >
< div class = 'ele-name' title = 'Tellurium' >
Te
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-53 d-nonmetal' >
< div class = 'ele-name' title = 'Iodine' >
I
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-54 n-gas gas' >
< div class = 'ele-name' title = 'Xenon' >
Xe
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-55 al-metal' >
< div class = 'ele-name' title = 'Cesium' >
Cs
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-56 alearth-metal' >
< div class = 'ele-name' title = 'Barium' >
Ba
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-57 lan lan-group' >
< div class = 'ele-name' title = 'Lanthanum' >
La
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-58 lan lan-group' >
< div class = 'ele-name' title = 'Cerium' >
Ce
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-59 lan lan-group' >
< div class = 'ele-name' title = 'Praseodymium' >
Pr
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-60 lan lan-group' >
< div class = 'ele-name' title = 'Neodymium' >
Nd
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-61 lan lan-group' >
< div class = 'ele-name' title = 'Promethium' >
Pm
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-62 lan lan-group' >
< div class = 'ele-name' title = 'Samarium' >
Sm
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-63 lan lan-group' >
< div class = 'ele-name' title = 'Europium' >
Eu
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-64 lan lan-group' >
< div class = 'ele-name' title = 'Gadolinium' >
Gd
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-65 lan lan-group' >
< div class = 'ele-name' title = 'Terbium' >
Tb
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-66 lan lan-group' >
< div class = 'ele-name' title = 'Dysprosium' >
Dy
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-67 lan lan-group' >
< div class = 'ele-name' title = 'Holmium' >
Ho
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-68 lan lan-group' >
< div class = 'ele-name' title = 'Erbium' >
Er
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-69 lan lan-group' >
< div class = 'ele-name' title = 'Thulium' >
Tm
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-70 lan lan-group' >
< div class = 'ele-name' title = 'Ytterbium' >
Yb
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-71 lan lan-group' >
< div class = 'ele-name' title = 'Lutetium' >
Lu
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-72 trans' >
< div class = 'ele-name' title = 'Hafnium' >
Hf
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-73 trans' >
< div class = 'ele-name' title = 'Tantalum' >
Ta
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-74 trans' >
< div class = 'ele-name' title = 'Tungsten' >
W
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-75 trans' >
< div class = 'ele-name' title = 'Rhenium' >
Re
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-76 trans' >
< div class = 'ele-name' title = 'Osmium' >
Os
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-77 trans' >
< div class = 'ele-name' title = 'Iridium' >
Ir
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-78 trans' >
< div class = 'ele-name' title = 'Platinum' >
Pt
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-79 trans' >
< div class = 'ele-name' title = 'Gold' >
Au
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-80 pTransition-metal' >
< div class = 'ele-name' title = 'Mercury' >
Hg
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-81 pTransition-metal' >
< div class = 'ele-name' title = 'Thallium' >
Tl
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-82 metalloid' >
< div class = 'ele-name' title = 'Lead' >
Pb
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-83 metalloid' >
< div class = 'ele-name' title = 'Bismuth' >
Bi
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-84 pTransition-metal' >
< div class = 'ele-name' title = 'Polonium' >
Po
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-85 pTransition-metal' >
< div class = 'ele-name' title = 'Astatine' >
At
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-86 n-gas gas' >
< div class = 'ele-name' title = 'Radon' >
Rn
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-87 al-metal' >
< div class = 'ele-name' title = 'Francium' >
Fr
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-88 alearth-metal' >
< div class = 'ele-name' title = 'Radium' >
Ra
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-89 act act-group' >
< div class = 'ele-name' title = 'Actinium' >
Ac
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-90 act act-group' >
< div class = 'ele-name' title = 'Thorium' >
Th
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-91 act act-group' >
< div class = 'ele-name' title = 'Protactinium' >
Pa
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-92 act act-group' >
< div class = 'ele-name' title = 'Uranium' >
U
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-93 act act-group' >
< div class = 'ele-name' title = 'Neptunium' >
Np
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-94 act act-group' >
< div class = 'ele-name' title = 'Plutonium' >
Pu
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-95 act act-group' >
< div class = 'ele-name' title = 'Americium' >
Am
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-96 act act-group' >
< div class = 'ele-name' title = 'Curium' >
Cm
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-97 act act-group' >
< div class = 'ele-name' title = 'Berkelium' >
Bk
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-98 act act-group' >
< div class = 'ele-name' title = 'Californium' >
Cf
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-99 act act-group' >
< div class = 'ele-name' title = 'Einsteinium' >
Es
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-100 act act-group' >
< div class = 'ele-name' title = 'Fermium' >
Fm
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-101 act act-group' >
< div class = 'ele-name' title = 'Mendelevium' >
Md
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-102 act act-group' >
< div class = 'ele-name' title = 'Nobelium' >
No
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-103 act act-group' >
< div class = 'ele-name' title = 'Lawrencium' >
Lr
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-104 trans' >
< div class = 'ele-name' title = 'Rutherfordium' >
Rf
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-105 trans' >
< div class = 'ele-name' title = 'Dubnium' >
Db
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-106 trans' >
< div class = 'ele-name' title = 'Seaborgium' >
Sg
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-107 trans' >
< div class = 'ele-name' title = 'Bohrium' >
Bh
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-108 trans' >
< div class = 'ele-name' title = 'Hassium' >
Hs
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-109 trans' >
< div class = 'ele-name' title = 'Meitnerium' >
Mt
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-110 trans' >
< div class = 'ele-name' title = 'Darmstadtium' >
Ds
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-111 trans' >
< div class = 'ele-name' title = 'Roentgenium' >
Rg
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-112 trans' >
< div class = 'ele-name' title = 'Copernicium' >
Cn
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-113 trans' >
< div class = 'ele-name' title = 'Nihonium' >
Nh
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-114 trans' >
< div class = 'ele-name' title = 'Flerovium' >
Fl
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-115 trans' >
< div class = 'ele-name' title = 'Moscovium' >
Mc
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-116 trans' >
< div class = 'ele-name' title = 'Livermorium' >
Lv
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-117 trans' >
< div class = 'ele-name' title = 'Tennessine' >
Ts
</ div >
</ div >
< div tabindex = '0' class = 'ele ele-118 n-gas gas' >
< div class = 'ele-name' title = 'Oganesson' >
Og
</ div >
</ div >
</ div >
</ body >
</ html >
|
CSS
html { background-color : #eed3ba ;
font-family : 'Poppins' , Arial , sans-serif ;
} * { box-sizing: border-box;
margin : 0 ;
padding : 0 ;
} #page-title { text-align : center ;
color : green ;
} .p-Table { display : grid;
grid-template-columns:
repeat ( 18 , [group] minmax( 5em , 1 fr));
grid-template-rows: repeat ( 7 ,
[period] 1 fr) [row 6 x] 1 fr [row 7 x] 1 fr;
grid-gap: 0.5em ;
counter-reset : atomic-number;
} .p-Table::before { content : '' ;
grid-row: row 6 x / span 2 ;
grid-column: 1 / 3 ;
} .ele { border : thin solid black ;
text-align : center ;
opacity: 0.85 ;
} .ele:hover, .ele:focus { opacity: 1 ;
font-weight : bold ;
} .ele-name { border-bottom : none !important ;
text-decoration : none !important ;
word-break: break- all ;
hyphens: auto ;
font-size : 1.5em ;
counter-increment : atomic-number;
} .ele-name::before { font-size : 0.8 rem;
display : block ;
content : counter (atomic-number);
color : black ;
} .ele-name::after { font-size : 0.85 rem;
display : block ;
content : attr (title);
} .ele -57 ,
.ele -89 {
position : relative ;
} .ele -57: :before,
.ele -89: :before,
.ele -57: :after,
.ele -89: :after {
display : block ;
position : absolute ;
width : 100% ;
font-size : 1em ;
top : 25% ;
font-weight : normal !important ;
} .ele -57: :before,
.ele -89: :before {
top : calc( -200% - 1 rem);
} .ele -57: :before,
.ele -57: :after {
content : '*' ;
} .ele -89: :before,
.ele -89: :after {
content : '**' ;
} .ele -57: :after,
.ele -89: :after {
left : calc( -50% - 1 rem);
} .ele -5 ,
.ele -13 {
grid-column: 13 ;
} .ele -72 ,
.ele -104 {
grid-column: 4 ;
} .lan-group { grid-row: row 6 x;
position : relative ;
top : 1em ;
} .a-grp { grid-row: row 7 x;
position : relative ;
top : 1em ;
} .n-gas { grid-column: 18 ;
} .legend { grid-row: 1 / 3 ;
grid-column: 5 / span 6 ;
border : medium ridge black ;
padding : 0.5em ;
} .legend h 2 {
margin : 0 ;
} .legend ul { padding-left : 0 ;
list-style : none ;
} .legend li { display : inline- block ;
padding : 0.25em ;
margin-bottom : 0.5em ;
} .lan { background-color : pink;
} .actinide { background-color : hotpink;
} .al-metal { background-color : #f66 ;
} .alearth-metal { background-color : #ffdead ;
} .d-nonmetal { background-color : #e7ff8f ;
} .patomic-nonmetal { background-color : #a1ffc3 ;
} .pTransition-metal { background-color : lightgray;
} .metalloid { background-color : #cc9 ;
} .n-gas { background-color : #c0ffff ;
} .trans { background-color : #8486f8
} .liquid { color : darkgreen;
} .gas { color : #c00 ;
} |
Output: