HTMLで細い線のテーブルを作成する簡単な例

この細線の表を作成する方法については、Baidu で検索すると、表に対して border="0" cellspacing="1" bgcolor="#990033" を設定し、セルの背景色も個別に設定するように指示する回答が得られる場合があります (例: bgcolor="#fff")。しかし、なぜこれらの値を設定する必要があるのか​​についての詳細な説明はおそらくありません。

今日、突然この細線表の原理を記録しようと思いました。これは、最近学生に基礎コースを教えているからです。学生はこの細線表の原理をあまり理解していません。そのため、初心者はおそらく同様の問題に遭遇するでしょう。そこで、ここでこれらの値が設定されている理由を説明します。

まず、テーブルの border 値を 1 に設定した場合の効果を見てみましょう。border="1" および cellspacing="0" の場合でも、テーブルの厚さは粗く見えます。

細線テーブル方式を作ることでどのような効果が得られるか見てみましょう。

それに比べて、次の表はより洗練されています。

ここで、細線テーブルを作成する手順をまとめます。

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

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

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

1. 次の表の border="1" の場合、次のように表示されます。

2. cellspacing="0" が設定されている場合、1 ピクセルの境界線が 2 つ隣り合うと、境界線が非常に太くなります。

したがって、border="1"を使用して細い線の効果を設定することはできません。

次に、細線法を使用して、次の原理を作成します。

この記事が役に立った場合は、ぜひお勧めしてください。

オリジナルURL: http://www.cnblogs.com/xcaocao/p/5643351.html