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

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>
Copy after login
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> —— 表格栏标题（粗体字）
Copy after login
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>

Copy after login

effect:

income and expenditure statement

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

(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">

Copy after login

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"，表格边框与环绕文字间垂直距离，数值越大，间距越大。 
其他表格属性，因为有些不是很常用，或者有些对浏览器类型有要求，并未列出。

Copy after login

2. commonly used attributes of

statement

demonstration statement:

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

Copy after login

detailed description:

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

Copy after login

3. commonly used attributes of

statement

demonstration statement:

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

Copy after login

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"，单元格内边框颜色。 
其他单元格属性，因为有些不是很常用，或者有些对浏览器类型有要求，并未列出

Copy after login

(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>

Copy after login

effect:

income and expenditure statement

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

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>

Copy after login

effect:

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

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>

Copy after login

effect:

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

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>

Copy after login

effect:

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

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)!

Related labels：

&lt;TABLE&gt; 圆角表格

source：php.cn

Previous article：Details of percentages - Container size_Experience exchange Next article：Detailed explanation of positioning and positioning application of div css

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn