Building an Image Gallery in a 3D HTML Table
(Page 1 of 4 )
This article aims to show you how you can use an HTML three-dimensional table as a picture gallery. The HTML specification does not specify a 3D HTML table. However, you can create one, as I've discussed in a previous article. You will also need basic knowledge of database tables, HTML, DOM and JavaScript. This article is the first part of a three-part series.
If you haven't done so already, you should read my earlier article on building a 3D HTML table because I will only be going over the basics on that topic here.
I will also show you how you can maximize and restore each picture in the gallery. I use a technique I call the layer method to do this; you can read my article on that topic at the link. Since I will only be summarizing the method here, you will want to read and understand that article before reading this one.
3D HTML Table Summary
The HTML specification does not give an HTML element for a 3D table. There are several ways of designing a 3D table. The design 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 the number of cells of the one-row tables are the same, 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.
Next: 3D HTML Table: a Closer Look >>
More HTML Articles
More By Chrysanthus Forcha
