Tables are undoubtedly the most important object in web page production, because usually web pages rely on tables for layout and organization of various elements. It directly determines whether the web page is beautiful and whether the content organization is clear. However, many friends often neglect the study of tables and focus on other layers, pictures, special effects, etc. In fact, reasonable use of tables can easily beautify your page. We also often hear friends complain that the page created by tables is monotonous. , rough, lack of variety, and I often hear people ask how to make a 1-pixel table border. In fact, in Dreamweaver we can refine your table very conveniently, thereby making your web page more beautiful and refined. We will introduce how to refine your table in Dreamweaver in the following three aspects.
1. Use the properties panel.
Figure 1 First we need to understand the parameters on the two table property panels: CellPad and CellSpace. As shown in Figure 1, CellPad refers to the distance between two cells in the table, and CellSpace refers to the distance between each cell and the content in the middle. By changing these two parameters and matching the background color, you can easily create a 1-pixel table border.
1. Use the Object panel to insert a table and define the width, height, rows and columns of the table. Note that the default CellPad, CellSpace, and Border of the table inserted in Dreamweaver are all 0 at this time. As shown in Figure 2;
Figure 2
2. Define the Border of the table in the properties panel as 0, CellPad as 5 (this will keep 5 pixels between the content in the cell and the edge of the cell); CellSpace as 1 (this will keep 5 pixels between the cells) 1 element spacing). As shown in Figure 3;
Figure 3
3. Set the background color of the table to #999999, as shown in Figure 4;
4. Set the background color of the cell to #FFFFFF, as shown in Figure 5;
Figure 5
5. Preview the effect in the browser. We can see that the table has a pixel border, as shown in Figure 6;
Figure 62
: Using table nesting.
Still the main principle above, we can achieve more effects by using the nesting of tables.
1. First, we draw a table and set the values and colors of CellPad and CellSpace of this table by referring to the previous example. The specific effect is shown in Figure 7;
Figure 7 2. Next draw another single row and single column table, set CellPad=2, CellSpace=1. The specific parameters are as shown in Figure 8;
Figure 8
3. Move the table created in the first step to the table in the second step. The table now looks like Figure 9;
In Figure 9, we see that this table has a double-line outer frame and a single-line inner frame.
4. Modify the table in the second step to a single row and two columns, and place a table in the first step in each cell. The final table will look like Figure 10;
Redefine
Figure 10
, define a .tdstyle style separately, the specific parameters are as shown in Figure 13;
Note here that we define the top and bottom border width to be 1 pixel, and the left and right border width to be 0.
4. The final table effect is shown in Figure 14;
(Picture 15)
At this time, the table presents a three-dimensional effect.
6. The table above does not feel perfect. There are no borders on the right and bottom of the entire table. We can define another style.table1, define the four sides of this style to be 1 pixel, and attach it
