ブログの中に表を作るぞ！の巻

今回はブログの中に表を作ります。こんなかんじです。

	商品購入金額の１０％
	予約１件につき３１９３円入会１件につき１９１６３円
	登録・稼動確認後に３５００円
	申込み１件につき１９００円
	初回来店で３００００円

うわ、なんなんすかこれ。ボロもうけじゃないですか！
まだアフィリエイトをやっていない君！すぐにはじめないか？
なに、ブログを持っていない？安心しろ A8.net ならタダですぐにブログもはじめられるぞ！

チョー、ショック！
この後の長い説明を２時間くらいかけて打ったのに、タブキー叩いたら全部飛んだ。
プログラミングする奴は普通にタブキー打つだろうよ！それくらい対策できねーのかよ、このエディタは！

と思って、保存してタブキー叩いてみたら飛ばない。何かのキーのパターンがあるのか？それにしてもオートセーブくらいかかりません？

失礼しました。気を取り直してはじめましょう。

まず最初に、テーブルの大外枠のタグを書いてしまいましょう。
大外枠といえばもうすぐダービーですね。いや、やめておきます。待たせてますので。

タグと言うのはよく見ると思うのですが、 < と > に囲まれたやつのことです。
具体的には、テーブルの場合

と書きます。
上が開始タグ、スラッシュが中にある下のが終了タグです。

この開始タグから、終了タグまでがテーブルになります。
テーブルのソースをこの開始タグと終了タグの間に入れていきます。
ソースと言うのは調味料ではなくって、いや、やめておきます。待たせてますので。

今回作るテーブルは５段組なので、段の開始タグと終了タグのセットを５個書きます。

こんな感じ。つまり段の
開始タグは <tr>
終了タグは < / tr> です。

各段にはアフィリエイトと料金説明の２項目あります。
そこで<tr>と</tr>の各組の中にマスのタグセットを２個ずつ入れることになります。
マスのタグは <td>< / td> のセットになります。

以下、見やすくするため文字の先頭をずらして書きます。

<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

５段組み、各段に２マスずつ。これで、テーブルの構造自体は完成です。
あとは、各マスの中にデータを入れていきます。

データですが、ソースを見るにあたって本物のアフィリエイトを書いてしまうとわけわからないので、説明文を入れます。

<table>
<tr>
<td>
サイズアップ・ペニス増大商品
</td>
<td>
商品購入金額の１０％
</td>
</tr>
<tr>
<td>
発毛・育毛無料体験
</td>
<td>
予約１件につき３１９３円
入会１件につき１９１６３円
</td>
</tr>
<tr>
<td>
高収入在宅チャットレディ
</td>
<td>
登録・稼動確認後に３５００円
</td>
</tr>
<tr>
<td>
ペット保険
</td>
<td>
申込み１件につき１９００円
</td>
</tr>
<tr>
<td>
亀頭増大,早漏,包茎の手術や治療
</td>
<td>
初回来店で３００００円
</td>
</tr>
</table>

では、これを実際に表示してみましょう。

サイズアップ・ペニス増大商品	商品購入金額の１０％
発毛・育毛無料体験	予約１件につき３１９３円入会１件につき１９１６３円
高収入在宅チャットレディ	登録・稼動確認後に３５００円
ペット保険	申込み１件につき１９００円
亀頭増大,早漏,包茎の手術や治療	初回来店で３００００円

なんか寂しい表示結果です。

HTMLはあくまでデータ構造ですので、HTMLとして見るなら、この表は正しいデータとして完成しています。(厳密にはまだ不足しているのですがそれに触れると先に進めないので)

ただ、もっといろいろレイアウトを加工したいことでしょう。
データの見た目、ルックスを整えるのはHTMLではなく、昨日までやってきたスタイルシートです。

ということで、レイアウトについてブログの表の見栄えを良くしたい！の巻（全３回）にまとめました。

参考記事：表テーブルが下がる原因と対処法

新ブログ「Big Bang」で続きを読む →

ここにブログの名前を入れます

広告

ブログの中に表を作るぞ！の巻

HTML、CSS、JavaScript、スパムと悪徳商材の対策