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

HTMLのタグを使ってブログの中にテーブル(表)を作ります。
最終的には、外部スタイルシートと結びつけます。

スポンサーリンク


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

商品購入金額の10%
予約1件につき3193円
入会1件につき19163
登録・稼動確認後に3500円
申込み1件につき1900円
初回来店で30000円

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

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

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

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

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

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

<table>
</table>

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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


関連コンテンツ

スポンサーリンク

「ブログの中に表を作るぞ!の巻」への2件のフィードバック

  1. せっかく書いた記事が台無しですね!
    しばし放心状態です。
    ポチマルはファンブログのエディターは最後の最後に利用します。
    下書きはメモ帳に限ります!
    最後に吹っ飛んだら頭にきますから…!

  2. 天下のポチマルさん。はじめまして。コメントありがとうございます。返事遅くてすみません。

    自分も普段使ってるエディタに書こうかと思ったんですが、今回エンティティがやたら多いのでエンティティが即座に変換表示されるブログのエディタに頼ってしまいました。

    ブログのエディタに頼ったところもあるし結局自分が悪いんですけどね。

    どうもありがとうございます。このあと天下のポチマルさんのサイト拝見に行きます。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください