ウェブサイト上のテーブルの一部の背景色を変更する方法は、スタイルシートの導入により、年々変わり、より簡単で労力が少なくなっています。
古いメソッドは、bgcolor属性を使用してテーブルの背景色を変更していました。また、表の行や表のセルの色を変更するために使用することもできます。しかし、bgcolor属性はスタイルシートに代わって非推奨になっているので、テーブルの背景色を操作する最適な方法ではありません。
背景色を変更するより良い方法は、スタイルプロパティbackground-colorをテーブル、行、またはセルタグに追加することです。
これは、テーブル全体の背景色を変更します:
1行の色を変更するには、背景色プロパティを
タグ:
単一のセルの色を変更するには、そのセルに属性を追加します。
タグ:
|
また、テーブルヘッドに背景色を適用することもできます。 | タグを同じ方法で使用します。 | スタイルシートを使用して背景色を変更する
スタイルプロパティbackground-colorをテーブルに追加したくない場合は、背景色を設定する別の方法があります。たとえば、スタイルシート内のスタイルをHTMLドキュメントのHEADに設定することも、外部スタイルシートに設定することもできます。 HEADまたは外部スタイルシートのこれらの変更は、表、行、およびセルの場合のように表示されます。
テーブル{背景色:#ff0000; } tr {背景色:黄色; } td {背景色:#000; } 列の背景色を設定する
列の背景色を設定する最も良い方法は、スタイルクラスを作成し、そのクラスのセルにそのクラスを割り当てることです。クラスを作成すると、そのクラスを1つの属性を使用して特定の列のセルに割り当てることができます。
CSS:
td.ColColor {背景色:青; } HTML:
スタイルシートを使用して背景色を制御することの重要な利点の1つは、後で色の選択を変更することです。 HTML文書を読み込んで各セルに変更するのではなく、CSSで色の選択を1回変更するだけで、class = "ColColor"が使用されるすべてのインスタンスに即座に適用されます。これにより膨大な時間が節約され、細胞の色の変化が見逃されるなど、エラーの可能性が大幅に低減されます。
以前にWeb文書の表の背景色を変更したことがない場合でも、上記の例をコピーして、この方法を自分で試すことができます。スタイルタグ、特に大きなウェブサイトで作業している場合はスタイルシートを使用して、色の変更を簡単に行うことができます。提示されたさまざまなオプションを試して、最終的にあなたにとって最も快適なものを選んでください。
|