With < Table> statement to achieve the fillet table can save the pain of making rounded pictures! _ Experience Exchange

with < Table> statement to achieve the fillet table can save the pain of making rounded pictures! _ Experience Exchange

Statement:

<div align=center> <table style= "table-layout:fixed" height=28 cellspacing=0 cellPadding=0 width= "100%" > & Lt tbody> <tr height=1> <td width=1></td><td width=1></td><td Width=1></TD > <td bgcolor= border color ></TD> <td width=1></td><td width=1></td><td width=1> </TD></TR> <tr height=1> <td></td><td bgcolor= border color colspan=2></td> <TD bgcolor= background color ></TD> <td bgcolor= border color colspan=2></td><td></td></tr> <TR height=1> <td></td><td bgcolor= Border color ></TD> <td bgcolor= background color colspan=3></td> &LT;TD bgcolor= Border color ></TD><TD></TD></TR> <TR> <td width=1 bgcolor= border color ></ td> <td bgcolor= background color colspan=5> <table style= "table-layout:fixed" height= "100%" cellSpacing=0 cellPadding=3 > <TBODY> <TR> <td align=center> The text, pictures, or forms you want to write </td> </TR></TBODY></TABLE> </TD> <td width=1 bgcolor= border color ></TD></TR> <tr height=1> <td></td><td bgcolor= Border color ></TD> <td bgcolor= background color colspan=3></td> &LT;TD bgcolor= Border color ></TD><TD></TD></TR> <tr height=1> <td></td><td bgcolor= border color colspan=2></td> <td bgcolor= background color ></TD> <td bgcolor= border color colspan=2></td> <TD></TD></TR> <tr height=1> <td colspan=3></td> <td bgcolor= border color ></td > &LT;TD colspan=3></td></tr> </TBODY></TABLE></DIV>

Although the code looks very long, in fact, the principle is very simple, yesterday I reduced the original code a bit, the nested table from four to two, should be better understood. It is important to point out that "cellpadding=3" is intentionally added to prevent the text in the table from being too close to the table border!

The main purpose of making this fillet table is two: one can be used as a log template with background color, instance reference tutorial (i), and second, you can make your own log title file or signature file, the use is very large. Using the <Table> statement to make rounded tables, compared to other common online methods, not only eliminates the hassle of making and using rounded corners, but this rounded table has "adaptive"-because the statement uses a relative width (width=100%), So this table will be self-adjusting as the width of the publishing log bar changes, which is more flexible than the rounded table that the general picture makes!

(i) Form of basic sentence format

<table>...</table>--form Instruction <tr>...</tr>--table row <td>...</td>--table bar <TBODY> </tbody>--Table body section <caption>...</caption>--table title <th>...</th>--table column title (bold)

The five basic statements are the skeleton of a table, where <Table>, <TR>, <TD> are the most important markers, and the three statements have been able to draw a complete table. Take a look at the simple example below.

Statement:

<table border><caption> revenue </CAPTION><TBODY><TR> Expenditure statement <TH> company </TH> <TH> Revenue </TH> <TH> expenses </TH> </TR><TR> <TD>A</TD> <TD>￥100000</TD> <TD>￥60000</TD> </TR></TBODY> </TABLE>

Effect:

Income Statement

(ii) Table-related properties

1. Common Properties of <TABLE> statements

Demo statement:

<table width= "50%" rules= "All" border= "1" cellspacing= "2" cellpadding= "2" align= "CENTER" valign= "TOP" background= " Background.gif "bgcolor=" #0000FF "bordercolor=" #FF00FF "hspace=" vspace= "ten" >

Specific Description:

Width= "50%", table width, accept absolute value (such as 300) and relative values (such as 80%). Rules= "All", table grid, optional value: all,none,cols,rows,groups. Border= "1", table border width, if this property is removed, a borderless table is generated. Cellspacing= "2", table inner line width, the larger the value, the thicker the grid. Cellpadding= "2", Text and grid spacing, the larger the value, the greater the spacing. align= "Center", the table placement (horizontal), the optional values are: Left, right, CENTER. Valign= "Top", the position (vertical) of the text in the table, the optional values are: Top, middle, bottom. Background= "Background.gif", the background pattern in the table, do not use with bgcolor. Bgcolor= "#0000FF", table background color, do not use with background. Bordercolor= "#FF00FF", table border color. Hspace= "10", the horizontal distance between the table border and the surrounding text, the larger the value, the greater the spacing. Vspace= "10", the vertical distance between the table border and the surrounding text, the larger the value, the greater the spacing. Other table properties, because some are not very common, or some are required for browser types, are not listed.

2. Common Properties of <TR> statements

Demo statement:

<tr align= "Right" valign= "middle" background= "Background.gif" bgcolor= "#0000FF" bordercolor= "#FF00FF" >

Specific Description:

Align= "Right", the position of the text in the table row (horizontal), the optional values are: Left, OK, center. Valign= "Middle", table row of the position of the text (vertical), the optional values are: Top, middle, bottom. Background= "Background.gif", in the table row background pattern, do not use with bgcolor. Bgcolor= "#0000FF", the background color in the table row, do not use with background. Bordercolor= "#FF00FF", the inner border color of the table row.

3. Common Properties of <TD> statements

Demo statement:

<TD width= "50%" height= "colspan=" 2 "rowspan=" 3 "align=" left "valign=" BOTTOM "background=" Background.gif " Bgcolor= "#FF00FF" bordercolor= "#808080" >

Specific Description:

Width= "50%", cell width, accepts absolute value (such as 300) and relative values (such as 50%). height= "300", cell height, accepts absolute value (such as 300) and relative values (such as 50%). Colspan= "2", the cell merges the number of columns to the right, just write in the merged starting cell. Rowspan= "3", the cell merges the number of columns down, just write in the merged starting cell. Align= "left", the position of the text in the cell (horizontal), the optional values are: left, right, center. Valign= "BOTTOM", the position of the text in the cell (vertical), the optional values are: Top, middle, BOTTOM. Background= "Background.gif", the background pattern in the cell, do not use with bgcolor. Bgcolor= "#0000FF", the background color in the cell, do not use with background. Bordercolor= "#FF00FF", the color of the inner border of the cell. Other cell properties, because some are not very common, or some are required for browser types, are not listed

(c) Simple examples of forms

1. Remove the Border parameter in <Table> to get the borderless table.

Statement:

<TABLE><CAPTION> Income Statement </CAPTION><TBODY><TR> <TH> company </TH> <TH> revenue </ th> <TH> expenses </TH> </TR><TR> <TD>A</TD> <TD>￥100000</TD> <TD> ￥60000</td> </TR></TBODY> </TABLE>

Effect:

Income Statement

2, through Border, bordercolor, change the table border size and color.

Statement:

<table border=9 bordercolor=green><tbody><tr> <TH> company </TH> <TH> revenue </TH> <TH> expenses </TH> </TR><TR> <TD>A</TD> <TD>￥100000</TD> <td>￥60000 </TD> </TR></TBODY> </TABLE>

Effect:

3, through the cellspacing can also adjust the distance between cells.

Statement:

<table border=9 cellspacing=6><tbody><tr> <TH> company </TH> <TH> revenue </TH> <th > Expenses </TH> </TR><TR> <TD>A</TD> <TD>￥100000</TD> <td>￥60000</ Td> </TR></TBODY> </TABLE>

Effect:

4, the use of ColSpan and RowSpan.

Statement:

<table border=2 bordercolor=black><tbody><tr> <TH> Co. </TH> <th colspan=2> revenue </ Th> <th rowspan=2> profit!</th> </TH><TR> <TD>A</TD> <TD>￥100000</TD> <TD>￥60000</TD> </TR></TBODY> </TABLE>

Effect:

Here the basic introduction to the table, mainly for the next tutorial to make a cushion. In the next tutorial, we will give some examples of the specific application of the table in MSN Space, such as: text around the structure, multi-column text, to add text background, and so on.

The above is used &lt; Table&gt; statement to achieve the fillet table can save the pain of making rounded pictures! _ Experience Exchange content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

