表の境界線の CSS 構文

Dreamweaver がテーブルの作成において優れた仕事をしていることはわかっていますが、特定の効果を実現するには、ある時点でまだ CSS と組み合わせる必要があります。まず、テーブルの境界線の CSS 構文を整理してから、その方法を紹介します。 CSSを使用して表の境界線を美しくします。

表の境界線の CSS 構文

特定の内容には、上境界線の幅、右境界線の幅、下境界線の幅、左境界線の幅、境界線が含まれます。幅、枠線の色、枠線のスタイル、上枠、下枠、左枠、右枠、枠線、幅、高さ、関連ラベルなど。

1. 上部の境界線の幅

構文: border-top-width:

許容値: 薄い | 厚い |

初期値: 中

適用対象: すべてのオブジェクト

下位互換性: いいえ

上枠幅プロパティが使用されます 幅を指定します要素の上端の境界線。値は 3 つのキーワードのいずれかになります。いずれもフォント サイズや長さの影響を受けず、比例幅を実装するために使用できます。負の値は許可されません。また、上の境界線、境界線の幅、または境界線のプロパティを省略するために使用することもできます。

2. 右側の境界線の幅

構文: border-right-width:

許可される値: 細い | 太い

初期値: 中

適用対象: すべてのオブジェクト

下位互換性: いいえ

右側の境界線の幅のプロパティが使用されます。要素の右側の境界線の幅。値は 3 つのキーワードのいずれかになります。いずれもフォント サイズや長さの影響を受けず、比例幅を実装するために使用できます。負の値は許可されません。右の境界線、境界線の幅、または境界線のプロパティを省略するために使用することもできます。

3. 下部境界線の幅

構文: border-bottom-width:

許可される値: 薄い | 厚い |

初期値: 中

適用対象: すべてのオブジェクト

下位互換性: いいえ

下の境界線の幅属性が使用されます。要素の下端の幅。値は 3 つのキーワードのいずれかになります。いずれもフォント サイズや長さの影響を受けず、比例幅を実装するために使用できます。負の値は許可されません。また、下の境界線、境界線の幅、または境界線のプロパティを省略するために使用することもできます。

4. 左境界線の幅

構文: border-left-width:

許容値: 薄い | 厚い |

初期値: 中

適用対象: すべてのオブジェクト

下位互換性: いいえ

左境界線の幅プロパティは次の目的で使用されます。要素の左境界線の幅。値は 3 つのキーワードのいずれかになります。いずれもフォント サイズや長さの影響を受けず、比例幅を実装するために使用できます。負の値は許可されません。また、左側の境界線、境界線の幅、または境界線のプロパティを省略するために使用することもできます。

5. 境界線の幅

構文: border-width:

許容値: [ 細い | 太い | Length> ]{1,4}

初期値: 未定義

適用対象: すべてのオブジェクト

下位互換性: いいえ

Border width 属性が設定されます1 ～ 4 の値を持つ要素の境界。値はキーワードまたは長さです。負の長さは許可されません。 4 つの値をすべて指定すると、それぞれ上、右、下、左の境界線スタイルに適用されます。値が指定されている場合は、それが各エッジに適用されます。 2 つまたは 3 つの値が指定された場合、省略された値は反対側に等しくなります。 このプロパティは、top、right、bottom、および left プロパティの短縮形です。省略されたボーダー属性を使用することもできます。

6. 境界線の色

構文: border-color:

許可される値:

初期値: color 属性の値

適用対象: すべてのオブジェクト

下位互換性: いいえ

境界線の color 属性は、次の値を設定します。要素の境界線の色。 1 ～ 4 つのキーワードを使用できます。 4 つの値をすべて指定すると、それぞれ上、右、下、左の境界線スタイルに適用されます。値が指定されている場合は、それが各エッジに適用されます。 2 つまたは 3 つの値が指定された場合、省略された値は反対側に等しくなります。省略されたボーダー属性を使用することもできます。

7. 境界線のスタイル

構文:

許可される値: [ なし | 点線 |ダブル | リッジ | インセット | アウトセット ]{1,4}

適用対象: すべてのオブジェクト

border style 属性は、要素の境界線のスタイルを設定するために使用されます。このプロパティは、表示される境界線を指定するために使用する必要があります。 1 ～ 4 つのキーワードを使用できます。 4 つの値をすべて指定すると、それぞれ上、右、下、左の境界線スタイルに適用されます。値が指定されている場合は、それが各エッジに適用されます。 2 つまたは 3 つの値が指定された場合、省略された値は反対側に等しくなります。省略されたボーダー属性を使用することもできます。

なし: スタイルなし;
破線: 破線;
二重: 二重線; ;
リッジ: リッジ;
インセット: 凹面;
アウトセット: 凸面。


構文: border-top:

許可される値: 初期値: 未定義

下位互換性: いいえ

top 属性は、要素の境界線の幅、スタイル、色を設定するための省略表現です。指定できる境界線スタイルは 1 つだけであることに注意してください。省略されたボーダー属性を使用することもできます。

9. 右ボーダー

構文: border-right:

許可される値: | <ボーダースタイル>

初期値: 未定義 下位互換性: いいえ

border 属性は、要素の右枠の幅、スタイル、色を設定するための省略表現です。指定できる境界線スタイルは 1 つだけであることに注意してください。省略されたボーダー属性を使用することもできます。

10. 下部境界線

構文: border-bottom:

許可される値: <下部境界線の幅< ;境界線のスタイル>

初期値: 未定義

下位互換性: いいえ Bottom プロパティは、要素の下枠の幅、スタイル、色を設定するための省略表現です。指定できる境界線スタイルは 1 つだけであることに注意してください。省略されたボーダー属性を使用することもできます。

11. 左ボーダー

構文: border-left:

許可される値: | <ボーダースタイル>

初期値: 未定義

後方互換性: いいえ

border 属性は、要素の左枠の幅、スタイル、色を設定するための省略表現です。指定できる境界線スタイルは 1 つだけであることに注意してください。省略されたボーダー属性を使用することもできます。

12. 境界線

構文:

許容値: <境界線の幅> ||

初期値: 未定義

適用対象: すべてのオブジェクト

下位互換性: いいえ

境界線のプロパティは、要素の境界線の幅、スタイル、色。 ボーダー宣言の例は次のとおりです。

H2 { border: Groove 3em }

A:link { border: Solid blue }

A:visited { border: Thin dotted #800080 }

A:active { border: Thick double red }

border 属性は 4 種類の境界線のみを設定でき、境界線のセットの幅とスタイルを指定することしかできません。要素の 4 つの境界線に異なる値を与えるには、Web ページ作成者は、上境界線、右境界線、下境界線、左境界線、境界線の色、境界線の幅、境界線のスタイルなどの 1 つ以上の属性を使用する必要があります。上境界線の幅、右境界線の幅、下境界線の幅、または左境界線の幅。

構文: width:

許可される値: 🎜>

初期値: auto

適用対象: ブロックレベルおよび置換された要素

下位互換性: いいえ

width 属性の初期値は " auto "、これは要素の元の幅 (または要素自体の幅) です。パーセンテージは親要素の幅を指します。負の長さの値は許可されません。

構文: height:

許容値:

初期値: auto

適用対象: ブロックレベルおよび置換要素

下位互換性: いいえ

height 属性の初期値は「auto」です。要素の元の高さ (要素自体の高さもあります)。パーセンテージは親要素の幅を指します。負の長さの値は許可されません。

15. 関連タグ

table: テーブル ラベル、テーブル スタイル全体の定義を table に配置する必要があります。
td: セル ラベル、セル スタイルの定義を td に配置する必要があります。