ステートメントを使用して丸いテーブルを実装すると、丸い画像を作成する手間が省けます。 _経験の交換ステートメント:
<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) に注目してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
-
2024-11-13 09:42:17
-
2024-11-13 09:42:16
-
2024-11-11 12:24:02
-
2024-10-22 13:03:13
-
2024-10-22 11:44:46
-
2024-10-18 17:59:07
-
2024-10-18 17:52:44
-
2024-10-18 14:43:47
-
2024-10-15 12:00:09
-
2024-10-15 11:53:15
| |
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
