1. カメラ
  2. カーオーディオ&エレクトロニクス
  3. ホームオーディオ
  4. パーソナルオーディオ
  5. テレビ
  6. スマートホーム
  >> 電子技術オンライン >  >> スマートホーム >> スマートライフ

HTML で製品カタログを作成する方法

テーブルは、HTML でオンライン カタログを作成する最も簡単な方法を提供します。 3 列の表には、製品の画像、説明、配送/注文情報を入力できます。表に情報を挿入すると、テキストの両端揃えに必要な時間が短縮されます。さらに、表を使用すると、ページ上の情報を囲む余白を制御して、Web サイトの外観と明瞭さを向上させることができます。

ステップ 1

開始

タグを使用して、1 ピクセルの境界線を持つテーブルを定義します。

ステップ 2

次のコードを使用して、セルの最初の行とその内容を挿入します:

ステップ 3

次のコードを使用して、2 行目のセルとその内容を挿入します:

ステップ 4

終了タグでテーブルを閉じます:

ヒント

この簡単な例では、2 つの行と 3 つの列を持つテーブルを作成します。最初の列には、タグを使用した製品の 60 x 60 ピクセルの画像が表示されます。 2 番目と 3 番目の列には、製品の説明と在庫情報が表示されます。各行は

で開始および終了することに注意してください タグと、行内の各項目が
これは最初のアイテムの説明です。 このアイテムは現在入手可能です。
これは 2 番目のアイテムの説明です。 このアイテムは入荷待ちです。
タグで開始および終了します。商品の説明に必要な数の列または行を挿入します。

テーブル定義のボーダー指定の直後に cellpadding コマンドを挿入して、テーブルのボーダーとコンテンツの間の空白の量を増やします。たとえば、

はテーブル内の各セルの内容の周りに 10 ピクセルの空白を作成します。