```html
HTMLで表に画像を挿入する方法
HTMLで表に画像を挿入するには、<img>
要素を使用します。 この要素は、表のセル内に配置する必要があります。
画像の挿入
表の各行の「画像」列の下に、<img>
要素を挿入します。 src
属性は、画像ファイルのパスを指定するために使用されます。 alt
属性は、画像が表示できない場合に備えて、代替テキストを提供します。 width
属性と height
属性は、画像のサイズを設定するために使用されます。
例
以下は、表に画像を挿入する例です。
<table>
<thead>
<tr>
<th>名前</th>
<th>説明</th>
<th>画像</th>
</tr>
</thead>
<tbody>
<tr>
<td>りんご</td>
<td>赤くて丸い果物です。</td>
<td><img src="apple.jpg" alt="りんごの画像" width="100" height="100"></td>
</tr>
<tr>
<td>バナナ</td>
<td>黄色くて曲がった果物です。</td>
<td><img src="banana.jpg" alt="バナナの画像" width="100" height="100"></td>
</tr>
</tbody>
</table>
このコードは、次の表を作成します。
名前 | 説明 | 画像 |
---|---|---|
りんご | 赤くて丸い果物です。 | |
バナナ | 黄色くて曲がった果物です。 |
よくある質問
Q1: 画像のサイズを変更するにはどうすればよいですか?
A1: width
属性と height
属性を使用して、画像のサイズを変更できます。これらの属性には、ピクセルまたはパーセンテージで値を指定できます。
Q2: 画像をセルの中央に配置するにはどうすればよいですか?
A2: <img>
要素を <div>
要素で囲み、その <div>
要素に text-align: center
スタイルを適用することで、画像をセルの中央に配置できます。
Q3: 表に複数の画像を挿入するにはどうすればよいですか?
A3: 各画像を別の <img>
要素で囲み、それらをすべて同じセル内に配置することで、表に複数の画像を挿入できます。画像は、水平または垂直に配置できます。
```