HTML のテーブルセル内に画像を追加

この記事では、HTML のテーブルセル内に画像を追加する方法を紹介します。

img タグを使用して、HTML の td 要素内に画像を追加する

テーブルデータである td 要素内の img タグを使用して、テーブルセル内に画像を追加できます。td タグは、テーブル内の各セルを定義します。

<td></td> 内のデータはすべて、テーブルセルのコンテンツです。img タグで画像ソースを指定できます。

<td>
 <img src="image.jpg">
</td>

これにより、テーブルセル内に image.jpg という名前の画像が表示されます。

たとえば、table タグを使用してテーブルを作成します。テーブルの境界線が表示されるように、border 属性に 3 の境界線を付けます。

次に、tr タグを使用して 3つのテーブル行を作成します。最初の tr はテーブルヘッダーth 用で、他の tr はテーブルデータ td 用です。

最初の tr テーブル行で、th タグを使用して、見出し Name、Address、および Image を指定します。次に、2 行目と 3 行目で、td 内に名前、住所、画像を指定します。

たとえば、2 番目の tr のテーブルデータとして Jack Austin と France を記述します。

次に、td 内に、上記のように img タグを作成し、画像を挿入します。同様に、2 行目のデータを入力します。

height および width 属性を使用して、img タグ内の画像の高さと幅を指定します。

以下の例は、テーブルセル内に画像を追加するための上記の命令の実装を示しています。テーブルには 3つの行があります。

最初の行には各列の見出しが含まれ、残りの行にはデータが含まれます。

img タグを使用して、表の 3 番目の列に画像を追加しました。画像を挿入した場所ならどこにでも img タグを書き込むことができることを学びました。

画像は HTML ファイルと同じフォルダ/ディレクトリにあると想定しています。正しい画像パスは、img タグの src で指定する必要があります。そうしないと、画像は表示されません。

サンプルコード：

<table border="3" align="center">
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Image</th>
  </tr>
  <tr>
    <td>Jack Austin</td>
    <td>France</td>
    <td><img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="" height=100 width=100 /></td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>United States</td>
    <td height=100 width=100><img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="" height=100 width=100 /></td>
  </tr>
</table>