この記事では、HTML で表のセル内に画像を追加する手順を説明します。
HTMLでテーブルセル内に画像を追加する方法は?
HTML「 <画像> 」タグは、表のセルに画像を挿入するために使用されます。
構文
次の構文に従って、表のセル内に画像を埋め込みます。
< td >< 画像 ソース = '' すべての = '' 幅 = '' >< / td >
ここに：
- 「
」要素は、画像を追加する必要がある表のセルを示します。 - 「 <画像> 」タグを利用して画像を指定します。
- 「 ソース 」属性は、画像のパスを設定します。
- 「 すべての 」は、画像の読み込みに失敗した場合に画面に表示されるテキストを意味します。
- 「 幅 」は、画像の幅を決定します。
例
HTML ファイルで、提供された手順に従ってテーブルを作成します。
- 「 <テーブル> 」要素を利用してテーブルを作成します。
- 「
”要素は行を指定します。 - 「 <番目> 」は、「 コルスパン 」プロパティは、セルがカバーする必要がある列の数を示します。
- 「
」は、データのテーブル セルを作成します。 「 <画像> 」 必要な属性を持つタグがこのタグ内に挿入され、表のセルに画像が埋め込まれます。 < テーブル >
< トレ >
< 番目 コルスパン = '3' スタイル = 'フォントサイズ: 28px;' >果物と野菜< / 番目 >
< / トレ >
< トレ >
< 番目 >名前< / 番目 >
< 番目 スタイル = '幅: 250px;' >写真< / 番目 >
< 番目 >フルーツ / 野菜< / 番目 >
< / トレ >
< トレ >
< td >アップル< / td >
< td >< 画像 ソース = '/images/りんご.jpg' すべての = 'りんご' 幅 = 「200」 >< / td >
< td >フルーツ< / td >
< / トレ >
< トレ >
< td >ニンジン< / 番目 >
< td >< 画像 ソース = '/images/carrot.jpg' すべての = 'にんじん' 幅 = 「200」 >< / 番目 >
< td >野菜< / 番目 >
< / トレ >
< トレ >
< td >オレンジ< / 番目 >
< td >< 画像 ソース = '/images/orang.jpg' すべての = 'オレンジ' 幅 = 「200」 >< / 番目 >
< td >フルーツ< / 番目 >
< / トレ >
< / テーブル >埋め込まれた画像とともに HTML テーブルが正常に作成されていることがわかります。
CSS
ここで、テーブルのレイアウトを設定するために使用される CSS プロパティについて説明します。
スタイル「テーブル」要素
まず、「 <テーブル> 」要素をタグ名で検索し、次のプロパティを適用します。
テーブル {
テキスト整列 : 中心 ;
幅 : 800px ;
ボーダー崩壊 : 崩壊 ;
マージン : 自動 ;
フォントサイズ : 20px ;
}上記のコードの説明は次のとおりです。
- 「 テキスト揃え 」は、テキストの配置を設定します。
- 「 幅 」はテーブルの幅を決定します。
- 「 ボーダー崩壊 」プロパティは、境界線が折りたたまれているかどうかを定義します。
- 「 マージン 」は、テーブルの周りにスペースを追加します。
- 「 フォントサイズ 」は、表のテキストのフォント サイズを定義します。
スタイル「th」および「td」要素
番目 、 td {
国境 : 1px 個体 紫の ;
}ここで、「 国境 ” プロパティは、境界線の幅、スタイル、および色の値を指定して、要素の周囲の境界線を調整します。
出力
この投稿は、HTML のテーブル セルに画像を挿入することに関するものです。
結論
「」の中に画像を追加するには <テーブル> 」セル、「 <画像> ” HTML 内のタグ “
' エレメント。 「 」要素は「 ソース 」属性を使用して、画像の URL を提供します。より具体的には、画像サイズを調整するには、「 身長 ' と ' 幅 」属性を「
」タグ内に配置します。このブログでは、HTML テーブル セルに画像を追加する手順を説明しました。