CSS：テーブルデザイン。 登録の例

レッスンの興味深いと責任 - CSSとテーブルが作成。 この事業へのアプローチは、すべての可能なスタイルの知識を、有能にする必要があります。 また、彼らの創造の訪問者をオフに怖がらないようにするために美しさの感覚を持つことが必要です。

テーブルはほとんどすべてを変換することができます。 美しいデザインはCSSのテーブル設計の境界、テーブルの背景、セルの背景、彼らとより多くの間のギャップの使用を含みます。 最も基本的なを考えてみましょう。

テーブルの枠線

CSSテーブルスタイルのデザインは常にボーダー（枠）でゲームを必要とします。 すべてのデフォルトのテーブルは輪郭のフレームではありません。 つまり、それは0ピクセルに等しいです。 しかし、これは、プロパティの境界線によって修正することができます。

あなたは、テーブル全体のために外枠を指定することができます。

表{ボーダー：3px黒色固体。 }

このスタイルを使用して、サイト上のすべてのテーブルで、このラインのおかげで、黒のフレームです。 エッジのみではなく、テーブルの内側の境界線があります。 特に指定の細胞株およびフレームのために。

目、TD {ボーダー：3px固体黒;}

太さや色は、あなたがいずれかを指定することができます。 細胞を継ぐ際に境界が倍増されていないことに注意してください。

言葉は、固体連続登録を示しています。 あなたは他の値を指定することができます。

それをより魅力的に見えると、サイトの主なコンテンツから注意をそらすしないとして、それは、最も一般的に使用される固体のフレームです。

borderプロパティは、ボード上で指定することもできます。 境界は上部、下部、左側または右側に設定することができます。 いくつかのケースでは、一度にテーブル全体のためのフレームで実現可能な選択肢ではありませんので。

表{ボーダートップ：1ピクセルの赤色の固体。 }

だから、あなただけのテーブルの上のためのフレームを設定することができます。 同様に、他の当事者、だけではなく、トップのライトに：右、左または下。

テーブルヘッダ

テーブルヘッダは、<キャプション>タグを使用して指定することができます。 このタグは、微調整のためのプロパティの多くを登録するにはCSSにすることができます。 要素にあなたが望むように操縦することが可能であるため、CSSのテーブルのデザインは良いです。

このタイトルは、（例えば、「表1」など）の本で標準と同じように表示されています。

あなたはタイトルや財産キャプション側（上部または下部）の場所を指定することができます。 左または右に整列するプロパティtext-ALIGNによって定義されます。

バックグラウンドテーブル

テーブルの背景は、任意の色またはパターンであってもよいです。 カラーは、プロパティの背景色を設定します。 演説の中での使用と完全に一致してプロパティの名前。 それは多くの時間を保存することを容易にします。

色は、名前、および異なるエンコーディングとして指定することができます。 また、次の項目を指定できます。

• 透明 - 透明。
• 継承 - 色は、親要素の場合と同様です。
• 初期 - デフォルト。

透明度のオプションは、CSSファイルのテキスト内のすべてのテーブルが一つの色で作られたものな場合に使用することができますが、この場合には必要はありません。

また、背景画像であってもよいです。 スタイル規定背景画像のプロパティで、これを行うにしてください。 パスはこのようなものです：

URL（ 'URL'）

ファイルへのパスは、相対的または絶対的のいずれであってもよいです。

より複雑な塗りつぶしは勾配で行うことができます。

• 線形勾配（）。
• 半径方向の勾配（）。
• 反復線形勾配（）と繰り返しラジアル勾配を（） - 勾配を繰り返します。

背景セル

一般的な背景に加えて、あなたは、列または行のストライプの背景を指定することができます。 ラインの視覚的な分離が簡単に情報を読み取るため、プロパティの登録のために、非常に頻繁に使用されています。

交替に加えて、あなたは、特定の列または行の数を指定することができます。 このような例：

• TR：n番目の子（偶数）{...} - インターレース指定します。
• TR：n番目の子（1）{...} - 特定の行のプロパティの表示。
• TD：n番目の子（偶数）{...} - 列を交互に表示。
• TD：n番目の子（1）{...} - 特定の列の特性を示します。

シーケンスと数字のほかに指定することができます - 最初（TD：第一子）または最後（TD：最後の子を）。

細胞間のギャップ

CSSでは、テーブルデザインを使用すると、セル間のスペースを削除することができます。 デフォルトでは、彼らがしています。 あなたが境界線の間の距離を設定することなく、テーブル内の枠を設定した場合、それはここでは、この結果になります。

それはとても素敵ではないに見え、読むために便利ではない、同意します。 ユーザーはこのための目のリップルを持つことになります。 テーブルのスタイルで、まさにこのような行を記述することですることができ、これらのギャップを削除します。

国境崩壊：崩壊

しかし、また距離が、逆に、増加させる必要があることを起こります。 また、ギャップの大きさは、列間と線の間のように指定することができます。 値が（代わりに崩壊）ことを示すために：

国境崩壊：独立しました

しかし、そのような行動は、細胞を分離することが必要であることを示します。 それは彼らのシェアだったので、追加のプロパティを示しました。

ボーダー間隔：20ピクセル。

あなたは、行と列の間の異なる距離を指定したい場合、それは2つのことを示します。

ボーダー間隔：10px20px。

ブラウザの違い

CSSデザインのテーブルは、ブラウザに依存し、異なって見える場合があることに注意してください。 特に悪いCSSの革新がサポートされていないこと、古いバージョンの場合です。

上記デジタル値にフレームの厚さの一例です。

この例では、定数のフレームの厚さ。

境界線のスタイルも大きく異なります。

そのため、開発は常に異なるブラウザで結果を参照してください。

CSSでデザインテーブルは、ブラウザの種類を確認することをお勧めします。 特に大きな問題は、Internet Explorerの古いバージョンを持つユーザーになるために使用されます。

非常に高度な開発者は、完全に異なるCSSファイルを接続するために、ブラウザに依存することができます。 そして、誰かが各小切手またはいくつかの特定のスタイル（クラス）を行います。

ほとんどの問題は影から生じます。

CSS：表形式の例

登録は非常に変化させることができます。 これは、すべてのサイト全体やその設計に依存します。 すべてを合わせて多彩な色をしなければなりません。 また、それは大きな役割と風味の開発を行います。 美しさの感覚はすべて異なっています。

私たちは、さまざまなテーブルのいくつかの例を与えます。 上の図は、背景色と境界線との傾きや遊びの使用を示しています。

多くは目のユーザーを切断しないだろう美しいすっきりとしたデザインの興味深い例となります。 この実施形態は、ほぼすべての状況で適切です。

エッジは丸みすることができます。 それはかなり良さそうです。

結論

あなたが見ることができるように、CSS内のテーブルの外観のために多くのツールがあります。 各パラメータはまた値のオプションの膨大な量です。 あなたが一度にすべてを使用する場合は、傑作を作成することができます。 あなたが行う場合は特に 適応、デザイン すべてのブラウザのために。

デザインの主なもの - 効果で無理をしないでください。 すべてが適度に行われるべきです。 最初に、レイアウトはすぐにすべての知識を試して使用したいです。 表の結果として過飽和特性です。 これらのエラーを避けるようにしてください。

さらに、いくつかのパラメータが互いに干渉することができます。 例えば、指定する必要はありません 背景色 、テーブルの一方を依然として指定された色を重複する背景画像を、そこに設定されている場合。