Hi everyone!
I need the approach to how to build a periodic table just by using div not tables/flex/grid.
Please help.
Welcome!
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?
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. 
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ā 
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 
āā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)
2 Likes
@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 
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! 
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