HTML table use from getting started to proficient

If you are a web designer, if you do not have a table on the page, it can be said to be not a page (except for all flash works), the importance of the table is conceivable. Help us to control the layout of the page, control the display of content and so on. There are a lot of skills in using a form, do you know?

　　 Use Table layout page

Use table layout pages to make your pages more beautiful, more organized, and easier to maintain and update. (Set the width of the table to 100%, you can make the page more compatible)

　　 to refine the table as much as possible

Do not put the entire page in a large table, because the contents of a large table to be loaded before it will be displayed, if the entire page is placed in a table, then your page will only be two cases:

1, all do not show

2, show it All

Therefore, we recommend that the entire page be divided into several pieces, such as the General on (place logo, Banner, menu, etc.), in (Place page content), under (place copyright information, etc.), each part by a separate form to achieve, this will be better.

　　 table Design Examples

Create a table with a border size of 0 (border=0), with a spacing of 1 (cellspacing= "1"), a darker background color (bgcolor= "#000000"), all single cells selected, and a single, borderless background color (such as: bgcolor= "# FFFFFF ") so that you can get a table with a thin line border, see the following example:

〈table width= "50%" border= "0" cellspacing= "1" bgcolor= "#000000"

<TR bgcolor= "#FFFFFF" >

<td> </td>

<td> </td>

</tr>

<TR bgcolor= "#FFFFFF" >

<td> </td>

<td> </td>

</tr>

</table〉

　　 change the color of table cells dynamically

Adding the following code to the cell <td> tag dynamically changes the color setting of the cell:

Onmouseout= "this. Bgcolor= ' "onmouseover=" this.bgcolor= ""

Adding the above code in the row label <tr> tag dynamically changes the color settings for one row.

〈table width= "50%" border= "0" cellspacing= "1" bgcolor= "#000000"

<TR bgcolor= "#FFFFFF" >

<td> </td>

<td> </td>

</tr>

<TR bgcolor= "#FFFFFF" >

<TD > </td>

<TD > </td>

</tr>

</table〉

　　 Replace horizontal lines and vertical lines with tables

Use a table instead of a horizontal line, insert a table, set the height to 1 (as needed), and, of course, set the width to 1 to make the vertical.

〈table width= "border=" 0 "align=" center "cellpadding=" 0 "cellspacing=" 0 "

<tr>

<TD height= "1" bgcolor= "#000000" > </td>

</tr>

</table>

<br>

<table height= "border=" 0 "align=" center "cellpadding=" 0 "cellspacing=" 0 "

<tr>

<TD width= "1" bgcolor= "#000000" > </td>

</tr>

</table〉
　　

Note: Dreamweaver in the production, the first high set to 1, switch to the Code window, the form of the spaces removed (), if you do not remove the space, you will not see the desired effect.

　　 make a table with three-dimensional sense

The appropriate add to the page with a three-dimensional table elements, will give you the page to add light and color.

〈table width= "30%" border= "1" align= "center" cellpadding= "0" cellspacing= "0" bordercolor= "#FFFFFF" bordercolorlight= " #000000 "bgcolor=" #9999CC "

<tr>

<td> A </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

</table>

<br>

<table width= "30%" border= "1" align= "center" cellpadding= "1" cellspacing= "2" bgcolor= "#9999CC"

<tr>

<td> B </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

</table>

<br>

<table width= "30%" border= "1" align= "center" cellpadding= "1" cellspacing= "2" bordercolor= "#FFFFFF" bordercolorlight= " #000000 "bgcolor=" #9999CC "

<tr>

<td> C </td>

<td> </td>

</tr>

<tr>

<td> </td>

<td> </td>

</tr>

</table〉

Tips: The effect of the concave-convex effect, is completely controlled by the color of the bordercoloer, it's lighter color, there will be a protruding effect, its color deep, there will be sunken effect.

　　hide a table separator line

There are times when you are working with tables where the content of a few columns or rows belongs to the same topic, and in order to arrange them on a different line, but do not want to let the divider line of the table appear, what is the way, in fact, very simple.

　　Hide Horizontal Separator line

〈table Border Rules=cols cellspacing=0 align=left>

　　Hide Vertical Separator line

〈table Border Rules=rows cellspacing=0 align=left>

　　Hide all separator lines

〈table Border Rules=none cellspacing=0 align=left>

　　form Content Branch Download

There are some slow elements in the table (such as counters, large pictures, and so on) that tend to delay the display of the entire table. This is determined by the display characteristics of IE, the entire table is displayed only when all the elements in the table are loaded. "There are policies, there are countermeasures," we can use the tag to open the table content, put in several vertical linked large table, the key content in the table above, let them first display, so that users will not lose patience and closed the window.

　　Webmaster Note: When using the above code to learn to pay attention to ">" and "" to ">" and "<".