Dreamweaver 4 Concise tutorial (seven, page layout)

dreamweaver| Tutorials | Web page vii. layout of web pages

　　 Use of Tables


The table is a very important element of the Web page, because the HTML itself does not provide more typesetting means, we often need to use tables to achieve the fine layout of the Web page. It can be said that the table is the most important one of the skills of Web page production, the use of the table is good or bad, directly reflects the level of web designers.


Click on the object panel to see the following dialog box:

　　 ①Rows: Table row number; Columns: Number of columns in the table;

　　 ②Width: The widths of the tables, which can be pixels (like numbers) or percent (percentages). The table size defined in pixels is fixed, and the table defined by percentage changes according to the size of the browser. The difference between the two definition methods will continue to be explained in depth later;

　　 ③Border: The width of the table line;

　　 ④Cell Padding: spacing of cells; cell Spacing: Cells margin. The so-called cell, is the table inside each small lattice.

As shown in the diagram, you get the following table:

Click on the table line to select the entire table, which you can see in the Properties panel:

　　 ①Rows,cols: Rows and columns of the table;

　　 ②W,h: The width and height of the table, in general, we do not define the height of the table;

　　 ③Cellpad,cellspace: Cell spacing and cell margins; Border: The width of the table line;

　　 ④AILGN: The alignment of the table, you can put the table to the left, in the Center, right

　　 ⑤: Eliminates the height setting of the row;
: Eliminates the column width setting;
: Converts the table width setting from a percentage to pixels;
: Converts the table width setting from pixels to a percentage;

　　 ⑥Bg color: Sets the background color of the table;

　　 ⑦Brdr color: Sets the colors of the table line;

　　 ⑧Bg Image: Set the background of the table, if the background image set, the background color is invalid; Click on the back of the Briefcase button to select the background image;


If we move the cursor to one of the cells, we see a different property panel at this point:

　　 ①: Merge Cells (before you select the corresponding need to merge cells first);
: Split cells, split into multiple rows or columns;

　　 ②Horz: The horizontal alignment of the cell inside, the function is similar;
Vert: Vertical alignment within the cell;

　　 ③W,h: The width and height of the cell;

　　 ④Bg: Cell background chart;

　　 ⑤Bg: cell background color;

　　 ⑥BRDR: Cell border color.