9. Table operations on the webpage

Insert a table into a webpage so that the content on the webpage is arranged neatly, so that the viewer can clearly view the data expressed in the table and its meaning, making it easier to find materials of interest. In addition, tables are an important tool for designing web pages. It is very important to use tables skillfully and reasonably for creating web pages.
In the web page, there are two main functions of tables: one is to store data and display information, which is a common and basic application and is always used in word; second, organize the content of the webpage to make the webpage more clean and beautiful. For text-and-text Hybrid Web pages, using tables can greatly improve the efficiency of creating web pages. After hiding the table box, the viewer can hardly feel the existence of the table. In fact, the webpage templates provided by Frontpage are organized using tables.
This document describes how to insert a table to a page and edit the table.
1. Insert and modify a table
Multiple FrontPage methods are used to create tables of various styles. These methods are similar to word. Next let's take a closer look.
1. Use the "Insert table" button on the commonly used toolbar.
You can use this tool to quickly create a simple table:
Move the cursor to the place where you want to insert the table. Click the left mouse button at "Insert table" on the toolbar to create a table model. Hold down the left button and drag it down to the right. Drag the mouse to the right to add columns to the table, and drag down to Add rows to the table until the number of rows and columns you want (such as 10 rows × 4 columns) display (for example ). Release the mouse to generate a table in the default format.

When dragging the mouse, you can drag it back if it is too long.
2. Use the "Insert table" command in the "table" menu
The method described above is simple and quick, but the created table is in the default format. You must modify the table attributes as needed.
The "Insert table" command in the "table" menu allows you to set the table more accurately, such as setting the "alignment" and "Border width" of the table.
Click the "table" menu and click "table" in the "insert" submenu. The "Insert table" dialog box appears. In the "Insert table" dialog box, set the rows and columns of the table, click OK to create the table.
[Example] Create a table with a width of 80% and Center for the "common website" webpage
1) Open the "Web exercise" website in the FrontPage window and create a new blank web page.
2) enter the title "frequently used websites" for the newly created blank web page, and set the font and paragraph format.
3) after starting another line, click the "table" menu, select the "insert" option in the "table" menu, and then click "table" in the "insert" submenu ";

4) In the displayed "Insert table" dialog box, enter 5 in the column after "number of rows" and 4 in the column after "Number of columns, the alignment mode is changed to "horizontal center", and the width is 80%. The Border width, cell margin, and spacing are respectively 1, 1, and 0:

5. the table format displayed on the webpage is saved as cywz.htm at the bottom of the page:

[Note] After the parameters in the "Insert table" dialog box are changed, they will be saved to change the default format to the style set this time, this includes the tables created with the insert table button.
3. Create a table manually
In addition to the above two ways to create a table, you can also use the "paint brush" ("hand-drawn table") on the table toolbar to draw the table you need.

Click "pencil" ("hand-drawn table" button) on the "table" toolbar. At this time, the mouse pointer becomes a pencil and the pen-shaped mouse is moved to an angle endpoint of the table, press and hold the left button, and drag it to the diagonal end of the table in an oblique direction. Release the left button. The outer line of the table is drawn, and then draw lines and columns. You can create a complex table with different cell sizes and different row and column numbers.
After creating a table, click the "hand-drawn table" button on the "table" toolbar so that the button is no longer selected.
To delete any line you do not want, click the "rubber" button on the "table" toolbar ("clear" button), hold down the mouse, and drag a line segment that you do not want, when the line segment turns red, open the mouse button. If you want to split the table, drag the paint brush to the other end and connect it to the other end.
Therefore, the two buttons on the "table" toolbar can also modify the created table.
[Example] demonstrates the process of using a pencil to draw an irregular table:
1) Click the hand-drawn table button on the "table" toolbar to move the pen-shaped mouse to a corner of the table, and press and hold the left button, diagonal drag to its diagonal end (1 );
2) release the left button and draw the outer line of the table. Move the pen mouse to the top of the left line of the table, hold down the left button, and drag the line horizontally to the right of the table (2). Release the left button and draw the line.
3) Draw a column line (3) and a column line (4) in sequence ). Release the left button and draw the entire table as (5 ).

If the table toolbar is not displayed in the FrontPage window, right-click the toolbar or any menu bar and select "table" in the shortcut menu to display the table toolbar. In addition, click "table" and select "hand-drawn table". The "Table toolbar" is displayed in the window, and the "hand-drawn table" option is automatically selected.
4. Text Conversion
This function is usually used to add a word table to a webpage, which can reduce the space occupied by the webpage. We will introduce it again in "optimization webpage" in lecture 16th.
After the table is created, you can enter text in the table. The input method is the same as that in word. Of course, you can also insert images in the table.
Ii. Table modification and adjustment
After a table is created, tables with uniform distribution rules by default may not meet our requirements. You often need to modify and adjust the table. The following describes how to add a new row and column by adding a new row under the row of the image in the preceding table. In addition, the column width is evenly distributed,
1. Change the column width and the entire table width.
Move the mouse pointer over the frame. When the mouse pointer turns into a bidirectional arrow, press the left button and drag to change the column width. If you move the cursor to the right of the table, the width of the entire table can be changed. The second figure below shows how to change the table in the "frequently-used Website" webpage to the left-narrow and right-wide:

The mouse pointer turns into a bidirectional arrow

Change column width

You can use the same method to change the Row Height of a table. However, because the row height increases automatically as the content in the cell increases, you do not need to change the Row Height.
2. Insert rows and columns
The simplest way to insert rows and columns is to use the insert row or insert column button on the "table" toolbar:
First move the cursor to the cell below (or right) the row (or column) to be inserted, and then click "insert row" (or "insert column") on the "table" toolbar ") you can insert a row (or column) above the cell (or to the right ).
We often need to add several rows at the end of the table. We need to use the "insert row or column" command in the "table" menu, and then set it in the "insert row or column" dialog box.
[Example] add five rows at the end of the table on the "frequently-used Website" webpage:
1) Click the row where the image is located to display the cursor in this row. Click the Table menu, and then click the row or column in the insert submenu (bottom left ). The insert row or column dialog box is displayed, as shown in the right figure below.

2) Select "row" (default) in the "insert row or column" dialog box, and then select "below the selected area" (default ), enter 5 in the right column of "number of rows.
3) Click "OK" and insert a row under the row where the image is located, as shown in the result.

Insert a new column is basically the same as Insert a new row, but inserting a new column does not increase the table width. You can try it.
3. Delete rows and columns
To delete rows or columns, you must first select the rows or columns (not consecutive) to be deleted. The simplest way to select rows and columns is:
Move the cursor to the leftmost end of the row to be selected. When the mouse turns to a black arrow to the right, click (for example) to select a row. move the cursor to the top of the column to be selected, when the mouse turns to a dark down arrow, click. You can choose to set a column. When a dark arrow appears, drag the left button up or down (or left or right) to select multiple consecutive rows (or columns ). After selecting a row (column), press Ctrl and then click another row (column) to select non-consecutive rows (or columns ).

Select rows (or columns) click the cut button on the frequently used toolbar or the delete cell button on the table toolbar to delete the selected rows (or columns ). However, the "delete" key on the keyboard can only delete table content, but cannot delete rows or columns.
4. evenly distribute columns or rows
After moving the column (ROW) lines, the column (ROW) distribution in the table is uneven. To restore the uniform distribution. Or, except for one column (ROW), other columns (rows) are evenly distributed. You can click the average distribution Row Height or average distribution column width button on the table toolbar after selecting the columns or rows that require average column width or Row Height, to achieve the goal.
5. Merge Cells
Like word, we can split and merge cells in a table. Through these operations, a rule table is converted into an irregular table.
Only adjacent cells in the same row (column) can be merged. To merge, select the adjacent cells to be merged. The "merge cells" button in the "table" toolbar turns into a solid line. Click it, you can combine the selected cells into a large cell.
After the cells are merged, all the text and images in the original cells will be moved into the new cells.
[Example] to create a table as follows, follow these steps:

1) use the "Insert table" button on the "table" toolbar to pull a 5 × 5 Table and drag it online on the right side to make the table width conform to the requirements:

2) drag the cursor over the first column on the left to make the width of the first column conform to the requirements:

3) drag the second to fifth columns with the mouse (selected) and click the "average Row Height" button on the "table" toolbar to make the four columns the same width:

4) drag the first row to the Black (selected), and click the "merge cells" button on the "table" toolbar to make the first row a large cell:

5) drag all the four cells under the first column (as shown in) and click the "merge cells" button on the "table" toolbar, convert the four cells into a large cell to complete the modification of the entire table.

6. Split Cells
You can split a cell into multiple cells. The splitting procedure is as follows:
1) Place the cursor to the cell to be split, and click the split cell button in the "table" toolbar.
2) In the "split cells" dialog box shown in the right figure, select "split as row" or "split as column ", enter the number in the "number of rows" or "Number of columns" box, and click OK.
After a cell is split, the text and images are concentrated in the first cell, and other cells are blank.
3. Table modification and settings
In addition to the modification to the table described above, we can also modify the table by setting table attributes and cell attributes, including alignment, Border width, border line color, and background color.
1. Table attributes
Right-click the table and select "Table properties" from the shortcut menu to open the "Table properties" setting window:

We can see that there are three items in table attribute settings: layout, border, and background:
1)Table Layout
In the layout, alignment controls the placement of tables on the page. You can choose right-aligned, left-aligned, horizontally centered, and aligned at both ends. The default value is left alignment, but it depends on the table size. This parameter is not set when the table width is 100%.
"Floating" refers to the way the text is surrounded by a certain table, just like a Text wrap image.
You can set the width and height of a table by specifying the width and height. If you do not specify the height value, the table will be adjusted based on the object in the table.
The table size is measured in percentages and pixels. In general, we select percentage as the unit of table size because it can be adjusted based on the visitor's display size and browser window size, which is more flexible.
The "cell lattice margin" indicates the distance between the table margin and the body of the cell. The default value is "1". You can set the value as needed.
"Cell grid spacing" refers to the distance between cells. The default value is "2". This value can affect the line format of the table, when it is set to "0", the line of the table can be changed from the double line in the lower left to the single line in the lower right (the border color is black ).

2)Border of the table
The default value of the table border is "1 ". Sometimes for the purpose of page layout, we will close the border of the table, that is, set the border value to "0 ". When you edit a webpage on the FrontPage, the closed border is displayed as a dotted line, while the border is invisible during browsing.
When the border value is greater than "1", the lines inside the table remain unchanged, but the surrounding lines become coarse, as shown in:

We can also set the border color, the highlighted border and the dark border color (that is, the color of the glossy and backlight) to enhance the three-dimensional effect of the table. When the border color, bright border, and dark border color adopt the default format ("automatic"), the box line of the table is shown in the relief effect shown in the left figure; if the color of the highlighted border and the dark border are still in the default format, but the border color is set to black, the box line of the table is changed to the double line in the lower graph. If the highlighted border is set to yellow, the dark border is set to red, and the box line of the table is displayed in the three-dimensional effect shown in the lower right figure. In the three examples, "Border width" is "1" and "cell spacing" is "2 ".

The color of all borders is "automatic"	Black border color	The highlighted border is yellow, and the dark border is red.

If you set the border color to the same as the webpage background color, you can also remove the table border. However, this will make it difficult to adjust the table because no borders are visible in the frontpage.
3)Table background settings
By default, the background of the table is the same as that of the webpage. You can set a background in a table to separate the background of the table from the webpage to make the table content more prominent.
You can set the background color of the entire table. You can also set a background image. First, click the check box before "use background image", and then click "Browse" to find the appropriate background image, you can also enter the path and file name (URL) of the background image in the column to set the background of the table. Note: When the image size is greater than the table size, the excess part of the image will be truncated. When the image size is smaller than the table size, the image will be refilled in the table.
2. Cell attributes
In addition to setting attributes of the entire table, you can also set attributes of one or more adjacent cells.
Place the cursor in the cell or select several cells, and click "cell" in "attribute" in the "table" menu to open the "cell attribute" dialog box.

The dialog box shows that many of the items are the same as those in the "Table properties" dialog box, such as the border and background. HoweverNote:Yes,If you set an attribute for a cell, the table attribute is invalid in the cell.For example, if you set the background color of a table, but you set the background color of a cell, the background color of the cell overwrites the background color of the table.
[Example] an image is used as the background of a table, but the background of the first row is set to yellow.

1) use the "Insert table" button on the commonly used toolbar to pull out a suitable table on the webpage;
2) Right-click the table and select "Table properties" from the shortcut menu to open the "Table properties" Setting dialog box;
3) Click the check box before "use background image", and then click "Browse" to find the appropriate background image in the "select file" dialog box that appears with "select background image:

4) Click "OK" and return to the "Table properties" Setting dialog box. The path File Name of the image file is displayed in the blank box under "use background image:

5) select all cells in the first row, right-click them, and select "cell attributes" in the pop-up shortcut menu ". In the cell Properties dialog box, click the drop-down button on the right of the background color box to set the background color to yellow.

Although cell attribute settings are roughly the same as table attribute settings, they are different in some places:
1. Horizontal Alignment
It determines the horizontal alignment of text or images in cells. You can select right alignment, left alignment, horizontal center, and two alignment. The default value is left alignment.
2. Vertical Alignment
Determines the vertical alignment of text or images in cells. By default, the center alignment is used. When using tables to design webpages, you can set it to "Top-side alignment ".
3. "row (column) distance"
It is used to set different cell sizes. Generally, the cells in our table are the same size. If you want to get different cell sizes, You need to specify them here, but it is easy to cause table confusion.
The following describes the cell size problem:
Select the "specify width" check box to specify the cell width. You can specify the absolute value (select "pixel" single pixel) or the percentage of the width of the entire table (select "percentage" single pixel ). Because the consistency of the entire table is not easily controlled by the specified absolute value, percentages are generally used. For example, if "percentage" is selected, type 50% ("%" can be omitted) in the text box on the left.Cell ColumnIs set to half the width of the entire table.
"Specify height": select this check box to set the height of the entire table.

[Practice]
Create a new webpage for "moderator Archive", insert a table, and enter the name, gender, age, and other relevant content in the table based on your actual situation. Modify webpages and tables according to your preferences, save them to your local site, and link them to the home page.