HTML table substitute <td>

html-css
#1

Hi I was wondering if there is another tag that would act like a <td> element, the other times I tried to use something like a <to> or <div> it would appear outside of the table.

When I tried to use the <th> whatever was inside it disappeared.

Thanks!

#2

tables give us a way to nicely display a data set for example, so the table allows certain tags (td) while it doesnā€™t allow others like div

th should be working fine, but its difficult to say why its not working in your case without seeing it

#3

Sorry here is the fiddle, Iā€™m trying to make a periodic table with atomic numbers at the bottom. But I need to skip the box where the elements at the bottom are supposed to be, and I tried using if loops but it just led to a whole lot more complications. I decided the best way was to look for a tag that could contain. 57-81 and 75-(Iā€™m not quite sure) so the for loop,would not include it and therefore not put a number on them.

Thank you!

#4

Here is a mockup of the Periodic Table using a TABLE element.

Periodic Table

periodic_table_of_elements

adapted from Properties of Periodic Table of Elements

#5

Hi thanks, Iā€™ll try to incorporate that into mine, thanks so much!

#6

Thatā€™s quite a word. ā€˜adaptā€™ might be the one weā€™re reaching for. Thereā€™s nothing to incorporate but the whole. Study it and learn from it by asking questions.

The link above is always up to date.

#7

Sorry for not replying earlier ( I live in Phil ), basically I just need guidance whether I should use javascript if () or if I should try to put the two boxes in a different tag so it wonā€™t be affected by the for loop.

Thankyou!

#8

Please elaborate. Not clear on your question. Thank you.

#9

Sorry hereā€™s the for loop:

for(; x<121; ) {
var td = document.getElementsByTagName("td");

var str = "</br><small>";


str += x;
str += "</small>";
var i = x-1;
td[i].innerHTML += str;

x++


}

So I was thinking, since the for loop will only put numbers on the elements with <td>, Iā€™m looking for a substitute tag to hold the two blocks

heres what Iā€™m sort of trying to copy:
https://www.chemicool.com/images/periodic-table.png

the block between Ba and Hf

and the one between Ra and Rf

are the ones I donā€™t want the for loop to put a number on,

so what I want to do is to put them in a separate tag like

(which didnā€™t work). or put an if(td = td[57]) { dont put a number on it }

which of the two can/should I do?

#10

The value assigned is a node list, and should not be inside a loop.

Serially it is difficult to sketch out this table given the constraints. Programatically we can break out some slices, and define output components by these. Weā€™re in the pragmatic zone, now, and have to work with what we knowā€¦ 18 groups, 7 periods,

The number one problem I spot in this code is all the var keywords. This indicates to me some issues with understanding scope. But we should first address the elephant in the room, x.

Assumes x exists when the conditional is evaluated, which no evidence of such has come forward.

 > for(; x<121; ) {
   }
 x Uncaught ReferenceError: x is not defined

As we can see, JS didnā€™t even get to this line.

#11

I added the var to both the x and the i variables.

var x=3;
var i=2;

for(; x<121; ) {
var td = document.getElementsByTagName("td");

var str = "</br><small>";
str += x;
str += "</small>";
var i = x-1;
td[i].innerHTML += str;

x++


}
#12

This node list should be defined before the loop, and since i is defined before the loop, like x, it should not have a var in the loop. str can be declared also.

If you want to make it simpler, overall,

var td = document.getElementsByTagName("td");
var str;

for(var x = 3, i = 2; x < 121; x++) {
    str = "<br><small>";
    str += x;
    str += "</small>";
    i = x - 1;
    td[i].innerHTML += str;
}
#13

@thisisnotpermanent ā€¦ Where have you got with this project? Weā€™re interested to know how you resolved this problem.