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.