Thinking of Web Design-application of forms in Web pages

Design | Page table (table) is an important element of the page, is the main means of page layout. Although the layers in DHTML (layer) can also be used to freely position web elements, tables are clearly easier to edit and modify. The ability to master and apply the various attributes of a table can make your page look pleasing to the eye.

This article will be divided into two parts in detail the application of the table in Web design. Including the basic usage of the table and the attention point of the table application.

I. Basic use of the table.

The basic usage of the table is sure you are familiar with it. But in order to ensure the integrity of the article, Atzie here or a list again.

HTML basic syntax for tables

<table>...</table>-Define Table
<tr>-Define Table rows
<th>-Defining headers
<td>-Define the table elements (specific data for a table)

For example:

<table border>
<tr><th>1</th>
<th>2</th>
<th>3</th>
<tr><td>A</td>
<td>B</td>
<td>C</td>
</table>

1	2	3
A	B	C

The parameter of the table label. The table label can contain the following parameters.

Border table border
CellSpacing the blank distance between the table elements
cellpadding space within a TABLE element
Width table widths (can be expressed in% or specific data)
Height Table Heights

For example:

<table border=5 cellpadding=10>
<tr><th>1</th><th>2</th><th>3</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

1	2	3
A	B	C

How the table is aligned

1. Text alignment in the form.

Syntax: <TD align=#> where # can be set parameters are:

Left lateral Living
Center Horizontal Center
Right horizontally
Top Vertical Tops
Middle Vertical Center
Bottom longitudinal bottom

For example:
<table Border height=100>
<TD valign=top>a</td>
<TD valign=middle>b</td>
<TD valign=bottom>c</td>
</table>

A

B

C

2. The table is aligned within the page.

If you need to work with a form and emit a text, you need to use another parameter to the table label:

<table align=#> where the # can be set to left (live on the right)

For example:

<table align= "left" border >
<tr><th>1</th><th>2</th><th>3</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
Here's the text <br>
Is the same as the table side.

1	2	3
A	B	C

The text here is the same as the table side

Nesting of tables

Table nesting is to insert a table in a table, nested layout method is the table will be inserted as text to handle the same use of <TD align=#> statements.

For example:

<table Border width=200 height=100>
<tr> <td valign= "Top" >
<table border><tr><td></td></tr></table>
</TD><TD valign= "Bottom" >
<table border><tr><td></td></tr></table>
</td></tr>
</table>

Color of the table

The color of the form is also set in the <table> tab, with the following parameters:

bgcolor background color
bordercolor Border Color
Bordercolorlight stereo Border Bright colors
Bordercolordark Solid Border Dark color

The syntax is: <table bgcolor= "#RRGGBB" > in which rrggbb are RGB three-color 16 binary values

For example:
<table width=100 Border bgcolor= #a9d7fb
bordercolordark= #ffffff bordercolorlight= #000000 cellpadding=5
Cellspacing=0 bordercolorlight= "#000000" >
<TR><TD bgcolor= #FFE084 ></td>
</tr><tr><td></td></tr></table>

The above is the basic usage of the table. Now frngtpage,dreamweaver, such as the results of the web editing software can not write code, it is easy to implement the table layout and nesting, but master some basic grammar, the key moment is very useful.

two . note points for use in forms

The nesting of tables is not the hardest part of table processing, no matter how complicated the layout, it is always possible to find a solution. What we need to consider is:

0 How to use the nested layout to make the download speed of the Web page to achieve the fastest.

We know: When the browser reads the HTML original code, it reads the full table and displays it. That is to say, from the <table> tab, the contents of the table are displayed on the screen when you want to read the </table> tag. And the display has priority, first read the first display. In this case, if a large table contains more than one subform, you must wait for the large table to be read before you can display the child tables together.

We visit some sites, waiting for a long time without results, press the "Stop" button and then show the page is the reason.

Therefore, when designing a page form, we should do this:

1. The entire page should not be set in a table, as far as possible to split into multiple tables;

2. The structure of a single table is as neat as possible;

3. Table nesting level as little as possible.

Experiments show that the more complex the nesting level, the more slowly the table download speed.

The form design about the webpage is written here today. Atzie not a lot of skills to provide, the key lies in your own practice and application, or the old saying: "Make perfect."