HTMLで細い線の表を作成する

この細い線のテーブルの作成方法に関して、Baidu には次の値を設定するように指示する答えがあるかもしれません: set border="0" cellpacing="1" bgcolor="#990033" をテーブルに設定し、また背景を設定するにはセルの色を個別に指定します。例: bgcolor="#fff"。しかし、なぜこれらの値を設定する必要があるのか​​については、おそらく詳細な説明がありません。

そこで、今日はこの細い線の形の原理を記録しておこうと思いました。これは、私が最近学生に基礎的な授業を教えているためでもありますが、初心者はこの細い線の形の原理をよく理解していません。同様の問題が発生するため、これらの値が設定される理由について説明します。

まず、表の枠線の値を 1 に設定した場合の効果を見てみましょう。 border="1" でセル間の距離 cellpacing="0" であっても、表の太さは依然として粗く見えます。

細い線のテーブルを作成することで得られる効果を見てみましょう:

比較すると、次の表はより洗練されています。

それでは、細線テーブルを作成する手順をまとめてみましょう:

細線テーブルを作成する手順:

1. テーブルの背景色 (つまり、テーブルの境界線の視覚的な色) を設定します。
TD（セル）の背景色を設定します（視覚的にテーブル全体の全体的な色）
テーブルの境界線の値を 0 (border="0")、間隔の値を 1 (cellspacing="1") に設定します。これにより、テーブルの背景色がこの間隔を通して表示され、視覚的な境界線になります) 。

分析: 表の背景色は、実際には細線表が視覚的に見える細線です。境界線を 0 に設定し、セル間のセル間隔を 1 に設定しているため、表の背景色はこれによって決まります。 1 ピクセルのギャップによって表される色は、テーブルの背景色と区別するためにセルの背景色を設定するために使用されます。よりよく理解するために、写真で分析してみましょう:

1. 次のテーブル border="1" が次のように表示されるとします。

2. セル間隔を cellpacing="0" に設定すると、2 つの 1 ピクセルのエッジが隣り合うと、境界線が太く表示されます。

したがって、 border="1" を通じて細線効果を設定することはできません

それでは、細線法を使って次のような原理を作ってみましょう:

この記事が役に立った場合は、忘れずにお勧めください