The I.D. represents the board through a HTML table,
Game Courier used to use HTML tables for hexagonal boards, but I gave up on this in favor of using either CSS with a board image or drawing the board image. This reminds me that I was working on getting CSS to work with a generated board image so that you could view each position of the game without reloading the page, but I haven't completed that. I think I had two different approaches and wasn't sure which one to go with. I either wanted to change how I generated the board so that the image would be perfectly symmetrical, or I wanted to modify the code to work with the asymmetrical boards I was already generating. I lost sight of what I was doing when I got caught up with other projects.
in theory it should be possible to create a table with a masonry-like tiling, shifting each subsequent rank by half a cell.
I imagine this would be easier to do with CSS grid, because, as far as I know, table columns remain vertical.
I have tried this, though, and it works to some extent. But for reasons that I do not grasp yet it also changes the height of the ranks in a way that I could not control.
Using grid would probably help you avoid this problem too. With grid, you should be able to make one column or row diagonal, though I have not yet tried using grid with hexagonal boards. My CSS code for hexagonal boards uses absolute positioning, as grid was not yet part of CSS when I wrote the code. Anyway, absolute positioning is another alternative to using tables.
Game Courier used to use HTML tables for hexagonal boards, but I gave up on this in favor of using either CSS with a board image or drawing the board image. This reminds me that I was working on getting CSS to work with a generated board image so that you could view each position of the game without reloading the page, but I haven't completed that. I think I had two different approaches and wasn't sure which one to go with. I either wanted to change how I generated the board so that the image would be perfectly symmetrical, or I wanted to modify the code to work with the asymmetrical boards I was already generating. I lost sight of what I was doing when I got caught up with other projects.
I imagine this would be easier to do with CSS grid, because, as far as I know, table columns remain vertical.
Using grid would probably help you avoid this problem too. With grid, you should be able to make one column or row diagonal, though I have not yet tried using grid with hexagonal boards. My CSS code for hexagonal boards uses absolute positioning, as grid was not yet part of CSS when I wrote the code. Anyway, absolute positioning is another alternative to using tables.