HTMLの表の境界線

HTML の表の境界線は、表の内容の周囲に境界線を表示するために使用されます。これは、テーブルのセルの周囲に境界線を表示しない場合は 0 のような値を指定することでテーブルの周囲に設定でき、テーブルのセルの周囲に境界線を表示するには値 1 を設定します。テーブルの幅を数値で設定して、ユーザーがテーブルの周囲に付ける境界線の太さを定義できます。テーブル全体、特定の行または列、またはテーブルの先頭のみに境界線を設定できます。すべては可能です。

HTML の表の境界線の構文

テーブルの境界線を定義するには複数の方法があります。構文を 1 つずつ見てみましょう:

1.一般的なテーブルの境界線: これは通常、次のようなテーブルの周囲の単純な境界線を定義するために使用されます。

例:

table, th, td{
border:1px solid blue;
}

2.折りたたみ可能なテーブルの境界線: このプロパティは、border-collapse プロパティを使用してテーブルの周囲に 1 行で折りたたみ可能な境界線を設定するために使用されます。

table{
border-collapse: collapse;
}

例:

table{
border-collapse: collapse;
}
table, th, td{
border:0px;
}

3.テーブルの周囲の境界線: このプロパティを使用すると、テーブルの個々のセルではなく、外側の端にのみテーブルの境界線を追加できます。

と同様です。

table {
border : 1px;
}

4.点線の表の境界線: 次の構文を使用するだけで、表に点線の輪郭を境界線として追加できます:

table{
border : 1px; dotted color-name;
}

5.破線の表の境界線: 点線と同様に、表または表のセルの周囲に破線の境界線を設定できます。これは、値を設定することでユーザーの選択に応じて薄くすることも厚くすることもできます。

table{
border : 3px; dashed color-name;
}

6.表の二重枠線: 表に二重枠線を追加したい場合は、CSS コード内でプロパティを設定し、表の周囲に二重枠線を付けることによっても可能です。

table{
border : 1px; double color-name;
}

7.表のセルの周囲の表の境界線: この構文は、個々のセルまたは特定の表のセルの周囲に、好みのカラー コードで境界線を付けるのに役立ちます。この構文では、各セルに境界線コード値を個別に追加します。

table{
border : 1px; dotted color-name;
}
th{
border : 1px; color-name;
}
td{
border : 2px; color-name;
}

8. CSS クラスを使用したテーブルの境界線: CSS クラスは、テーブルの個々のセルに境界線を設定するのではなく、テーブルに共通の境界線コードを与えるのに役立ちます。これは、次の構文を使用して実行できます:

<style>
table{
background-color: color-name;
}
table th{
CSS code
}
table td{
CSS code
}
</style>

9.テーブルの下の境界線: テーブルの境界線のこのプロパティは、次のようにテーブルの th タグと td タグの間に水平の区切り線を与えるために使用されます。

th, td{
border-bottom: value color-name;
}

10.丸いテーブルの境界線: テーブルの境界線に丸い角が表示されます。

table{
border-radius: value;
border: value color-name;
}

HTML の表の境界線の例

以下は表の枠線の例です

例 #1

次の例は、境界線が異なる 2 つの異なるテーブルを示しています。最初の表は表の周囲に通常の境界線を示していますが、2 番目の表は折りたたみ可能な表の境界線形式の例です。

HTML コード:

<style>
.collapsetable{
border-collapse: collapse;
border: 3px solid blue;
}
</style>

Genral Table Border

SR.NO	NAME	Education	AGE
1	Dinesh	BCA	26
2	Raj	CA	30
3	Deepti	ME	28
4	Akhilesh	B.com	21
5	Sara	MBA	26

Collapsible Table Border

Emp Code	Emp Name	Job Title	Salary(LPA)
911	Zoya Shaikh	Developer	3.6
912	Lisa Dev	Tester	2.8
913	Deepak Jadeja	Digital Marketing	5.2
914	Aditi Yewale	Developer	4
915	Simren Rao	HR	5.6

出力:

例 #2

この例は、さまざまなテーブル枠線タイプを使用して、外側部分のみにテーブルの枠線を設定する方法を示しています。

HTML コード:

<style>
table{
border: 1px solid red;
border-collapse: collapse;
}
</style>


<h4 id="Table-with-outside-border">Table with outside border</h4>

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

Table with dotted border

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

Table with dashed border

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

Table with double border

Index	Seasons	Durations
1	Summer	4 months
2	Rainy Seasons	4 months
3	Winter	4 months

出力: この出力は、テーブルの外側に点線、破線、二重枠が付いているテーブルを示しています。

例 #3

表のセルを個別に異なる色で枠線で囲んだ例:

HTML コード:

<style>
table{
border: 3px solid red;
}
th{
border: 2px solid blue;
}
td{
border: 2px solid black;
}
</style>


<h4 id="Table-border-around-Cell">Table border around Cell</h4>

First Name	Last Name	City
Rita	Mishra	Mumbai
Rashmi	Patil	Nagpur
Kartik	Dev	Pune

出力:

例 #4

水平方向の境界線として境界線を使用した別のテーブルの丸い境界線

HTML コード:

<style>
.round{
border-radius: 15px;
border: 2px solid purple;
padding: 5px;
}
th, td {
border-bottom: 1px solid black;
}
</style>


<h4 id="Table-border-around-Cell">Table border around Cell</h4>

Cake	Weight	Price
Chocalate	1/2 kg	400/-
Rasmalai	1 kg	850/-

出力:

結論

• HTML のテーブルの境界線は、テーブルの周囲に境界線を表示する場合は値 1 を割り当て、テーブルの周囲の境界線を非表示にする場合は 0 を割り当てることで設定されます。
• 単純な太いまたは細い枠線、折りたたみ可能な枠線、点線、二重、破線の枠線など、さまざまなタイプの枠線をテーブルの周囲に設定できます。

以上がHTMLの表の境界線の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。