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

公開日:2018年02月17日 更新日:2018年04月06日 HTML・CSS基本やコツ

d08_eyecatch

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

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

 

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

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

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

サンプルコード:

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

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

テーブルの画像配置

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

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

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

<td class=”table-img”>
<img src=”https://homepagenopro.com/wp-content/uploads/2017/11/sample.png” alt=””>
</td>
<td class=”table-txt”>
テキスト<br>
テキスト<br>
テキスト
</td>

 

テキストが左、画像が右

<td class=”table-txt”>
テキスト<br>
テキスト<br>
テキスト
</td>
<td class=”table-img”>
<img src=”https://homepagenopro.com/wp-content/uploads/2017/11/sample.png” alt=””>
</td>

 

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

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

サンプルコード:

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

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

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

※シームレスな画像とは?
縦や横に繰り返し配置して使用するための画像で、繰り返したときの継ぎ目が上手く繋がるようにデザインされています。背景やパターンなどで使用します。

サンプルコード:

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

ボーダー(枠線)に背景画像をつける

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

サンプルコード:

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

まとめ

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

書いた人:

まいたけ

BtiesのWeb職人まいたけです。

Web制作歴は17年くらいの何でも屋。

Web/DTPデザイン・コーディングなど、制作を担当しています。


illustration: ©まいたけきの子


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

PAGE TOP