ブログで表(table)を作成する方法

ブログを作成していると記事内に表を挿入したいという事がありますよね。ただ、表の挿入に関しては私も含めて苦手だと思う人も結構いると思います。

今回は記事内に表を挿入する方法を解説しますが、苦手な方は30分程度練習したらある程度自分で考えて表を挿入できるようになると思います。まずは基本部分さえできれば応用は簡単なので実際にやってみると意外にできますよ。表を挿入できるようになると非常に幅も広がるのでおすすめです。

今回はあくまで無料ブログ(アメブロやシーサーブログ等)でのやり方です。WordPressの場合は既にCSSで「表の装飾」が入っているので、同じコードを入れても表示が異なるので注意。WordPressの場合はプラグインを利用して表作成をすると簡単です。

無料ブログに関してもきちんと表が反映されるように各ブログで設定や基本事項を確認しておきましょう。これをやっておかないと表が上手く表示されない事がありますし、表示がおかしくなる場合があります。

スポンサーリンク
アフィリエイトBパートナー募集

ブログでの表の作り方

それでは実際に基本的な部分を解説していきます。表の挿入には「tableタグ」というのが必要です。最初に覚えておくべきなのは次の4つ。

  • tableタグ(表挿入のタグ)
  • trタグ(列のタグ)
  • td(行のタグ)
  • border=”1″(枠線の太さ)

ここで、この4つが必要になる訳ですが、行や列が紛らわしいので読むよりも実際にやって見る事をおすすめします。ブログの記事内に次のコードを挿入してみましょう。最初に作るのは2×2のこんな感じのやつね。

表-1

<table border="1">
<tr>
<td>AAA</td>
<td>BBB</td>
</tr>
<tr>
<td>CCC</td>
<td>DDD</td>
</tr></table>

このコードそれぞれの役割を翻訳してみたらこうなります。

<table border="1"><!-- 表のスタート 枠に1pxの線を入れる -->
<tr><!-- まずは1行目スタート -->
  <td>AAA</td><!-- 一行目に入れる項目をこのタグの間に入れる(列) -->
  <td>BBB</td><!-- 一行目に入れる項目をこのタグの間に入れる (列)-->
</tr><!-- この終了タグを入れると1行目が終了 -->
<tr><!-- ここから2行目ね。 -->
  <td>CCC</td><!-- 2行目に入れる項目をこのタグの間に入れる(列) -->
  <td>DDD</td><!-- 2行目に入れる項目をこのタグの間に入れる(列) -->
</tr><!-- この終了タグで2行目終了 -->
</table><!-- 表の挿入終わり -->

これが基本になる。「tr」と「td」をさらに増やしていけばで縦のセルと横のセルが増えていきます。それを「tableタグ」でサンドイッチする感覚です。

まあ、この表では面白くないので画像を入れてみましょうか。テキストの代わりに画像を入れてみるとこんな風にもできます。

表-4

これも要領は同じで2×2のセルにテキストだけでなく、画像を入れただけね。ちなみにソース。

<table border="1">
<tr>
  <td align="center">Google</td>
  <td align="center">Yahoo!</td>
</tr>
<tr>
  <td>ここに画像を入れる</td>
  <td>ここに画像を入れる</td>
</tr>
</table>

「align=”center”」というのを入れていますが、これは文字を中央に寄せるというタグです。それから挿入する画像のサイズの横幅が大きすぎると表が上手く表示されないので注意が必要です。大体画像を挿入するとこのようなタグになります。

<img src="http://ドメイン/〇〇" width="××” height="××">

この中の「width」というのが横幅なのでこれを確認しながら調整してみて下さい。以上これが表挿入の基本的な部分です。

セルを統合して自由度を上げる

基本的な部分を理解した所で今度はセルを統合する方法を練習してみます。例えばこんな感じ。

表-5

まずはこのソースを見ながら解説しますね。

<table border="1">
<tr>
  <td align="center" colspan="2">Google</td>
</tr>
<tr>
  <td>ここに画像を入れる</td>
  <td>ここに画像の説明文</td>
</tr>
</table>

ここでセルを統合するタグ「colspan」というのが登場します。「colspan」というのが横に何個セルを統合するか?というタグね。この場合2個のセルを横に統合したので「colspan=”2″」という風に書いてあります。縦に2個連結させたい場合は「rowspan=”2″」というような書き方になります。

それからもう1つ覚えておきたいのが余白の調整。右の説明文がセルの枠にくっついているので余白を付ける練習も加えておきましょう。セルの枠からの余白を作るには「cellpadding」というタグを使います。「tableタグ」に「cellpadding」を加えて文字や画像の周りにスペースを作る事ができる訳です(数字を大きくすると余白も大きくなります)。

<table border="1" cellpadding="10">
<tr>
  <td align="center" colspan="2">Google</td>
</tr>
<tr>
  <td>ここに画像を入れる</td>
  <td>セルを統合する事で画像の説明ができるようなレイアウト。ランキングサイトや比較サイトを作る時に役に立つと思われる。</td>
</tr>
</table>

cellpaddingを入れた事で枠線にくっついていたテキストの周りに余白ができました。

表-6

ここで一度大事なタグをまとめておきましょう。

  • align=”center” 中央寄せのタグ
  • colspan=”2″ 横に2つのセルを連結するタグ。
  • rowspan=”2″ 縦に2つのセルを連結するタグ
  • cellpadding=”10″ セル内に余白を作るタグこの場合10pxの余白

それぞれのセルに背景色を付ける方法

それでは表挿入の応用編としてセルに背景色を付ける方法も紹介しておきます。セルの背景色を入れるタグは「bgcolor」というタグ。一緒に文字色を変えるタグ「font color」で文字色も変えてみましょう。実際にソースと見た目を確認してみると分かりやすいです。

<table border="1" cellpadding="10">
<tr>
  <td align="center" colspan="2" bgcolor="#2A7FAA"><font color="FFFFFF">Google</font></td>
</tr>
<tr>
  <td>ここに画像を入れる</td>
  <td>画像の説明文</td>
</tr>
</table>
  • 1列目でセルを連結(colspan)
  • このセルのテキストはセンター寄せ(align=”center”)
  • このセルの背景色を藍色に変更(bgcolor=”#2A7FAA)
  • このセルのテキストの文字色を白に変更(font color=”FFFFFF”)

という具合にやっている訳です。見た目はこのように表示されます。

表-7

このようにそれぞれの「td」の部分にそれぞれの背景色を入れる事でセルの1つ1つに背景色を入れる事もできます。

表の横幅を調整する

最後にこれも必要かも知れないので追記しておくと表の横幅を調整するタグは「width」というタグ。「width=”200″」のように書いて表の横幅を調整する事ができます。ただし、画像を挿入する場合には横幅を考えて画像を挿入する必要があります。表の横幅は「tableタグ」に付けておけばOK。

<table border="1" width="200">

という感じで表をスタートすれば横幅200pxの表になるという具合です。

また、この「width」と言うタグは「tableタグ内」だけでなく1つ1つのセル「tdタグ内」にも書くことができますが、全体の横幅を考えながら調整する必要もでてきます。そのため、まずは表全体のサイズを事前に考えておいてから表の挿入をやってみる事をおすすめします。

以上表の作成の基本とアフィリエイトで使えそうなタグの基本をまとめておきました。本当はもっと細かい部分や色々なタグが存在しますが、とりあえずコレだけできれば自由に表を作って工夫できるようになるはず。多分。。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

ブログで表(table)を作成する方法”に13件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    エミ様

    コメントありがとうございます。tabelに関してはCSSなどで色の変更や文字の色なども変更できますが、使っているブログサービスによってやり方が違ってきます。無料ブログなどの場合はPCとスマホでのCSSも別々なのでそれぞれのCSSを編集する必要があるブログもあります。なのでもし良かったらブログのURLを教えて下さい。解決できるかはやってみないと分かりませんが、もし教えてもらえるのであれば挑戦してみます。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。

  2. エミ

    しげぞうさん

    こんばんは。
    初心者なので、簡単な内容だと思うのですが、教えてください。
    しげぞうさんの記事を参考にtableをつくったのですが、文字が薄いのと縦線が表示されなかったのですが、もう少し濃い文字で縦線を表示させるにはどのようにしたらよいでしょうか。

    どうぞよろしくお願い致します。

  3. okinagatarashi

    しげぞう様
    こんにちは!毎度ッ!ごめんなさい!
    即解決!ありがとうございます。
    上だけ消えて、次は中の線だけ消えて…、結局上だけ消えて…
    神様、見捨てないでくれてありがとう!( *´艸`)
    本当にいつもありがとうございます。
    これからも、お行儀よくしますので宜しくお願いします。

  4. しげぞう 投稿作成者

    okinagatarashi様

    コメント毎度ありがとうございます。ホントですね、上の線だけ消えてる。スタイルシートに以下のコードを追加して試して見て下さい。

    .entry-content td {
        border: none !important;
    }

    これで他の線も消えると思いますが、万が一反映されない場合にはお手数ですが再度コメント下さい。

  5. okinagatarashi

    しげぞう様
    こんにちは!いつもお世話になっています。
    お好きなテーマではないので、いつもより恐縮しますが、HELP!お願います。
    以前に罫線の消し方を教えて頂いた事が有りました。
    テーマを変えてしまった事で、以前のコードが無効みたいです。
    以前のコード
    /* 罫線 */
    .entry-content table {
    border: none !important;
    }
    を、入れると上の横線が消えます。

    /* — 罫線 — */
    .entry-content table {
    width: 100%;
    margin-bottom: .714286em;
    border: none !important;
    border-collapse: collapse;
    }
    これもダメで、
    の線が消えてくれないので、
    再度、見て頂けませんでしょうか?
    お忙しい事と思いますが、宜しくお願いします。

  6. しげぞう 投稿作成者

    りた様

    返信ありがとうございます。スプレッドシートは私も使い始めたのは最近なんですが、結構色々使えるので便利ですよね。是非活用して見て下さい。また何かありましたらコメント下さいませ。

  7. りた

    しげぞう様

    ご返信、誠にありがとうございます。
    【スプレッドシート】初めて知りました!めちゃくちゃ便利でびっくりしました!!!!!
    昨日グーグルアナリティクスを掲載することが違反であることがわかり、軽く絶望していたのですが、これで解決できました!!!!
    グラフもこれで簡単に作れます。

    グーグルアナリティクス恐ろしいです。もっと機能について学ぶべきことがあるな、と思いました。本当にしげぞう様に相談してよかったです!!!!

    今後共、宜しくお願い致します。

  8. しげぞう 投稿作成者

    りた様

    返信ありがとうございます。PV報告などはGoogleのスプレッドシートなどを使ってグラフで表示させたらいいかもしれません。私も別ブログでアンケート結果などをグラフを画像として使ってますが、結構面白いですし、見やすいです。一度試してみても良いかと思います。

  9. りた

    しげぞう様

    りたです。迅速なご回答、誠にありがとうございます。
    一ヶ月毎のブログアクセス数やPVの報告記事のみ、表を使おうと思っていたのですが、予想以上に面倒臭い上に時間帯効果が薄いので、やめることにしました笑
    しげぞう様のお陰で踏ん切りが付きました。ありがとうございます。

    また何か質問すると思いますが
    今後共、宜しくお願い致します。

  10. しげぞう 投稿作成者

    りた様

    コメントありがとうございます。TinyMCE Advancedで表を挿入するという事ですが、私自身TinyMCE Advancedは使わずに表を作成していますので、ちょっと詳しくは分かりません。表のCSSに関しては以前もCSSで使った「!important」を付けて優先的に反映すると上手くいくかもしれません。

    ただ、表の挿入自体は簡単なんですが、スマートフォンなどで見た時にも上手く表を見せるにはもっとCSSでの記述が必要になるかもしれません。私自身はレスポンシブで表を使う事があまりありません。スマートフォンなどのレイアウトを考えるのが面倒なので、できるだけ画像を多用してます。

    あまり参考にならずすみません。

  11. りた

    しげぞう様

    りたです。いつもお世話になっております。
    本日はwordpressにおける表の作り方に関する質問をしたく、ご連絡差し上げました。

    TinyMCE Advancedを用いて表を作成しているのですが、セルにおける幅・線の太さや色の変更が反映されず、苦戦しております。高さの変更は反映されております。

    現在変更したプログラムはcssの.entry-content td, .comment-content td {
    border-top:⇒border}です。

    また表のプログラムは

     aa
     aa

     aa
     aa

    です。

    ご教授して頂ければ、幸いです。
    何卒宜しくお願い致します。

  12. しげぞう 投稿作成者

    >豊臣様

    コメントありがとうございます。私も始めた頃は本を読んだりネットで検索したりしたのですが、理解がとても遅いタイプなので、1つの事を理解するのにとても時間がかかります(笑)。1つ理解するために色々なサイトで調べたり実際に自分で試してみてという過程を経てようやく1つ理解できるような状態です。そのため、この自分でも分かるようにメモしたのがこのブログのスタートでもありますので、このようなコメントを頂けると本当に嬉しく思います。わざわざありがとうございます。

    今後ともどうぞよろしくお願い致します。

  13. 豊臣

    貴方のサイトは素晴らしです
    書店に並ぶアフリィエイト入門より、解りやすく、尚且つ
    実践向きに構成されていますね、
    このサイトを手本に、ブログを立ち上げて、実践しています
    私は感謝の気持ちでいっぱいです、
    ありがとうございます。