HTML テーブルの背景

他の HTML 要素と同様に、HTML テーブルには多くの処理があります。したがって、HTML テーブルでもテーブルの背景をさまざまなスタイルで設定できます。 HTML テーブルの背景を使用して、テーブルの背景の制御を設定できます。テーブルの背景として色または画像を設定することができます。このトピックでは、HTML テーブルの背景について学習します。

このコードにより、ユーザーは HTML テーブルの背景を変更できます。 CSS コードは、background と呼ばれるプロパティを使用して、テーブルの背景にスタイルを設定します。テーブルの幅に応じて、特定の画像をテーブルの背景として設定することもできます。ただし、これはテーブルサイズで繰り返されます。このケースを回避するには、background-repeat というプロパティを使用します。

構文

HTML でテーブルの背景を設定する方法は複数あります。以下のように、すべての方法と構文を 1 つずつ見てみましょう:

任意の HTML 要素に背景を設定するための基本的な構文は次のとおりです:

同じものをテーブルの背景として設定できます。このシナリオでは、

を設定します。

テーブルの背景としての色。

HTML のテーブルの背景として画像を設定することもできます。これは、背景画像と呼ばれる CSS プロパティを使用して実行できます。この画像は自動的にテーブルの背景に設定されます。この画像のサイズが表の幅より小さい場合、繰り返し表示され、再度繰り返し表示されます。

上記の場合、次のように CSS プロパティを使用することで、画像が繰り返し表示されるこの状態を回避できます。

background-repeat: no-repeat;

特定のセルの背景として画像を設定することも可能です。これは次のように実行できます:

.cellimg{
width: 100%;
border: 1px solid black;
}
.cellimg{
background-img: url("");
background-repeat: no-repeat;
}

特定のセルに画像を設定するのと同様に、次のようにして特定のセルに色を設定することもできます:

content	content
content	content

または

td.classname {
background-color:color-name;
}

次の構文を使用して、特定の行に色を設定することもできます:

<tr style="background-color:color-name;">
<th> </th>
<th> </th>
</tr>

テーブルにクラスを定義し、その特定のクラスに CSS プロパティを適用すると、テーブルの背景を設定するのにも役立ちます。この構文は次のとおりです:

<style>
.tableclassname {
width:100%;
background-color:color-name;
}
.tableclassname  th{
width:100%;
background-color:color-name;
}
.tableclassname td{
background-color:color-name;
}
</style>

HTML テーブルの背景の例

以下に挙げる例を次に示します。

例 #1

この例は背景を色として設定する例です。したがって、選択に従ってテーブルの背景に色を設定できます。HTML コードと出力は次のようになります。

コード:

<title>HTML Table Background</title>
<!-- CSS -->
<style>
.tabledemo {
width: 100%;
text-align: Center;
background-color:aquamarine;
border-collapse: collapse;
}
.tabledemo td, .tabledemo th {
border:2px solid brown;
padding:3px;
}
</style>

Place Name	To do Things	Distance from Pune	Best Time to visit
Sinhgad	Trekking, photography	30 km	All seasons
Lohgad fort	Pawana lake, Visapur fort	65 km	Mansoon
Pawana Lake	Night campaing	50 km	All seasons
lonvala	Rajmachi Fort, Bushi dam	66 km	Mansoon
Kamshet	Paragliding	47.5 km	All seasons
Khandala	Karla Hills	71.1 km	Rainy days
Alibaug	Colabo Fort, Kihim Beach	143 km	All Seasons
Tarkarli	Scuba Diving	388 km	All Seasons
Rajgad fort	Suvela machi, Balekilla	54 km	Mansoon
Kolad	River raffting	194 km	Mansoon, Winter

出力:

例 #2

この例は背景を画像として設定する例です。したがって、選択に従ってテーブルの背景に画像を設定できます。画像は出力として繰り返しモードになっており、HTML コードとその出力は次のようになります:

コード:

<title>HTML Table Background</title>
<style>
.imgbg {
width: 100%;
text-align: left;
background-image: url(BG.jpg);
border-collapse: collapse;
}
.imgbg td, .imgbg th {
border:2px solid black;
padding:5px;
}
</style>

Front End Languages	Backend Languages	Databases	OS
HTML	.NET	SQL	Windows 10
CSS	.NET	MYSQL	Windows 10
Bootstrap	angular JS	PL/SQL	Ubuntu
Javascript	.NET	Mongo DB	Windows 10
Jquery	Core java	Mariya DB	Windows 10
React JS	Python	Maria DB	ubuntu
Vue JS	Php	PL-SQL	Windows 10
Angular 8	Java	Maria DB	Ubuntu
RWD	Ruby	Mongo DB	Windows 10
React JS	ASP .NET	Maria DB	Windows 10

出力:

例 #3

これは、画像と色の両方を背景として特定のセルに追加するもう 1 つのシナリオです。

コード:

<title>HTML Table Background</title>
<style>
.imgno {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.imgno td, .imgno th {
border:1px solid black;
padding:4px;
}
</style>

First Name	Last Name	Age	Location
ketki	Patil	28	Mumbai
Devendra	Gupta	35	Delhi
Nikhil	Sabnis	49	Neral
Snehal	Wagh	29	Nashik
Gitu	Rathi	34	Pune
Pooja	Lohiya	26	Nanded
Dipti	Roy	22	Parbhani
Prem	Jadu	67	Kolkata
Aditi	Jain	23	Nagpur
Raj	Sohani	25	Latur
Sai	Jain	56	Mumbai

出力:

結論

他の要素と同様に、HTML テーブルに背景を画像や色で設定することもできます。テーブル全体やテーブルの見出し、テーブルの行、テーブルの列など、特定のテーブル属性にイメージや色を設定できます。これは、コード内でテーブルの背景プロパティを使用して行うこともできます。

以上がHTML テーブルの背景の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。