テーブルのつくり方を詳しく解説

どーも、Koichiです!

 

この記事では商品ページにテーブル(表)を追加する手順について詳しく解説いたします。

 

 

この記事では

 

HTMLファイルのつくり方
HTMLタグの使い方
商品ページに画像やリンクを挿入する方法

 

を理解している前提でご説明いたします。

 

 

これらのやり方がわからない方は、
まずはじめに下記の記事を
上から順番にお読みいただければと思います。

 

HTMLファイルを簡単に方る方法をはじめから解説
商品説明文の体裁をHTMLで整える手順を詳しく解説
商品ページに画像やリンクを挿入する手順を詳しく解説

 

 

なお、この記事ではテーブルの細かな作成手順についてはご説明しません。

 

 

なぜなら、HTML関連の記事は
インターネット上にもう山ほどあるからです。

 

 

また、この記事はウェブデザイナーや
プログラマー向けではありません。

 

 

あくまで、輸入ビジネスで
商品ページをサクッと作って
すぐに売り上げに繋げていく。

 

 

これさえできれば良いですので、
必要最低限のことだけを
この記事でお伝えいたします。

 

 

このブログの手順通りに
すべてを再現できれば、
実際に商品を売って利益を上げられるようにする、
最終的には、そのようになるように
目指しています。

 

 

そのため、技術的なこと、
ビジネスと無関係なことは
できるだけ省き誰でもわかるよう、
簡略してお伝えすることに努めます。

 

 

なので、個人的にHTMLやテーブルについて
興味がある方は、別途検索して
お調べいただけましたら幸いです。

 

 

それではテーブル追加手順です。

 

テーブル追加

 

まず、下記の左側の欄に書かれているソースコードを
上から下まですべて選択し、コピーし、
前回作成したHTMLファイルに貼り付けします。

 

See the Pen tale by Koichi (@Yoshimine) on CodePen.

 

ちなみに、このテーブルを
インターネット上で実際に見ると
上記の右側のような水色の表になります。

 

↓こんな感じ。

 

 

これに前回前々回の記事で作成した
商品説明も追加して
商品ページを完成させてみます。

 

 

この商品ページを
ウェブ上で確認してみると
このようになります。

 

 

この記事に載っている
テーブルの文をそのままコピーして
自分で作成した商品ページにお使いください。

 

 

<td>とか<th>とか
HTMLのタグと呼ばれているものは
あえて覚えなくて大丈夫です。

 

 

これらのタグはいじらず、
「りんご」とか「いちご」とか「280円」とか
実際に商品ページ上で
表示されている部分のみ、
各商品に合わせてご変更ください。

 

 

ただ、

 

表内の列の数を増やしたい/減らしたい
行の数を増やしたい/減らしたい
「商品一覧」のタイトル部分だけ消したい
背景の色を変えたい
テーブルの線を消したい

 

など

 

 

最低限、自由に変更する必要性がある
箇所がいくつあります。

 

 

それらの調整の仕方については
順番にご説明いたします。

 

 

HTMLのタグを1つ1つ暗記する必要はありません。
この記事の手順に沿って行えば、
必要最低限の上記の調整は可能です。

 

 

万が一間違えてコードを書き換えてしまっても
大丈夫です。

 

 

この記事のコードをコピーして
原本としてお使いください。

 

 

それでは各手順です。

列の数を増やす/減らす

 

まずすでにある列をコピーし、
その下に貼り付けます。

 

 

次に Colspan の数を増えた列の数に合わせます。

 

例:3列なら Colspan=”3″、4列なら Colspan=”4″

 

 

すると変更後はこんな感じになります。

 

 

列を減らす場合は、先ほどの手順と逆です。

 

 

そして Colspan も減らします。

 

 

するとこんな感じになります。

 

 

行の数を増やす/減らす

 

<tr></tr>

 

この2つのタグに囲まれた部分が1行を表します。

 

 

行を増やす場合は、<tr></tr>までの範囲をコピーし、
その下に追加します。

 

 

すると実際の商品ページでも
このように行が追加されます。

 

 

行を減らしたい場合は、
<tr></tr>までの範囲を
そっくりそのまま削除すればOKです。

 

「商品一覧」のタイトル部分だけ消す

 

<tr>
<th align=”center” colspan=”3″>商品一覧</th>
</tr>

<tr></tr>で挟まれたこの部分を
まるまる削除します。

 

すると実際のページで
このように表示されます。

 

 

背景の色を変える

 

bgcolor=”#b0c4de”

この部分が色を表します。

 

 

「” ”」このカギカッコ内に指定された
色コードを書き換えます。

 

*色コードの書き換え方はこちらの記事で紹介しています。

 

 

例:
bgcolor=”#b0c4de” から
bgcolor=”#ffff00″へ変更

 

 

すると実際のページでは
こんな感じになります。

 

 

テーブルの線を消す

 

<border=”1″>

これがテーブルの線を表します。

 

 

テーブルの線を消す場合は、
border=1をそのまま削除します。

 

 

すると実際のページでは

 

こんな感じになります。

以上、テーブルについての説明になります。

テーブルはエクセルでも作れます。

ただし一度この方法を覚えたほうが、
個人的にはエクセルでテーブルを作るよりも、
HTMLのほうが遥かに作業が早く終わります。

 

なのでHTMLはじめての方は
最初は戸惑うかもしれませんが、
一度やり方を一通り覚えてしまえば、

あとは、少し調整するだけでずっと
1つの商品ページのテンプレートを
使い続けられるので、
結果的にはこっちのほうが楽と思います。

 

 

最後までお読みいただきありがとうございました!

 

 

HTMLファイルを簡単に方る方法をはじめから解説
商品説明文の体裁をHTMLで整える手順を詳しく解説
商品ページに画像やリンクを挿入する手順を詳しく解説
サクラエディタのインストール手順

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です