ブログ記事欄に表(テーブル)を書く方法(基礎編) | ちょっとした「Webお役立ち情報」とかを主に書いてます。

ちょっとした「Webお役立ち情報」とかを主に書いてます。

ネットで調べて、「わかったこと」を備忘録の代わりのメモ帳のようにして使ってます。

$やさしいアメブロカスタマイズ!と女性タレント画像-600x400


以前、書いた、「表(テーブルタグ)の書き方」ではちょっと解りにくいかな~なんて思って、新たに書き直してみました。

【基本形】です。

「ブログを書く」で「HTML表示」にして(タグ編集エディタを採用されている方はそのままで)、以下の文字列を記入して下さい。

<table border=1><tr><td>1番</td></tr></table>


「プレビュー」あるいは「表示を確認する」では、

1番
 
このように表示されます。

これが基本形です。

赤い太字の部分の数字を大きくすると枠線が太くなります。

1番



次に、表らしく、この枠をいくつか並べてみたいと思います。

【応用形】枠(セル)を並べます。

①横に並べる場合です。

<table border=1><tr><td>1番</td><td>2番</td></tr></table>


「プレビュー」あるいは「表示を確認する」では、

1番2番

このように表示されます。


②縦に並べる場合です。

<table border=1><tr><td>1番</td></tr><tr><td>2番</td></tr></table>


「プレビュー」あるいは「表示を確認する」では、

1番
2番

このように表示されます。

この記述の中の「<td>~</td>」と言う部分が一個の枠(行)を示しています。それを囲んでいる「<tr>~</tr>」の部分が列を指定しています。(この囲われた枠の事をセルと呼ぶみたいです)

③枠を追加して並べていく場合です。
<table border=1><tr><td>1番</td><td>2番</td></tr><tr><td>3番</td><td>4番</td></tr></table>


「プレビュー」あるいは「表示を確認する」では、

1番2番
3番4番

このように表示されます。

・・・

例:表題(小見出し・・)と説明文を表にする場合

表題①ー1ああああああああああ
表題②いいいいいいいい
表題③うう


これのタグは、こちらです

<table border=1><tr><td>表題①ー1</td><td>ああああああああああ</td></tr><tr><td>表題②</td><td>いいいいいいいい</td></tr><tr><td>表題③</td><td>うう</td></tr></table>

1舛(セル)ごとに<td>~~</td>で囲み、それを1行ごとに、<tr><td>表題①ー1</td><td>ああああああああああ</td></tr>で囲みます。
※セルの横幅は、その列の一番長い箇所のものになります。


※これを更に表らしくする方法は、こちらです⇒テーブルタグ応用編


・ただ、この方法だと、自分のスマホで見た場合、スマホ表示だと枠が表示されず、縦一列になってしまいました。また、同じものを、gooブログに貼り付けたら枠が表示されませんでした。

お使いの端末の機種の違いや、サイト側の仕様で反映されなかったりするようです。

ブログに表を書く方法って、他にもエクセルを使ったりとか色々あるみたいですが、一つの参考として頂ければと思います。


☆ブィブィ ゞ(^∇^)

ワンタンさんをフォロー

ブログの更新情報が受け取れて、アクセスが簡単になります

Ameba人気のブログ