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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

PHP中文网

May 16, 2016 pm 12:08 PM

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

ログイン後にコピー

効果:

収入支出明細書

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

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

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

デモステートメント:

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

ログイン後にコピー

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

デモステートメント:

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

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

デモステートメント:

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

を削除します。 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>

ログイン後にコピー

効果:

収支明細書

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

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>

ログイン後にコピー

効果:

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

ログイン後にコピー

結果:

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

ログイン後にコピー

効果:

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