テーブルは、Web ページ制作において間違いなく最も重要なオブジェクトです。通常、Web ページはさまざまな要素のレイアウトと構成をテーブルに依存しているため、Web ページが美しいかどうか、コンテンツの構成が明確であるかどうかが直接決まります。しかし、多くの友人は、テーブルの研究を無視して、他のレイヤー、画像、特殊効果などに集中することがよくあります。実際、テーブルを合理的に使用すると、ページを簡単に美しくすることができます。また、テーブルで作成されたページが単調であるという友人の不満もよく聞きます。 、粗く、多様性に欠けており、1 ピクセルの表の境界線を作成する方法についてよく質問されます。実際、Dreamweaver ではテーブルを非常に簡単に調整できるため、Web ページをより美しく洗練されたものにすることができます。 Dreamweaver でテーブルを次の 3 つの側面から調整する方法を紹介します。
1. プロパティパネルを使用します。
図 1 まず、CellPad と CellSpace という 2 つのテーブル プロパティ パネルのパラメータを理解する必要があります。図 1 に示すように、CellPad はテーブル内の 2 つのセル間の距離を指し、CellSpace は各セルと中央のコンテンツ間の距離を指します。これら 2 つのパラメータを変更し、背景色を一致させることで、1 ピクセルの表枠を簡単に作成できます。
1. [オブジェクト] パネルを使用してテーブルを挿入し、テーブルの幅、高さ、行と列を定義します。この時点では、Dreamweaver に挿入されるテーブルのデフォルトの CellPad、CellSpace、および Border はすべて 0 であることに注意してください。図 2 に示すように、
図2
2. プロパティ パネルでテーブルの Border を 0、CellPad を 5 に定義します (これにより、セル内のコンテンツと CellSpace の間の 5 ピクセルが 1 に保たれます) (これにより、セル間の 5 ピクセルが保たれます)。 ) 1 要素間隔)。図 3 に示すように、
図3
3. 図 4 に示すように、テーブルの背景色を #999999 に設定します。
4. 図 5 に示すように、セルの背景色を #FFFFFF に設定します。
図5
5. ブラウザで効果をプレビューすると、図 6 に示すように、テーブルにピクセルの境界線があることがわかります。
図 62
: テーブルのネストの使用。
上記の主な原則は、テーブルのネストを使用することで、より多くの効果を実現できます。
1. まず、前の例を参照してテーブルを描画し、このテーブルの CellPad と CellSpace の値と色を設定します。具体的な効果を図 7 に示します。
図 7 2. 次に、別の単一行、単一列のテーブルを描画します。CellPad=2、CellSpace=1 に設定します。具体的なパラメーターは図 8 に示すとおりです。
図8
3. 最初のステップで作成したテーブルを 2 番目のステップのテーブルに移動します。テーブルは図 9 のようになります。
図 9 では、このテーブルに二重線の外側フレームと単線の内側フレームがあることがわかります。
4. 2 番目のステップのテーブルを 1 行 2 列に変更し、最初のステップのテーブルを各セルに配置します。最終的なテーブルは図 10 のようになります。
図 10 を
再定義し
、.tdstyle スタイルを個別に定義します。特定のパラメータは図 13 に示すとおりです。
ここでは、上下の境界線の幅を 1 ピクセル、左右の境界線の幅を 0 に定義していることに注意してください。
4. 最終的なテーブル効果を図 14 に示します。
(写真15)
このとき、テーブルに立体感が出ます。
6. 上の表は完璧とは言えません。表全体の右と下に境界線がありません。別の style.table1 を定義し、このスタイルの 4 つの辺を 1 ピクセルに定義してアタッチすると
