HTML page table deep use tips

Skills | The table in Web page making plays a very important role. With JavaScript, CSS, and so on, the table has a lot of clever use.

　　1, use the form to do the flow dividing line

We know that in a Web page you can use the

<script>
L=array (6,7,8,9, ' A ', ' B ', ' B ', ' C ', ' d ', ' e ', ' f ')
t= "<table height=2 width=60% cellspacing=0 cellpadding=0><tr>"
for (x=0;x<40;x++) {t+= "<td id=a_mo" +x+ "></td>"}
document.write (t+ "</tr></table>")
function F1 (y) {for (i=0;i<40;i++) {c= (i+y)%20;if (c>10) c=20-c
document.all["A_mo" + (i)].bgcolor= "' #00" +l[c]+l[c]+ ""}y++
SetTimeout (' F1 (' +y+ ') ', 1)}f1 (1)
</script>

In the above code, we can set the height and length of the split line by modifying height and width in the <table> logo. Source code as shown in figure I:
Figure I
The effect appears as shown in Figure II:
Figure II

　　2, with the scroll bar table

Look at the effect of the picture, but do not think it is an IFRAME, this is the form! In fact, this is the combination of table and CSS effect. This comes in handy when there is a large section of text on the page to show and there is not enough space. Although a text box can achieve similar effects, it is far from being flexible with tables. The code is simple, just add the following code to the cell <td> logo:

<div style= "overflow:auto;height:200;" >

Of course, the corresponding </div> is added before the end of the cell </td> logo. We can change the height value to modify the elevation of the display segment area. As shown in the following example, the effect of the diagram is achieved.

<table width= "border=" "0" >
<TR><TD bgcolor= "#999999" ><font color= "#FFFFFF" ><b> title </b></font></td> </tr>
<TR><TD bgcolor= "#CCCCCC" >
<div style= "overflow:auto;height:160;" >
Enter the contents of the text section here.
</div>
</td></tr>
</table>

　　3, with the title of the table

Figure Three

Look at the effect of figure three above. Usually, we want to add a title to the table, not using the cell method is to use the picture, very troublesome. In fact, we can use only a few very simple HTML tags, you can easily implement the title to the table. This logo seems to have been forgotten, rarely seen using, but it achieved a good result. Let's look at how to achieve this:

<fieldset style= "width:220" align= "Center" >
<legend> here is the title of the table </legend>
Add the contents of the table here
</fieldset>

A few lines of code can be fixed! You can set the width of the table by modifying the width value. Between <legend> and </legend> is the title of the table, you can set the table title color, size, etc., or even add a link. </legend> logo, you can add any content in the table, you can also add arbitrary content, such as text, tables, pictures and so on.