HTML テーブルの背景

WBOYオリジナル: 2024-09-04 16:48:43648ブラウズ

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

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

構文

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

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

<HTML element background-color:color-name>
<HTML element background:"Image URL">

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

を設定します。

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

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

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

<table background:" Image URL">

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

<table background:" Image URL">

background-repeat: no-repeat;

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

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

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

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

または

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>