Dreamweaver refine the appearance of tables in a Web page

The table is undoubtedly the most important object in the production of web pages, because the usual web pages are based on the table layout and the elements of the organization, it directly determines whether the Web page is beautiful, content organization is clear. But many friends often overlook the study of forms, and look at other layers, pictures, special effects and so on, in fact, reasonable use of forms can easily beautify your page, we also often heard a friend complained that the table made the page monotonous, rough, lack of change, but also often heard someone asked how to make a 1-pixel table border. In fact, in the Dreamweaver we can very convenient refinement of your form, so that your Web page more beautiful fine. Here are three ways to refine your form in Dreamweaver.

One, the use of the property panel.

(Figure I)

First we need to know the parameters on the two Table Properties panel: Cellpad and Cellspace. As shown in figure, Cellpad refers to the distance between two cells in a table, Cellspace is the distance between each cell and its middle content. By changing these two parameters, and with the background color changes, you can easily make a 1-pixel table border.

1. Use the object panel to insert a table that defines the width, height, and number of rows and columns of the table. Note The default Cellpad and Cellspace, border for inserting tables in Dreamweaver are 0. As shown in figure II;

(Figure II)

2. The border of the table in the property panel is 0,cellpad to 5 (this allows 5 pixels between the contents of the cell and the edge of the cell); The Cellspace is 1 (this allows the cell to maintain a 1-element spacing between cells). As shown in figure III;

(Figure III)

3, set the table background color #999999, such as Figure four;

(Figure IV)

4, set the background of the cell color #ffffff, as shown in Figure five;

(Figure V)

5, preview the effect in the browser, we can see the table rendering a pixel border, such as Figure six;

(Figure VI)

Second, the use of nested tables.

or the main principle above, we are using the table to nest each other, we can achieve more results.

1, first we draw a table, referring to the previous example to set the table Cellpad and cellspace values and colors. The concrete effect is shown in Fig. Seven;

(Figure Seven)

2, then draw another single row of the table, set cellpad=2,cellspace=1 specific parameters such as Figure eight;

(Figure Eight)

3. Move the table in the first step to the table in the second step, where the table looks like figure nine;

(Figure Nine)

We see that this table has a two-line outer frame, a single-line inner box.

4, and then modify the table in the second step is a single row of two columns, in each cell placed in a first step of the table, the final table looks like Figure 10;

(Figure 10)

Third, the use of style forms to beautify the table.

1, direct redefinition, the detailed definition of style sheet I do not introduce, the definition table border is mainly in the Style editor border options, such as Figure 11;

(Figure 11)

Width represents the top and bottom border widths; Color can be defined to define the colors of the top and bottom borders respectively; Style can be in the shape of a ding-side box, commonly used for solid (solid line), other types are: dotted (dotted line), dashed (dashed), double (double line), Groove (Groove Line), Ridge (ridge Line), inset (inverted), outset (outer). However, there are several types that must be IE5.5 above to be seen.

2, redefined after the appearance of the table as shown in Figure 12;

(Figure 12)

3, we cancel the redefinition, define a single. Tdstyle style, specific parameters such as Figure 13;

(Figure 13)

Note that here we define the top and bottom border widths of 1 pixels, and the left and right sides are 0.

4, the final table effect see Figure 14;

(Figure 14)

We can see that this table renders only horizontal lines, without the appearance of vertical bars.

5, change the top and left in the previous step for 1,bottom and right for 0. The table effect is shown in Figure 15;

(Figure 15)

At this point the table presents a stereo-like effect.

6, the above table does not feel perfect, the entire table on the right and bottom without borders. We can define a style again. Table1, which defines the four sides of this style as 1 pixels, and gives it, at which point the table looks like Figure 16;

(Figure 16)

Summary: Reasonable use of the table described above, can be very convenient to create a variety of common table styles, so as to beautify your page. The use of style sheets has expanded the appearance of the table style, with the support of High browser, can achieve more diverse effects, such as dashes, stereo lines, and so on. Personal feeling in the design of commercial website, more use table can add page level, at the same time can make the page simple and generous, but also to remind everyone in the table nesting level not more than three layers.

Note : More wonderful articles please pay attention to the triple Web Design tutorial section.