テーブルで画像を表示する方法まとめ（挿入・配置・背景)

• Twitter
• facebook
• Google+
• LINE

こんにちは。ビータイズのWeb職人まいたけです。

今日はホームページでテーブルを使用するときの画像あれこれです。画像をテーブルに挿入したいとき、配置の仕方、テーブルの背景に画像を使いたいときなどをまとめてご紹介します。
テーブルを使うときの参考にしてみてください。

 

※本ページの内容は、html及びCSSの基本を理解していることを前提に掲載しています。

それぞれ基本知識をまとめた記事もありますので、ホームページ作成やhtml、CSSにあまり詳しくない方、学び始めたばかりの方はこちらも参考にしてみてください。

テーブルに画像を挿入する

サンプルコード：

テーブルで画像を使うときは、上記サンプルコードの用に「td」の中で「img」タグとして画像を読み込むだけです。簡単ですね。

今回のサンプルでは画像の幅が大きいためtdと画像の横幅をCSSで指定していますが、基本的にtdは画像の幅と合わせて勝手に広がるので、ここの数値は設定しなくても大丈夫です。
※今回のように画像が大きかったり、テーブルの幅を特定の数値にしたい時はCSSで指定しましょう。

テーブルの画像配置

画像と文字が１つのセル(thまたはtd)に１つの場合

テーブルでの画像配置は、１つの「td」に対して画像は１つだけの場合、上記のサンプルコードの画像が入っているtdと文章が入っているtdを逆に配置すれば、横位置がかわります。

画像が左、テキストが右（サンプルコードと同じ）

 

テキストが左、画像が右

 

１つのセル(thまたはtd)に画像と文字が混在する場合

ひとつのthまたはtdに、画像と文字を一緒に使いたい場合は、次のサンプルコードのようにし、CSSで縦位置・横位置を設定します。

サンプルコード：

縦位置や横位置の配置については、「display: inline-block;」を使用したときと全く同じですので、過去の記事を参考にしてみてくださいね。そのままテーブルセルに入れるだけです。

テーブルに背景画像を設定する

テーブルに背景を設定したい時は、CSSで背景画像を設定します。
背景に使用する画像は「シームレス※」なものを使用しましょう。素材サイトで探す場合にも、このキーワードを入れて検索すると背景向きの画像を探すことができます。

サンプルコード：

左側のセルがシームレスな背景画像を使用したものです。CSS自体は簡単で、CSSで背景画像を読み込み、繰り返し（repeat）を設定しているだけです。

ボーダー（枠線）に背景画像をつける

テーブルのボーダーに画像を使用したいときは次の様になります。
ボーダーの背景は、CSS3のプロパティです。一部のブラウザで正常に動作しない場合がありますので、使用ブラウザで確認してから使用しましょう。

サンプルコード：

※テーブルの背景に画像を使用するときは、「border-collapse」を外します。

まとめ

以上でホームページでテーブルを作成するときの画像のあれこれはおしまいです。
テーブルは昔と比べて使用頻度は減りましたが、たまに使うと「あれ？どうするんだっけ」と思うことがあります。　是非参考にしてくださいね。

書いた人：

大人気！まいたけのホームページ作成関連記事はこちら：

• Twitter
• facebook
• Google+
• LINE