ブログで表（table）を作成する方法

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

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

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

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

ブログでの表の作り方

ブログでの表の作り方

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

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

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

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

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

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

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

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

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

<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」というのが横幅なのでこれを確認しながら調整してみて下さい。以上これが表挿入の基本的な部分です。

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

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

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

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

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

それからもう１つ覚えておきたいのが余白の調整。右の説明文がセルの枠にくっついているので余白を付ける練習も加えておきましょう。セルの枠からの余白を作るには「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を入れた事で枠線にくっついていたテキストの周りに余白ができました。

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

align=”center”　中央寄せのタグ
colspan=”2″　横に２つのセルを連結するタグ。
rowspan=”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>