<TABLE> ステートメントを使用して丸い表を実装すると、丸い図を作成する手間が省けます。 _体験交流

ステートメントを使用して丸いテーブルを実装すると、丸い画像を作成する手間が省けます。 _経験の交換

ステートメント:

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

コードは長く見えますが、原理は実際には非常に単純です。昨日、元のコードを合理化しました。今は、ネストされたテーブルを 4 つから 2 つに減らすと、理解しやすくなるはずです。表内のテキストが表の境界線に近づきすぎないように、「cellpadding=3」が特別に追加されていることに注意してください。

この角の丸いテーブルを作成する主な目的は 2 つあります。1 つ目は、背景色付きのログ テンプレートとして使用できます。たとえば、チュートリアル (1) を参照してください。2 つ目は、独自のログ タイトル ファイルや署名を作成するために使用できますが、それでも非常に便利です。

ステートメントを使用して、丸い表を作成します。インターネット上の他の一般的な方法と比較して、丸い画像を作成して使用する手間が省けるだけでなく、相対的な幅が使用されるため、丸い表は「適応的」です。 (width=100%) なので、このテーブルはパブリッシュ ログ列の幅の変化に応じて自動的に調整され、通常の画像から作成された角の丸いテーブルよりも柔軟性が高くなります。

(1) 基本的なテーブル ステートメントの形式

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

これら 5 つの基本的なテーブル ステートメントはテーブルのスケルトンを構成します。そのうち

、、

はこれら 3 つの文を学習すれば、すでに完全な表を描くことができます。以下の簡単な例を見てください。

明細書:

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

効果:

収入支出明細書

p>

(2) テーブル関連の属性

1.

ステートメントの一般的に使用される属性

デモ ステートメント:

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

具体的な手順:

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.

ステートメントの一般的に使用される属性

デモ ステートメント:

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

詳細な説明:

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

3 .

ステートメントの一般的に使用される属性 p>

デモ ステートメント:

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

具体的な指示:

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) テーブルの簡単な例

1.

を削除します。 border パラメータはボーダーレステーブルを取得できます。

明細書:

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

効果:

収支明細書

p>

2. border と bordercolor を使用して、テーブルの境界線のサイズと色を変更します。

ステートメント:

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

効果:

3. セル間隔は、セル間の距離を調整するために使用することもできます。

ステートメント:

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

結果:

4. colspan と rowspan の使用。

ステートメント:

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

効果:

ここでのテーブルの基本的な説明は、主に次のチュートリアルへの道を整えることを目的としています。次のチュートリアルでは、画像構造の周りのテキスト、複数列のテキスト、テキストへの背景の追加など、msn スペースのテーブルの具体的な応用例をいくつか示します。

上記は、

ステートメントを使用して丸いテーブルを実装するもので、これにより、丸い画像を作成する手間が省けます。 _体験交流コンテンツ、その他の関連コンテンツについては、php 中国語 web サイト (www.php.cn) に注目してください。