表組みの作り方

資産運用関連のブログを作っていると金融商品ごとの一覧を作成する機会があります。スクリーンショットを張り付けたり、エクセルでリストを作ってからhtmlに変換したりする方法がありますが、エディタ上でも表組みを使うことによって手軽にリストを作成することができます。

以下はあるブロガーさんのあるリストですが、エディタ上できれいに配置していてもブラウザで開くと文字ごとの幅の違いにより列がずれてしまいます。


・楽天 USリート・トリプルエンジン(レアル)毎 24,425円 - 3.03%
・楽天 日本株トリプル・ブル         215,538円 +26.79%
・JF 店頭株オープン'96            31,132円 +24.53%
・ひふみ投信                19,856円 - 0.72%
・eMAXIS国内債券インデックス         9,875円 - 1.25%
 計                    300,826円 +20.26%



こういう場合にはtableタグを使って表組みを作ると;


・楽天 USリート・トリプルエンジン(レアル)毎 24,425円 - 3.03%
・楽天 日本株トリプル・ブル 215,538円 +26.79%
・JF 店頭株オープン'96 31,132円 +24.53%
・ひふみ投信 19,856円 - 0.72%
・eMAXIS国内債券インデックス 9,875円 - 1.25%
300,826円 +20.26%


きれいに列をそろえることができました。

この表組みは以下のソースをエディタに張り付けることにより作成できます。適宜改行やスペースを入れるとより見やすくなると思います。


<table border=0 cellpadding=0 cellspacing=2> <tr><td>・楽天 USリート・トリプルエンジン(レアル)毎 </td><td align="right">24,425円 </td><td align="right">- 3.03% </tr><tr><td>・楽天 日本株トリプル・ブル </td><td align="right">215,538円 </td><td align="right">+26.79% </tr><tr><td>・JF 店頭株オープン'96 </td><td align="right">31,132円 </td><td align="right">+24.53% </tr><tr><td>・ひふみ投信 </td><td align="right">19,856円 </td><td align="right">- 0.72% </tr><tr><td>・eMAXIS国内債券インデックス </td><td align="right">9,875円 </td><td align="right">- 1.25% </tr><tr><td>計 </td><td align="right">300,826円 </td><td align="right">+20.26% </td></tr></table>
ちなみに、列を追加する場合は<td>~</td>を、行を追加する場合は<tr>~</tr>をコピーして挿入してください。

"right"と書いてあるのは「右寄せ」を意味します。デフォルトは左寄せです。センタリングは"center"に変えるとできます。

関連記事

コメント

No title

ご親切にありがとうございます。おかげさまで揃った表ができました。

No title

>夢見る父さん さん

どういたしまして。お役に立てて何よりです。

コメントの投稿

トラックバック


この記事にトラックバックする(FC2ブログユーザー)