画像付きテーブルを作る方法
画像付きテーブルを作る方法を紹介します。このサンプルでは、HTMLのtable要素を使い、各行に画像・商品名・価格をまとめて表示するテーブルを作成します。文字情報だけの表よりも内容を視覚的に確認しやすく、画像とデータを一緒に見せたい場合に利用できます。
ECサイトの商品一覧、管理画面の商品管理、料金比較、作品一覧、メニュー表など、画像と文字情報を横並びで整理したい場面に適しています。各商品の画像を左側に表示し、その右側へ商品名と価格を並べるため、どの情報がどの商品に対応しているのか分かりやすくなります。
HTMLでは画像ファイル、商品名、価格、行数を変更でき、CSSではテーブルの横幅、セルの余白、枠線、画像サイズ、角丸などを調整できます。画面幅が狭い場合はテーブル全体を横スクロールできるため、スマートフォン・タブレット・PCでも利用しやすい画像付きテーブルとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
商品画像と説明、価格をテーブルでまとめて表示しています。
| 画像 | 説明 | 価格 |
|---|---|---|
|
華やかな花々の香りを楽しめる商品です。 | ¥598 |
|
清潔感のある爽やかな香りを楽しめる商品です。 | ¥598 |
|
爽やかで自然な香りを楽しめる商品です。 | ¥598 |
各画像を同じ大きさの表示枠へ収め、テーブル内で画像サイズが揃うように表示しています。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>画像付きテーブル</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- テーブル全体 -->
<div class="image-table_wrap">
<!-- タイトル -->
<div class="image-table_title">
画像付きテーブル
</div>
<!-- 説明文 -->
<p class="image-table_text">
画像とテキストを組み合わせて表示できます。
</p>
<!-- 横スクロール用エリア -->
<div class="image-table_scroll">
<table class="image-table_table">
<thead>
<tr>
<th>画像</th>
<th>セル1</th>
<th>セル2</th>
</tr>
</thead>
<tbody>
<!-- 1行目 -->
<tr>
<td class="image-table_image-cell">
<div class="image-table_image-box">
<img
class="image-table_image"
src="images/image1.png"
alt="画像1">
</div>
</td>
<td>セル1</td>
<td>セル2</td>
</tr>
<!-- 2行目 -->
<tr>
<td class="image-table_image-cell">
<div class="image-table_image-box">
<img
class="image-table_image"
src="images/image2.png"
alt="画像2">
</div>
</td>
<td>セル1</td>
<td>セル2</td>
</tr>
<!-- 3行目 -->
<tr>
<td class="image-table_image-cell">
<div class="image-table_image-box">
<img
class="image-table_image"
src="images/image3.png"
alt="画像3">
</div>
</td>
<td>セル1</td>
<td>セル2</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルと、テーブル内へ表示する3枚の画像で構成されています。HTMLでは画像・セル1・セル2の3列を持つテーブルを作成し、各行の先頭へ画像を表示します。CSSではテーブルの横幅やセルの余白、枠線、画像表示エリアのサイズなどを設定し、画像の大きさが異なる場合でも同じ表示枠へ収まるようにしています。
sample/
├── index.html
├── style.css
└── images/
├── image1.png
├── image2.png
└── image3.png
各ファイルの役割
index.htmlは画像付きテーブル全体を構成するファイルです。見出し行には「画像」「セル1」「セル2」を配置し、その下へ3行のデータを表示します。各行ではimage1.pngからimage3.pngまでの画像と、「セル1」「セル2」の文字を表示しています。画像ファイル名やセル内の文章は用途に合わせて変更できます。
style.cssはテーブル全体のデザインを設定するファイルです。テーブルの最大横幅、セルの余白、枠線、見出しセルの背景色、画像列の横幅、画像表示エリアの大きさなどを変更できます。画像は指定した表示エリア内へ収まるように設定されています。
imagesフォルダにはテーブルへ表示する画像を配置します。このサンプルではimage1.png、image2.png、image3.pngの3枚を使用します。画像ファイル自体は利用者側で用意してください。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、その中へimagesフォルダを作成してください。imagesフォルダにはimage1.png、image2.png、image3.pngを配置します。画像ファイル名を変更する場合は、index.html内の各srcも実際のファイル名に合わせて変更してください。
配置が完了したらsample/index.htmlをブラウザで開きます。各行の左側へ画像が表示され、その右側へ「セル1」「セル2」の内容が並びます。画面幅が狭くテーブルが収まらない場合は、テーブル部分を横スクロールして確認できます。
カスタマイズできる内容
index.htmlでは見出しの「画像」「セル1」「セル2」、各行に表示する「セル1」「セル2」の文章、画像のsrcとaltを変更できます。行を追加・削除することで、テーブル内に表示する画像とデータの件数も調整できます。
style.cssではテーブル全体の最大横幅、セルの余白、枠線、見出しセルの背景色、画像列の横幅、画像表示エリアのサイズ、角丸などを変更できます。画像表示エリアの幅と高さを変更すれば、テーブル内に表示する画像の大きさを揃えて調整できます。
数値調整
style.css
max-width:760px;
画像付きテーブル全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。
margin:40px auto;
テーブル全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
テーブル全体を囲むエリアの内側余白です。値を大きくすると内容と外枠の間隔が広がります。
border-radius:18px;
テーブル全体を囲むエリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
min-width:620px;
テーブルの最小横幅です。値を大きくすると各列を広く確保でき、小さくするとテーブル全体が狭くなります。
padding:16px;
各セルの内側余白です。値を大きくするとセル内の余白が広がり、行や列が大きくなります。
width:180px;
画像列の横幅です。値を大きくすると画像列が広くなり、小さくすると狭くなります。
width:150px;
画像表示エリアの横幅です。値を大きくすると画像を表示する領域が横に広がります。
height:110px;
画像表示エリアの高さです。値を大きくすると画像を表示する領域が高くなります。
border-radius:8px;
画像表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:760pxによって、画面幅に合わせてテーブル全体が縮小されます。また、テーブルを囲む要素へoverflow-x:auto;を指定し、min-width:620px;のテーブルが画面内へ収まらない場合は横スクロールできるようにしています。640px以下では全体の内側余白を24px 18pxへ変更しているため、スマートフォン・タブレット・PCで利用できます。
コメント