Using the <TABLE> statement to implement a rounded table can save you the trouble of making rounded pictures! _Experience exchange

using the

statement to implement a rounded table can save you the trouble of making rounded images! _experience exchange

statement:

<div align=center> 
<table style="table-layout: fixed" height=28 cellspacing=0 cellpadding=0 width="100%"> 
<tbody> 
<tr height=1> 
<td width=1></td><td width=1></td><td width=1></td> 
<td bgcolor=边框颜色></td> 
<td width=1></td><td width=1></td><td width=1></td></tr> 
<tr height=1> 
<td></td><td bgcolor=边框颜色 colspan=2></td> 
<td bgcolor=背景色></td> 
<td bgcolor=边框颜色 colspan=2></td><td></td></tr> 
<tr height=1> 
<td></td><td bgcolor=边框颜色></td> 
<td bgcolor=背景色 colspan=3></td> 
<td bgcolor=边框颜色></td><td></td></tr> 
<tr> 
<td width=1 bgcolor=边框颜色></td> 
<td bgcolor=背景色 colspan=5> 
<table style="table-layout: fixed" height="100%" cellspacing=0 cellpadding=3> 
<tbody> 
<tr> 
<td align=center>你要写的文字、图片、或表格</td> 
</tr></tbody></table> 
</td> 
<td width=1 bgcolor=边框颜色></td></tr> 
<tr height=1> 
<td></td><td bgcolor=边框颜色></td> 
<td bgcolor=背景色 colspan=3></td> 
<td bgcolor=边框颜色></td><td></td></tr> 
<tr height=1> 
<td></td><td bgcolor=边框颜色 colspan=2></td> 
<td bgcolor=背景色></td> 
<td bgcolor=边框颜色 colspan=2></td><td></td></tr> 
<tr height=1> 
<td colspan=3></td> 
<td bgcolor=边框颜色></td> 
<td colspan=3></td></tr> 
</tbody></table></div>

although the code looks very long, the principle is actually very simple. yesterday i streamlined the original code now, reduce the nested tables from four to two, it should be easier to understand. it should be pointed out that "cellpadding=3" is specially added to prevent the text in the table from being too close to the table border!

there are two main purposes for making this rounded corner table: first, it can be used as a log template with a background color, for an example, refer to tutorial (1); second, it can be used to create your own log title file or signature it's still very useful. use the

statement to create a rounded table. compared with other common methods on the internet, it not only saves the trouble of making and using rounded images, but also the rounded table is "adaptive" - ​​because the relative width is used in the statement. (width=100%), so this table will adjust itself as the width of the publishing log column changes, which is more flexible than the rounded corners table made from ordinary pictures!

(1) basic table statement format

<table>...</table> —— 表格指令 
<tr>...</tr> —— 表格行 
<td>...</td> —— 表格栏 
<tbody>...</tbody> —— 表格主体部分 
<caption>...</caption> —— 表格标题 
<th>...</th> —— 表格栏标题（粗体字）

these five basic table statements form the skeleton of a table, among which

, ,

are the most important marks. once you learn these three sentences, you can already draw a complete table. take a look at this simple example below.

statement:

<table border>
<caption>收支表</caption>
<tbody>
<tr> <th>公司</th> <th>收入</th> <th>支出</th> </tr>
<tr> <td>a</td> <td>￥100000</td> <td>￥60000</td> </tr>
</tbody> </table>

effect:

income and expenditure statement

p>

(2) table related attributes

1. commonly used attributes of

statement

demonstration statement:

<table width="50%" rules="all" border="1" cellspacing="2" cellpadding="2" align="center" valign="top" 
background="background.gif" bgcolor="#0000ff" bordercolor="#ff00ff" hspace="10" vspace="10">

specific instructions:

width="50%"，表格宽度，接受绝对值（如 300）及相对值（如 80%）。 
rules="all"，表格内网格，可选值为： all，none，cols，rows，groups。 
border="1"，表格边框宽度，如果去掉这个属性，就生成无边框表格。 
cellspacing="2"，表格内格线宽度，数值越大，格线越粗。 
cellpadding="2"，文字与格线间距，数值越大，间距越大。 
align="center"，表格的摆放位置（水平），可选值为： left, right, center。 
valign="top"，表格内图文的摆放位置（垂直），可选值为： top, middle, bottom。 
background="background.gif"，表格内背景图案，不要与 bgcolor 同用。 
bgcolor="#0000ff"，表格背景色，不要与 background 同用。 
bordercolor="#ff00ff"，表格边框颜色。 
hspace="10"，表格边框与环绕文字间水平距离，数值越大，间距越大。 
vspace="10"，表格边框与环绕文字间垂直距离，数值越大，间距越大。 
其他表格属性，因为有些不是很常用，或者有些对浏览器类型有要求，并未列出。

2. commonly used attributes of

statement

demonstration statement:

<tr align="right" valign="middle" background="background.gif" bgcolor="#0000ff" bordercolor="#ff00ff">

detailed description:

align="right"，表格行内文字的摆放位置（水平），可选值为： left, right, center。 
valign="middle"，表格行内图文的摆放位置（垂直），可选值为： top, middle, bottom。 
background="background.gif"，表格行内背景图案，不要与 bgcolor 同用。 
bgcolor="#0000ff"，表格行内背景色，不要与 background 同用。 
bordercolor="#ff00ff"，表格行内边框颜色。

3. commonly used attributes of

statement p>

demonstration statement:

<td width="50%" height="300" colspan="2" rowspan="3" align="left" 
valign="bottom" background="background.gif" bgcolor="#ff00ff" bordercolor="#808080">

specific instructions:

width="50%"，单元格宽度，接受绝对值（如 300）及相对值（如 50%）。 
height="300"，单元格高度，接受绝对值（如 300）及相对值（如 50%）。 
colspan="2"，单元格向右合并栏数，只需写在合并起始单元格中。 
rowspan="3"，单元格向下合并栏数，只需写在合并起始单元格中。 
align="left"，单元格内文字的摆放位置（水平），可选值为： left, right, center。 
valign="bottom"，单元格内图文的摆放位置（垂直），可选值为： top, middle, bottom。 
background="background.gif"，单元格内背景图案，不要与 bgcolor 同用。 
bgcolor="#0000ff"，单元格内背景色，不要与 background 同用。 
bordercolor="#ff00ff"，单元格内边框颜色。 
其他单元格属性，因为有些不是很常用，或者有些对浏览器类型有要求，并未列出

(3) simple example of table

1. remove

the border parameter can get a borderless table.

statement:

<table>
<caption>收支表</caption>
<tbody>
<tr> <th>公司</th> <th>收入</th> <th>支出</th> </tr>
<tr> <td>a</td> <td>￥100000</td> <td>￥60000</td> </tr>
</tbody> </table>

effect:

income and expenditure statement

p>

2. change the size and color of the table border through border and bordercolor.

statement:

<table border=9 bordercolor=green>
<tbody>
<tr> <th>公司</th> <th>收入</th> <th>支出</th> </tr>
<tr> <td>a</td> <td>￥100000</td> <td>￥60000</td> </tr>
</tbody> </table>

effect:

3. cellspacing can also be used to adjust the distance between cells.

statement:

<table border=9 cellspacing=6>
<tbody>
<tr> <th>公司</th> <th>收入</th> <th>支出</th> </tr>
<tr> <td>a</td> <td>￥100000</td> <td>￥60000</td> </tr>
</tbody> </table>

effect:

4. use of colspan and rowspan.

statement:

<TABLE border=2 bordercolor=black>
<TBODY>
<TR> <TH>公司</TH> <TH colspan=2>收支</TH> <TH rowspan=2>盈利 !</TH> </TH>
<TR> <TD>A</TD> <TD>￥100000</TD> <TD>￥60000</TD> </TR>
</TBODY> </TABLE>

effect:

the basic introduction to tables here is mainly to pave the way for the next tutorial. in the next tutorial, some specific application examples of tables in msn space will be given, such as: text around picture structure, multi-column text, adding background to text, etc.

the above is to use the

statement to implement a rounded table, which can save you the pain of making rounded pictures! _experience exchange content, for more related content, please pay attention to the php chinese website (www.php.cn)!