Building an ACP 3D HTML Table Image Gallery

3D HTML Table Basics

The HTML specification does not give an HTML element for a 3D table. There are several ways to design a 3D table. The design I use here is the one I prefer.

My design for a 3D table is as follows: you have the normal 2D table. Each cell in the table has only one element, which is a one-row table (a table with only one row). It is the cells of the one-row tables that can take arbitrary content. Each one-row table must have an ID. The following diagram illustrates how I give the IDs.

T00, T01, T02, T03, T04

T10, T11, T12, T13, T14

T20, T21, T22, T23, T24

T30, T31, T32, T33, T34

T40, T41, T42, T43, T44

T50, T51, T52, T53, T54

Each ID begins with a T, followed by the number of the 2D row to which the one-row table belongs, and then the number of the 2D column to which the one-row table belongs. You should imagine each of the one-row tables to be going into the page.

If all of the one-row tables contain the same number of cells, then then you have a cuboid, which is a regular 3D table. If they are not the same, then you have an irregular 3D table. In this article I only consider cases of regular 3D tables.

Planes

You can consider the cells to be in a 3D grid with horizontal and vertical planes. The vertical planes should be seen as 2D tables, one behind the other, into the page. Counting of the planes begins from zero. The first plane is plane 0, the second is plane 1, the third is plane 2, and so on.

Indices

Counting of all indices begins from zero. I use the variable i to denote the index for a row in the normal 2D table; the variable j to denote the index for a column in the normal 2D table; and the variable k to denote the index for a vertical plane in the 3D table. This gives an index order of (i, j, k).

Seeing 3D Contents on a 2D Screen

We have a 3D table. How do you see the content of each cell on a 2D screen? The table has been arranged into vertical planes. You see the cell contents plane by plane; you do not see all the planes at once. All the cells of the plane that are to be seen, have the value of “block” for their CSS Display property. The rest of the cells in the other planes have the value of “none” for their CSS Display property.

When an HTML element has a display property of “block,” it is seen on screen. When an HTML element has a display property of “none,” it is not seen on screen and it does not occupy space.