Section 14th setting

A table is a common page element. Do Web pages often need to use tables for typesetting, using a good table is the key to page design. With the help of a table, you can achieve any typesetting effect you envision. In addition, the table can also be flexible use of the background, the box line, etc. to make a more beautiful effect.

Insert Table
We're going to create a new form. Click on the Objects surface version, or click Insert/table, or use the shortcut key Ctr+alt+t, will play the dialog box.

(Table Definition dialog box)

The following explains:
Rows: The number of lines in the table.
Columns: The number of columns in the table.
Cell Padding: Table element Gap settings.
Cell Spacing: Blank inside the table element.
Width: The widths of the tables. The Drop-down menu in the back has two items, which are the width units. Percent is a percentage unit, for example, when the width value is 75, the table width represents 75% of the browser window. Pixels is a pixel unit in which the width value of 75 indicates that the table is 75 pixels wide (the most common computer screen resolution is set to 800*600, that is, 800 pixels in width and 600 pixels high). Recommended units generally choose pixels, if selected as percent, when the browser window size adjustment, the table will also adjust, sometimes affect the overall layout. Border: The width of the table border. Because tables are used for page layout, the border width is often taken 0.
Click the OK button to insert the form.

The Properties panel of the table
Select the table to display the properties version of the table.

　

(Properties version of the table)

Detailed explanations are given below:
Table name: Form names, which are generally not filled in.
Rows: The number of lines in the table. Previously defined, can now be changed.
Cols: The number of columns in the table. Previously defined, can now be changed.
W: The width of the table. Previously defined, can now be changed. Note that percent is replaced by% in the dropdown menu, but the meaning is the same.
H: The height of the table. Generally can not fill, let it with the content of the increase and automatic adjustment. Its back dropdown menu with W.
Cellpad: The table element Gap. Previously defined, can now be changed.
Cell Spacing: Blank inside the table element. Previously defined, can now be changed.
Align: The horizontal alignment of the table on the page. The following Drop-down menu has four options: default means to use browser defaults (this default is typically left-aligned), left is aligned, center is centered, and right represents right-aligned.
Border: The border width of the table. Previously defined, can be changed at this time.
: Click to clear off the height of each row.
: Click to clear out the width of each column.
V space: The spacing between the top border of the table and other page elements on the top, the bottom border, and other page elements on the bottom.
H space: The spacing between the left border of the table and the other page elements on the left, the right border and the other page elements on the right.
Light brdr: The color of the border-Ming section. Can fill in the specific color of the English word or the beginning of the # 16 color code, you can also click on the back of the use of color version.
Dark brdr: The color of the border's dark part. Set method with light Brdr.
Bg: The background pattern of the table.
Bg (bottom): The background color of the table.
BRDR: The border color of the table.

Actions of the TABLE element

Using the mouse to click on the inside of any of the table elements, the properties surface version will be shown below.

　

(table element's properties version)

The top half of the properties is actually the properties version of the text. We can, of course, add text to the form, and we can add images and even tables. You can also add hyperlinks to text or images. The method is exactly the same as the general operation, except that it is confined to a particular form.
First, drag the mouse, select a few of the table elements, click on the Properties page, the selected table elements are merged together.
With the mouse to select a TABLE element, click on the Properties page, a dialog box appears.

　

(a dialog box that splits the table elements)

Select Rows to split by row, and select columns to divide by column.
Number of rows has the value of the new Table element that is split.
Also, on the properties surface, H can set the height of the table element. The above BG can set the background pattern of the table element, Brdr can set the border color of each individual table element. The setting method is the same as setting the table as a whole.
When you add text, you can select No wrap and header on the properties surface. When the length of the text exceeds the length of the element, select No Wrap, the text will move forward, the Table element width will adjust, and no Wrap will be automatically wrapped.
Select the text, and the text will become thicker if you select the header.
When the width or height of the added image exceeds the width and height of the element, the table elements are automatically adjusted to fit the added image.

After setting, you can also use the mouse to drag the table's borders to adjust the table or the width of each row and column.

Use table layout

After the first few sections of the study, you can try to write some simple Web pages. But soon everyone will find some questions: Why is it difficult for my text and images to be placed in the position I imagined? Why can't my two tables be lined up? Why......
This requires the use of tables for page layout.
We can make a table first and design the distribution of rows and columns in advance. Then the image, text, etc. are added to the appropriate TABLE element. Because the width and height of each element can be set and adjusted, the text and image can be placed in a suitable position through prior anticipation and afterwards adjustment.
Note that at this time we used to typesetting the table, the border should generally be set to 0, so that the browser can not see the table, so as not to affect the beauty.