ブログを作成していると記事内に表を挿入したいという事がありますよね。ただ、表の挿入に関しては私も含めて苦手だと思う人も結構いると思います。
今回は記事内に表を挿入する方法を解説しますが、苦手な方は３０分程度練習したらある程度自分で考えて表を挿入できるようになると思います。まずは基本部分さえできれば応用は簡単なので実際にやってみると意外にできますよ。表を挿入できるようになると非常に幅も広がるのでおすすめです。
今回はあくまで無料ブログ（アメブロやシーサーブログ等）でのやり方です。WordPressの場合は既にCSSで「表の装飾」が入っているので、同じコードを入れても表示が異なるので注意。WordPressの場合はプラグインを利用して表作成をすると簡単です。
無料ブログに関してもきちんと表が反映されるように各ブログで設定や基本事項を確認しておきましょう。これをやっておかないと表が上手く表示されない事がありますし、表示がおかしくなる場合があります。
ブログでの表の作り方
それでは実際に基本的な部分を解説していきます。表の挿入には「tableタグ」というのが必要です。最初に覚えておくべきなのは次の４つ。
- tableタグ（表挿入のタグ）
- trタグ（列のタグ）
- td（行のタグ）
- border=”1″（枠線の太さ）
ここで、この４つが必要になる訳ですが、行や列が紛らわしいので読むよりも実際にやって見る事をおすすめします。ブログの記事内に次のコードを挿入してみましょう。最初に作るのは２×２のこんな感じのやつね。
1 2 3 4 5 6 7 8 9 | <table border="1"> <tr> <td>AAA</td> <td>BBB</td> </tr> <tr> <td>CCC</td> <td>DDD</td> </tr></table> |
このコードそれぞれの役割を翻訳してみたらこうなります。
1 2 3 4 5 6 7 8 9 10 | <table border="1"><!-- 表のスタート 枠に１pxの線を入れる --> <tr><!-- まずは１行目スタート --> <td>AAA</td><!-- 一行目に入れる項目をこのタグの間に入れる（列） --> <td>BBB</td><!-- 一行目に入れる項目をこのタグの間に入れる （列）--> </tr><!-- この終了タグを入れると１行目が終了 --> <tr><!-- ここから２行目ね。 --> <td>CCC</td><!-- ２行目に入れる項目をこのタグの間に入れる（列） --> <td>DDD</td><!-- ２行目に入れる項目をこのタグの間に入れる（列） --> </tr><!-- この終了タグで２行目終了 --> </table><!-- 表の挿入終わり --> |
これが基本になる。「ｔｒ」と「ｔｄ」をさらに増やしていけばで縦のセルと横のセルが増えていきます。それを「tableタグ」でサンドイッチする感覚です。
まあ、この表では面白くないので画像を入れてみましょうか。テキストの代わりに画像を入れてみるとこんな風にもできます。
これも要領は同じで２×２のセルにテキストだけでなく、画像を入れただけね。ちなみにソース。
1 2 3 4 5 6 7 8 9 10 | <table border="1"> <tr> <td align="center">Google</td> <td align="center">Yahoo!</td> </tr> <tr> <td>ここに画像を入れる</td> <td>ここに画像を入れる</td> </tr> </table> |
「align=”center”」というのを入れていますが、これは文字を中央に寄せるというタグです。それから挿入する画像のサイズの横幅が大きすぎると表が上手く表示されないので注意が必要です。大体画像を挿入するとこのようなタグになります。
1 | <img src="http://ドメイン/〇〇" width="××” height="××"> |
この中の「width」というのが横幅なのでこれを確認しながら調整してみて下さい。以上これが表挿入の基本的な部分です。
セルを統合して自由度を上げる
基本的な部分を理解した所で今度はセルを統合する方法を練習してみます。例えばこんな感じ。
まずはこのソースを見ながら解説しますね。
1 2 3 4 5 6 7 8 9 | <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」を加えて文字や画像の周りにスペースを作る事ができる訳です（数字を大きくすると余白も大きくなります）。
1 2 3 4 5 6 7 8 9 | <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」で文字色も変えてみましょう。実際にソースと見た目を確認してみると分かりやすいです。
1 2 3 4 5 6 7 8 9 | <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”）
という具合にやっている訳です。見た目はこのように表示されます。
このようにそれぞれの「td」の部分にそれぞれの背景色を入れる事でセルの１つ１つに背景色を入れる事もできます。
表の横幅を調整する
最後にこれも必要かも知れないので追記しておくと表の横幅を調整するタグは「width」というタグ。「width=”200″」のように書いて表の横幅を調整する事ができます。ただし、画像を挿入する場合には横幅を考えて画像を挿入する必要があります。表の横幅は「tableタグ」に付けておけばOK。
1 | <table border="1" width="200"> |
という感じで表をスタートすれば横幅200pxの表になるという具合です。
また、この「width」と言うタグは「tableタグ内」だけでなく１つ１つのセル「tdタグ内」にも書くことができますが、全体の横幅を考えながら調整する必要もでてきます。そのため、まずは表全体のサイズを事前に考えておいてから表の挿入をやってみる事をおすすめします。
以上表の作成の基本とアフィリエイトで使えそうなタグの基本をまとめておきました。本当はもっと細かい部分や色々なタグが存在しますが、とりあえずコレだけできれば自由に表を作って工夫できるようになるはず。多分。。
エミ様
コメントありがとうございます。tabelに関してはCSSなどで色の変更や文字の色なども変更できますが、使っているブログサービスによってやり方が違ってきます。無料ブログなどの場合はPCとスマホでのCSSも別々なのでそれぞれのCSSを編集する必要があるブログもあります。なのでもし良かったらブログのURLを教えて下さい。解決できるかはやってみないと分かりませんが、もし教えてもらえるのであれば挑戦してみます。コメント公開時にはURLは削除しますのでどうぞよろしくお願い致します。