To design a HTML periodic table using HTML, CSS, JavaScript :
Step 1 : To define HTML syntax and represent a page.
Step 2 : To include a title tag <title> Periodic Table</title>.
Step 3 : To write a meta tag <meta name="author" content="Divya">
Step 4 : To set a background color to the HTML page.
Step 5: The basic page is partitioned to four parts(rows) i.e, main heading, center part, right aligned elements, the bottom part using table row concept . Step 6: To align a border to the table using table border attribute.
Step 7 : To modify the first row to main heading part has the periodic table of HTML elements.
Step 8 : The heading part is aligned to a center of the page using text-align:center; style. Step 9: To decrease the row height using table height attribute.
Step 10 : The text is aligned into the top of the page using vertical alignment concept i.e, vertical-align:text-top.
Step 11 : To increase the center part width and height.
Step 12 : The center part divided into nine rows
Step 13: The nine rows are partitioned into 15 cells.
Step 14: In cells dividing process we include colspan concept.
Step 15: After cells partitioned concept we use a border none style in the second and third row.
Step 16 : Elements are added into the middle part cells.
Step 17 : The elements are aligned into the center using text-align concept.
Step 18 : The font-size and font-weight applied to the centered elements.
Step 19 : Next we divide the first bottom part into four cells.
Step 20: Elements are Added into the first bottom part.
Step 21: The font-size, font-weight and text-align applied to the first bottom part elements.
Step 22 : The first bottom part aligned into the right using align:right; table attribute.
Step 23: To write a second bottom elements using table row concept.
Step 24: The font-color and font-size is applied to the bottom part text.
Step 25: The rectangular boxes are inserted in the text part of the bottom row using width, height property in table td cell.
Step 26: To apply space between text and rectangular box using & thinspace.
Step 27 : To set a color for the middle part elements.
Step 28 : And to apply a box color for a first bottom part right aligned elements.
Step 29 : To set a color for the rectangular boxes of second bottom part elements.
Step 30: To apply border-radius to the centered part cells.
Step 31: To apply border-radius to the first bottom right aligned cells.
Step 32 : The padding-top concept is applied to the main heading part of periodic table of HTML elements.
Step 33 : To apply the margin-left concept to the second bottom elements.
Step 34 : To apply the margin-right concept to the third bottom elements.
Step 35 : To remove the borders to the HTML periodic table.
Step 36 : Complete HTML Periodic table.
