How to make web tables with Dreamweaver

Button or insert menu >; Select "Table". The table dialog box as shown in the figure below pops up. We already know these parameters. Good: 2. Column: 2. The remaining parameters remain at the default values. .

Dreamweaver web page making tutorial: table design

2. Generate a table in the edit view interface. The black dots in the upper right corner, lower right corner and lower right corner of the table are adjustment handles, which are used to adjust the height and width of the table. When the cursor moves to this point, you can adjust the height and width of the table respectively. It can also be adjusted by moving to the boundary line of the table. (as shown in the figure below)

Dreamweaver web page making tutorial: table design

3. Hold down the left key in the first cell of the table and drag it down to select the second cell. (as shown in the figure below)

Dreamweaver web page making tutorial: table design

Then select the Merge Cells button in the expanded property panel (as shown in the red box below). Merge the cells of the table. If you want to split cells, you can use the button to the right of the Merge Cells button.

Dreamweaver web page making tutorial: table design

The result of the merger is as follows.

Dreamweaver web page making tutorial: table design

4. Drag the border of the table with the mouse to adjust it to the appropriate size.

5. Click on the cell on the left, and then enter the words "appreciation of photographic works" to adjust the size, because each word has to be entered once in the vertical direction. If you need to resize the grid. Just move the mouse cursor to the border and drag.

6. Insert pictures and text in the upper and lower cells on the right. The basic appearance of the page is available.

Dreamweaver web page making tutorial: table design

7. Move the cursor to the boundary of the table and click. An adjustment box will appear around the table, indicating that the whole table has been selected. Then, set the Border value in the property panel to an appropriate value. If it is 0, the border will be edited and displayed as a dotted line, so it will not be visible when browsing.

Make a page that meets the requirements with the help of the form.

Through the above operations, we have a preliminary understanding of the form. It should also be noted that when manipulating the whole table and a cell, the corresponding property panels are different.

Table color setting: after selecting the whole table, use the color selector of the property panel to set the background color. Cells can also be set separately. Click the mouse on the cell to be set, and other operations are the same as above.

Let's look at the differences between these property panels.

Table property panel, in order to appear this panel, you must first select the whole table, the method has been mentioned above. You can fill in the required parameters in many options. As shown in the figure below:

Dreamweaver web page making tutorial: table design

After selecting a cell, the property panel will change as follows. The selected row or column belongs to the selected cell. As shown in the figure below:

Dreamweaver web page making tutorial: table design

Several common methods of operating tables:

Merge: Merge the selected consecutive cells into one cell.

Segmentation: dividing a cell into several cells.

Horizontal alignment: There are three types: (left), (middle) and (right).

Vertical alignment: divided into (upper) (middle) (lower) (baseline alignment)

Tables can also add or delete rows or columns. Click the right mouse button in the cell. Select table options > from the right-click menu; & gt Select to insert rows or columns. The following dialog box will pop up.

Dreamweaver web page making tutorial: table design

Fill in data in the dialog box. The last thing to say is the selection method of various elements in the table:

Select a row and move the cursor to the left of the leftmost cell in the row. The cursor will change to an arrow. Click to select a row.

Select a column, move the cursor to the top cell of the column, the cursor will turn into an arrow, and then click to select a column.

Select the entire table and move the cursor to the top left corner or right border or bottom border line of the table. Click to select the entire table. A black box will appear around the selected table, indicating that the whole table has been selected. Please pay attention to the following signs:

Select a cell. You can select multiple cells at the same time. Select consecutive cells. The cursor first selects a cell, and then press shift to select the last cell. Select discontinuous cells. Hold down the Ctrl key and click the desired cell.

Let's stop here about the use of forms. Table is the basic technology of web page making, which can only be fully mastered through continuous practice.