スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


関連カテゴリー
スポンサー広告 Trackback(-) | Comments(-) | [編集] | 投稿者 kyaro ri
ブログの表の見本~テーブルタグ~
ブログを作成する時に、まず最初につまづいたのが、表を作る事でした。

お小遣いブログを作る時には「表の作成」は出来たほうがいいので、ブログで表を作成する(テーブルタグの)見本になるように、少しだけ表を作ってみました。

ブログの記事の中に表を作る時は、テーブルタグというものを使わなくてはいけません。
めんどくさい・・・
けど頑張りましょう!

表ってなんだ~~~~!!

という方は、コピペして使ってやってください(*´∀`*)


ブログで表を作るときの注意点


ブログでテーブルタグを使って表を作成する時は改行の設定を「 HTMLタグのみ 」にしてください。
改行の設定を「 HTMLタグのみ 」にすると、改行するだけでは改行されなくなります。
なので、開業する場所に自分で  <br> と書くようにしましょう。

ちょっと面倒ですが、

改行=<br>

と覚えておきましょう!


ブログの表の作り方(テーブルタグの見本)


まず、サイト詳細の紹介で使っているこの表

1-1 1-2
2-1 2-2
3-1 3-2
4-1 4-2
5-1 5-2

<table align="center" style="border:2px dotted #ff6666;color:;font-size:15px;text-align:left;">
<tr>
<td style="border:2px solid #ffcc99">1-1</td>
<td style="border:2px solid #ffcc99">1-2</td>
</tr>
<tr>
<td style="border:2px solid #ffcc99">2-1</td>
<td style="border:2px solid #ffcc99">2-2</td>
</tr>
<tr>
<td style="border:2px solid #ffcc99">3-1</td>
<td style="border:2px solid #ffcc99">3-2</td>
</tr>
<tr>
<td style="border:2px solid #ffcc99">4-1</td>
<td style="border:2px solid #ffcc99">4-2</td>
</tr>
<tr>
<td style="border:2px solid #ffcc99">5-1</td>
<td style="border:2px solid #ffcc99">5-2</td>
</tr>
</table>


数字のところに文字を入れると、それにあわせて幅が延びます。
縦に項目を増やしたい時は、↓これを下に継ぎ足していけば縦長ーくなっていきます。

<tr>
<td style="border:2px solid #ffcc99">1-1</td>
<td style="border:2px solid #ffcc99">1-2</td>
</tr>





トップページやサイト一覧で使っている表

1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3

<table align="center" style="border:1px dotted #ff6666;color:;font-size:13px;text-align:center;">
<tr>
<td style="border:3px solid #ffcc99">1-1</td>
<td style="border:3px solid #ffcc99">1-2</td>
<td style="border:3px solid #ffcc99">1-3</td>
</tr>
<tr>
<td style="border:3px solid #ffcc99">2-1</td>
<td style="border:3px solid #ffcc99">2-2</td>
<td style="border:3px solid #ffcc99">2-3</td>
</tr>
<tr>
<td style="border:3px solid #ffcc99">3-1</td>
<td style="border:3px solid #ffcc99">3-2</td>
<td style="border:3px solid #ffcc99">3-3</td>
</tr>
</table>





タイトル付きとか・・・

タイトル
1-1 1-2
2-1 2-2


<table border bgcolor="#ff9999" cellpadding="2"cellspacing="3" width="400" style="border:2px dotted #ff3300;color:;font-size:13px;">
<tr align=center>
<td bgcolor="#ffcccc"colspan="2" style="border:1px solid #ffcccc"><FONT color=#ff3300>タイトル</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="border:1px solid #ffffff">1-1</td>
<td bgcolor="#ffffff" style="border:1px solid #ffffff">1-2</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="border:1px solid #ffffff">2-1</td>
<td bgcolor="#ffffff" style="border:1px solid #ffffff">2-2</td>
</tr>
</table>





メニューに使ったり・・・

タイトル
めにゅー 1
めにゅー 2
めにゅー 3


<table align="center" border bgcolor="#ccccff" cellpadding="2"cellspacing="1" width=150 style="border:2px dashed #0099ff;color:;font-size:13px;text-align:center;">
<tr>
<td bgcolor="#ccccff" style="border:1px solid #ccccff">タイトル</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="border:1px solid #ccccff">めにゅー 1</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="border:1px solid #ccccff">めにゅー 2</td>
</tr>
<tr>
<td bgcolor="#ffffff" style="border:1px solid #ccccff">めにゅー 3</td>
</tr>
</table>





枠だけ付けたい時とか・・・

文字に枠をつけたり・・・


<table align="center"style="border:4px dotted #ff6666; bgcolor="#ffffff">
<tr>
<td> 文字に枠をつけたり・・・</td>
</tr>
</table>





テーブルタグは分かってくると色々出来るようになります。

テーブルタグの自動作成ツールもあるので、利用してみてください。便利ですよ~♪
自動テーブルタグ制作はコチラでできます→初心者でも出来る簡単FC2ブログの作り方
関連記事


関連カテゴリー
表の作り方 Trackback:(0) | Comments:(7) | [編集] | 投稿者 kyaro ri
コメント
初めてのコメント頂き嬉しくなって訪問させて頂きました。
しっかりしたページで羨ましいです。
私も早く一人前になるべく勉強して頑張りますね。
お互いに頑張りましょっ!
私もまた遊びに来させて頂きますね(^^)
2009-09-22 火  17:45:01 |  URL | 未季 #- [編集]
未季さん

訪問&お褒めの言葉ありがとうございます!
しっかりしてますかね(^_^;)
もっと頑張ります~♪

2009-09-22 火  20:07:20 |  URL | きゃろり #8Eq7AU5U [編集]
こんばんは!こなつと申します。初コメントありがとうございました(^o^)/同じテンプレートに感謝☆(とはいえ、文字表示が崩れたのでさっき変えてしまったのですが…^^;)
こちらのブログ、本当に見やすく、私の知らなかった情報も満載で非常にためになります…!何より2ヶ月の間にこんなに記事が書けていることを尊敬します。
リンクを貼らせて頂きましたので、よろしければご確認下さい。
是非今後も、応援させて下さい。それでは!
2009-09-23 水  00:33:24 |  URL | こなつ #- [編集]
こなつさん
リンクありがとうございます(ノ´▽`)ノ♪
休止しちゃうんですね
残念です。
近況報告してくださいね!
楽しみにまってます♪
2009-09-23 水  13:56:03 |  URL | きゃろり #8Eq7AU5U [編集]
テーブル講座、とっても助かります。
ここでつまづいていて、ちっとも先に進めていないので……。
テーブルがあるのとないのとでは、ブログの見栄えにだいぶ差がありますものね。頑張ります~!
2009-09-25 金  12:30:30 |  URL | nyalala #G02beKtM [編集]
このコメントは管理人のみ閲覧できます
2010-02-18 木  23:58:08 |  URL |  # [編集]
こんにちは。
またまたきゃろりさんのブログを参考にさせて頂きながら、表を作ってみました。

なんとかできました。

少しずつですが、ブログにも慣れてきたところです。

勝手ながら、リンクを貼らせて頂きました。

今後もお世話になると思います。よろしくお願いします。


2011-06-01 水  14:12:00 |  URL | umimama #- [編集]
コメントの投稿


管理者にだけ表示を許可する

トラックバック

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



Copyright © 子育てしながらお小遣い稼ぎ ネットで内職 All Rights Reserved. Powered By FC2. 
skin:*cuteblog*    美容用品 /妊娠.出産
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。