ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >HTMLタグ一覧 > テーブル

画像や背景色を指定する

テーブルやセルは画像(壁紙)や背景色を指定することができます。

■ テーブルに画像を指定する

<table background="画像のファイル名">でテーブルに画像を指定できます。

【ブラウザ表示】

格子状の壁紙

ソース

<table border="1" background="./image/koushi.gif">
<tr>
<td>格子状の壁紙</td>
</tr>
</table>

■ セルに画像を指定する

<td background="画像のファイル名">でセルに画像を指定できます。 thに対しても同様の指定ができます。

【ブラウザ表示】

セル1 セル2

ソース

<table border="1">
<tr>
<td background="./image/kuma.gif">セル1</td>
<td background="./image/kuma.gif">セル2</td>
</tr>
</table>

■ テーブルに背景色を指定する

<table bgcolor="色">でテーブルに背景色を指定することができます。

【ブラウザ表示】

オリーブの色

ソース

<table border="1" bgcolor="olive">
<tr>
<td>オリーブの色</td>
</tr>
</table>

■ セルに背景色を指定する

<td bgcolor="色">でセルに背景色を指定できます。 thに対しても同様の指定ができます。trにbgcolorを指定した場合は 行全体に色を指定できます。

【ブラウザ表示】

アクアの色 アクアの色

ソース

<table border="1">
<tr>
<td bgcolor="aqua">アクアの色</td>
<td bgcolor="aqua">アクアの色</td>
</tr>
</table>

■ table tr tdまたはthの優先順位

背景色の優先順位は tdまたはth > tr > tableの順でtdとthが 最優先されます。

テーブル全体に背景画像を指定してセルに違う画像を指定すると下の表のように前者 が背面で後者は前面に表示されます。但し壁紙同士だと セルの背景画像が優先されます。

【ブラウザ表示】

セル1 セル2 セル3
セル4セル5セル6

ソース

<table border="1" background="./image/koushi.gif">
<tr>
<td background="./image/kuma.gif">セル1</td>…セル1に個別に画像を指定
<td bgcolor="blue">セル2</td>……背景色青
<td>セル3</td>……何も指定してないのでテーブル全体の画像が適用される
</tr>
<tr bgcolor="green">……テーブルの2行目全体を緑色に指定
<td>セル4</td>
<td>セル5</td>
<td bgcolor="yellow">セル6</td>……背景色黄色がtrの色より優先
</tr>
</table>

■ その他の項目

テーブルを作る
横幅、高さを指定する
表示位置を指定する
テーブルに表題をつける
間隔、余白を指定する
セルを結合する
枠線の色やスタイルを指定する
行と列をグループ化する
枠線の表示方法を指定する
細い枠線のテーブル
テーブルを横に並べる
テーブルで空白を作る

HTMLタグ一覧のページに戻る

HTMLタグ
テキスト
イメージ
マーキー
テーブル
リンク
リスト
水平線
フォーム
メタタグ
フレーム
音楽タグ
埋め込みタグ

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.