Create a beautiful "three-dimensional table" on the webpage"

A table is widely used in a webpage, but we generally only use it to locate modules and typographical texts on the webpage. In fact, when the table is ready, you can make a lot of beautiful effects, such as figure 1. The table carrying text has a seemingly three-dimensional feeling. The following describes how to create a three-dimensional table.

Figure 1

The table has a stereoscopic effect because the shadow on the right and bottom of the table is light black. So we only need to implement the shadow to achieve this effect. Now let's start with the specific production process. Create a new table in Frontpage2000, select "table"-"attribute"-"table", set the width of the table to 150 pixels in the window, and set the height to 200 pixels; the border width is set to 0, the cell margin is set to 0, and the cell spacing is 1, as shown in figure 2.

Figure 2

After the preceding settings, the background color of the table is set to black, but the background color of cells in the table is set to White. After the settings are completed, the single-pixel black border effect shown in Figure 3 is displayed.

Figure 3

The next step is to create a shadow for the black border on the right and bottom. We use the CSS style function to implement it. In the option window shown in Figure 2, click "style" and select "format"-"border ". In the border and shadow Options box, select the style as "solid line", color as "gray", and select the bottom and right border application buttons in the preview options, see Figure 4.

Figure 4

Click "preview". The effect of the three-dimensional table is displayed. (Note: The final effect we have produced may be slightly different from that shown in Figure 1. This is because we first created a single-pixel black border, as shown in figure 3. The effect will be more obvious, more stereoscopic .)

Here we also return the style code defined in Dreamweaver, because the code mechanisms of Frontpage and Dreamweaver are different. In contrast, Dreamweaver writes more standardized and reasonable style code. The table code is as follows:</