Periodic table building using div method

Hi everyone!
I need the approach to how to build a periodic table just by using div not tables/flex/grid.
Please help.


How are you thinking about approaching this?

Do you have data that your importing? Are you just going for the symbol for each or adding atomic weight too?

I want it to be like this.

That helps, To know the layout that you are going for. Thanks.

What is your approach? Are you going to hard code all 150+ squares or do you have database/JSON/Array/Object to built it with JavaScript?

1 Like

Is this part of a challenge? Semantically I see very little sense of building a table without using <table>.

If you can’t use table/flex/grid then you have the option of using the ‘position’ property and the offset properties of left/right/up/down. With a Javascript loop you can auto-generate all the squares and use inline styling to position them - all within the loop. If I was prevented from using table/flex/grid, that’s probably how I would do it.

1 Like

This is part of our course curriculum HTML/CSS

Actually this is a part of our course curriculum of Full Stack Development and they have not yet taught us JavaScript.

This is a cruel project to have with just HTML/CSS … a lot of typing is what I am trying to say.

I’m with @SixStringsCoder . JS is the best route to build it;

here is an example with a 3 x 3 table. I would NOT* want to go this route with the full table though…

Well, if you “cheat” like me, you can use JavaScript to generate your HTML, then copy it from Chrome Dev tools. Copy/paste it into the HTML body. Then to generate your CSS, just use JavaScript to generate strings that look like CSS but add to the DOM with innerHTML. Again copy and paste from DOM (delete from DOM) put the code into a code editor to prettify it. Copy paste to CSS doc or style tags in your .html doc.

I say this because I just did this for a project making a periodic table! : )

I didn’t want to write all those CSS rules for every element. Understand, I was challenging myself to use Grid and specifically grid-element-areas. I just couldn’t force myself to write 118 CSS rules all with grid-area. :upside_down_face:

1 Like

I put 2 classes, the element class to make the box, and element-1 to specifically control the position!

Imperative teaching is as bad as imperative programming: “Do me a table, but without table, without all new fancy tricks I don’t understand and don’t you dare using JavaScript” :man_facepalming:

Here’s the idea for you, take an image of periodic table and place it inside one div - this way you will be able to get away from using grid layout :partying_face:
“”I’m pretty sure there is nothing in the rules prohibiting this, isn’t it?

(You can consider this a lesson on imperative programming and why is it considered a bad practice by some)


@snigo I know your being smart here but there are some good reasons for learning the fundamentals. I wasn’t allowed to use a calculator in my Calculus; it wasn’t about the math it was it was about the fundamentals.

BUT making a 150+ cell ‘non table’ in HTML/CSS. it’s almost like they want you to learn how to NOT waste time and break the rules. Or waste a lot of time.

Maybe it’s one of things that you get to build again in 3 months after learning JS? And you learn the “DRY” (dont repeat yourself) principle and understand why us random people on the internet question the approach to requirements of this project :stuck_out_tongue:

1 Like

Fundamentals like this?

.hdn {
  visibility: hidden;
1 Like

Yes, we can use visibility: hidden option.
I created a matrix like structure of 7 rows and 18 columns, then I’ve hidden those unnecessary blocs. But the problem is I’m not able to accommodate that big blue block.

So, correct me if I understand this wrong. You are not allowed to use proper tools that was built by smart people for cases like this and instead you’re hacking your way through. What kind of school is this? OMG! :flushed:

Look into using absolute positioning for the large blue box.

1 Like

This is just an assignment to make us understand the concepts of div and float.

Use the div element with a class