表の作り方~テーブルタグの作成その(3)表の大きさを変える~ 基本のテーブルタグです <table border> <tr> <td>基本のテーブルタグで...今回は、表の作り方の基本、表の数を増やす方法の説明をします。 私も表の作り方の勉強をかねて、テーブルタグの基本を紹介していきま~す(*´∀`*) 表の作り方~テーブルタグの作成その(2)表の数を増やす~ 基本のテーブルタグです   <table border> <tr> <td>基本のテーブルタグです</td> </tr> </table> 横に増える 横に増える 横に増える <td>...さてさて、最近やっとブログで表を作るための基本のテーブルタグの意味が解ってきました。 ブログに表を作りたい!! テーブルタグを使いたい!! と思っていれば、いずれできるようになるんだなぁ、と実感。 ブログに表が作れるようになるように、私の勉強もかねて、基本から説明していきます~(*´∀`*) 表の作り方~テーブルタグの作成その(1)色を変えてみる~ 基本のテーブルタグです <t..."/> 表の作り方 子育てしながらお小遣い稼ぎ ネットで内職
初心者さんおすすめお小遣いサイト~サイト別~

アンケートサイトでお小遣い稼ぎ
ネットでのお小遣い稼ぎ初心者さんは、まずアンケートサイトから始めまましょう!!
アンケートに答えるだけで稼ぐことが出来ます(*´∀`*)
おすすめです!

rain rain


rain rain

アンケートサイト詳細 アンケートサイト

ブログライターでお小遣い稼ぎ
ブログライターサイトで確実にお小遣い稼ぎをしましょう!!
ブログライターは、ブログに記事を書くだけで、必ず報酬が貰えます(*´∀`*)
おすすめです!!

rain rain


rain rain

ブログライターサイト

ポイントサイトでお小遣い稼ぎ
ポイントサイトで楽しくお小遣い稼ぎをしましょう!!
ポイントサイトは、毎日のコツコツした成果が必ず報酬として表れます(*´∀`*)
稼げる方法がたくさんあります!!



アフィリエイトでお小遣い稼ぎ
沢山の収入が欲しい方は、アフィリエイトでお小遣い稼ぎをしましょう!!
アフィリエイトでは稼ぎ方がいろいろあり、多くの収入を得る事ができます。

rain rain


rain rain

個別記事 アフィリエイトサイト

ネットで内職 広告配信サイトで稼ぐ
ブログに広告を貼ってお小遣い稼ぎをしましょう!!
広告配信サイトとは、広告をクリックされるだけで必ず報酬が貰えます(*´∀`*)






個別記事 メールサイト個別記事

ブログの作り方
ブログを作る時に参考になるよう、FC2ブログの登録方法からブログカスタマイズ方法まで掲載しています。
初心者が一から勉強していることなので、初心者さんのお役に立てるんじゃないかな??と思ってます(*´∀`*)

rain rain

rain rain

SEO対策・アクセスアップ
ブログを作る時に参考になるよう、初心者なりにSEO対策を掲載しています。
初心者が一から勉強していることなので、初心者さんのお役に立てるといいな、と思ってます。

rain rain

rain rain

カテゴリー [表の作り方]


ブログの表の見本~テーブルタグ~
ブログを作成する時に、まず最初につまづいたのが、表を作る事でした。

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

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

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

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


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


ブログでテーブルタグを使って表を作成する時は改行の設定を「 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
表(テーブル)の横に文字を書く方法
表の横に文字を入れる方法
表の横に文字を入れる方法
このように、表の横に文字を入れたいときには、<align="left">を入れてあげます。

表に対する説明文なんかを書きたいときに、横に書けるといいですよね(*´∀`*)
スペースの有効利用にもなります。
<align="left">を入れた後に、普通に文章を書いていくだけで、表の横に文字が入り、表の横のスペースが終わると、自動的に表の下に文章が書かれます。


<table align="left" border height="100">
<tr>
<td>表の横に文字を入れる方法</td>
</tr>
<tr>
<td>表の横に文字を入れる方法</td>
</tr>
</table>
このように、表の横に文字を入れたいときには、<align="left">を入れてあげます。<br>表に対する説明文なんかを・・・・・





表の横に文字を入れる方法
表の横に文字を入れる方法
このように、表を右に寄せ、その横に文字を入れたいときには、<align="right">を入れてあげます。

表に対する説明文なんかを書きたいときに、横に書けるといいですよね(*´∀`*)
スペースの有効利用にもなります。

を入れた後に、普通に文章を書いていくだけで、表の横に文字が入り、表の横のスペースが終わると、自動的に表の下に文章が書かれます。


<table align="right" border height="100">
<tr>
<td>表の横に文字を入れる方法</td>
</tr>
<tr>
<td>表の横に文字を入れる方法</td>
</tr>
</table>
このように、表を右に寄せ、その横に文字を入れたいときには、<align="right">を入れてあげます。<br>表に対する説明文なんかを・・・・・





真ん中に置くと、文字は書けないようです。(書けるのかな?分かりませんw)

表を中央寄せする方法
表を中央寄せする方法



<table align="center" border height="100">
<tr>
<td>表を中央寄せする方法</td>
</tr>
<tr>
<td>表を中央寄せする方法</td>
</tr>
</table>


表の作り方 Trackback:(0) | Comments:(5) | [編集] | 投稿者 kyaro ri
表の作り方~テーブルタグで表の形を変える方法~
今回は、表の形を変える方法の説明をします。 この辺から私もあんまり把握してないんで、勉強をかねてテーブルタグの説明をしていきます(*´∀`*)

がんばりましょう~(*´∀`*)

表の作り方~テーブルタグの作成その(4)表の形を変える~


基本のテーブルタグです

<table border>
<tr>
<td>基本のテーブルタグです</td>
</tr>
</table>






枠と文字の間隔を広げます

<table border cellpadding="10">
<tr>
<td>枠と文字の間隔を広げます</td>
</tr>
</table>

cellpadding="10"を入れると枠と文字の間隔が広がります。

このブログは、何かの設定で間隔が広がらないんですよね(。-`ω´-)ンー
なので、見本になってないんですけど、ちゃんと広がりますので・・・




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

<table border width="350">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>

3×3の横幅350の表を作ってみました。




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

<table border width="350">
<tr>
<td rowspan="3">1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
</tr>
</table>

縦につながりました。1-1の部分を3つつなげるには、<td>1-1</td>を、<td rowspan="3">1-1</td>に変えます
つなげたい数を入れると、その数だけ連結します。
その際に<td>3-3</td>と<td>2-3</td>はいらなくなります。




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

<table border width="350">
<tr>
<td colspan="2">1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>

横につながりました。1-1のっぶんを2つ横につなげるには、、<td>1-1</td>を、<td colspan="2">1-1</td>に変えます
つなげたい数を入れると、その数だけ連結します。
その際に<td>1-3</td>はいらなくなります。





これがわかれば、タイトルつきの表も作れるようになります(*´∀`*)

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

<table border cellspacing="3"width="350" bgcolor="#ff9999">
<tr>
<td colspan="3" bgcolor="#ffccff">1-1</td>
</tr>
<tr>
<td bgcolor="#ffffff">2-1</td>
<td bgcolor="#ffffff">2-2</td>
<td bgcolor="#ffffff">2-3</td>
</tr>
<tr>
<td bgcolor="#ffffff">3-1</td>
<td bgcolor="#ffffff">3-2</td>
<td bgcolor="#ffffff">3-3</td>
</tr>
</table>

cellspacing="3"枠を太くします
bgcolor="#ff9999"枠の色を変えます
colspan="3"横を3つつなげます
bgcolor="#ffccff"枠の中の色を変えます
<td bgcolor="#ffffff">枠の中の色を白にします




こんな感じです~
これで少しはアレンジして表を作ることができるんじゃないかなぁ・・・
皆さんも表作ってみてくださいね(*´∀`*)

あと、表を中央に寄せたいときは、align="center"を最初の<table ~~~>の~~のところに入れてくださいね。

表の作り方 Trackback:(0) | Comments:(6) | [編集] | 投稿者 kyaro ri
表の作り方~テーブルタグの基本 表の大きさを変える方法~
今回は、表の作り方の基本、表の大きさを変える方法の説明をします。

この辺からテーブルタグがちょっとややこしくなってくると思いますが、テーブルタグがわかれば、ブログに表を入れることができるようになるので、がんばりましょう~(*´∀`*)
、br>

表の作り方~テーブルタグの作成その(3)表の大きさを変える~


基本のテーブルタグです

<table border>
<tr>
<td>基本のテーブルタグです</td>
</tr>
</table>





枠を横に広げます


<table border width="400">を入れると、幅が広がります。
"400"の数字を変えるとその長さに変わります。

<table border width="400">
<tr>
<td>枠を横に広げます</td>
</tr>
</table>





枠を縦に広げます


<table border height="200">を入れると、縦幅が広がります。
"200"の数字を変えるとその長さに変わります。

<table border height="200">
<tr>
<td>枠を縦に広げます</td>
</tr>
</table>





枠を横に広げて中央に文字


中央に寄せたい枠の<tr>~<tr>を、<td align=center>~<tr>にします。
centerは真ん中
rightは右
leftは左
になります。
<table border width="400">
<tr>
<td align=center>枠を横に広げて中央に文字</td>
</tr>
</table>





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


複数の表ので、幅を400にしてみました。

<table border width="400">
<tr>
<td>1-1</td>
<td>2-2</td>
</tr>
<tr>
<td>3-3</td>
<td>4-4</td>
</tr>
</table>





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


複数の表ので、上の段を中央よせ、下の段は3-3だけ右寄せにしました。
<tr><tr align=center>に変えると、その行が全部中央よりになります。
<td><td align=right>に変えると、そのセルだけが右寄りになります。
何も指定がない場合は、左寄りになります。

<table border width="400">
<tr align=center>
<td>1-1</td>
<td>2-2</td>
</tr>
<tr>
<td align=right>3-3</td>
<td>4-4</td>
</tr>
</table>





こんな感じです~
次回は、セルの融合の仕方を紹介したいと思います~

表の作り方 Trackback:(0) | Comments:(0) | [編集] | 投稿者 kyaro ri
表の作り方~テーブルタグの基本 表の数を増やす方法~
今回は、表の作り方の基本、表の数を増やす方法の説明をします。

私も表の作り方の勉強をかねて、テーブルタグの基本を紹介していきま~す(*´∀`*)


表の作り方~テーブルタグの作成その(2)表の数を増やす~


基本のテーブルタグです

 
<table border>
<tr>
<td>基本のテーブルタグです</td>
</tr>
</table>




横に増える 横に増える 横に増える

<td>~</td>を増やして、横の列を増やします。
<table border>
<tr>
<td>横に増える</td>
<td>横に増える</td>
<td>横に増える</td>
</tr>
</table>




縦に増やす
縦に増やす
縦に増やす

<td>~</td>を増やして、縦の列を増やします。
<table border>
<tr>
<td>縦に増やす</td>
</tr>
<tr>
<td>縦に増やす</td>
</tr>
<tr>
<td>縦に増やす</td>
</tr>
</table>




上の二つを組み合わせると、こんな感じになります。
表ができました 表ができました 表ができました
表ができました 表ができました 表ができました
表ができました 表ができました 表ができました

<table border>
<tr>
<td>表ができました</td>
<td>表ができました</td>
<td>表ができました</td>
</tr>
<tr>
<td>表ができました</td>
<td>表ができました</td>
<td>表ができました</td>
</tr>
<tr>
<td>表ができました</td>
<td>表ができました</td>
<td>表ができました</td>
</tr>
</table>




こんな感じで表ができるんですよ~(*´∀`*)

次回は、表の大きさや枠の太さなどについて紹介したいと思ってます。

表の作り方 Trackback:(0) | Comments:(3) | [編集] | 投稿者 kyaro ri
表の作り方~テーブルタグの基本 色を変える方法~
さてさて、最近やっとブログで表を作るための基本のテーブルタグの意味が解ってきました。

ブログに表を作りたい!!
テーブルタグを使いたい!!

と思っていれば、いずれできるようになるんだなぁ、と実感。
ブログに表が作れるようになるように、私の勉強もかねて、基本から説明していきます~(*´∀`*)


表の作り方~テーブルタグの作成その(1)色を変えてみる~


基本のテーブルタグです

<table border>
<tr>
<td>基本のテーブルタグです</td>
</tr>
</table>




枠を太く、立体的にします

<table border="5">
<tr>
<td>枠を太く、立体的にします</td>
</tr>
</table>
<table border> を、<table border="5">に変えました。
数字が増えれば増えるほど太くなります。



枠を太くします

<table border cellspacing="5">
<tr>
<td>枠を太くします</td>
</tr>
</table>
<table border> を、<table border cellspacing="5">に変えました。
数字が増えれば増えるほど太くなります。



枠の中だけ色をつけます

<table border>
<tr>
<td bgcolor="#ff9999">枠の中だけ色をつけます</td>
</tr>
</table>
<tr>を、<td bgcolor="#ff9999">に変えました。
#ff9999のところ変えると枠の中の色が変わります。



枠にも色をつけます

<table border bgcolor="#660000">
<tr>
<td bgcolor="#ff9999">枠にも色をつけます</td>
</tr>
</table>
<table border>を、<table border bgcolor="#660000">に変えました。
これだけ変えると、表全体の色が変わりますので、併せて<tr>も変えます。

<tr>を、<td bgcolor="#ff9999">に変えました。
#ff9999のところ変えると枠の中の色が変わります。

これで、枠の色、中身の色が変わります。



枠だけに色をつけます

<table border bgcolor="#660000">
<tr>
<td bgcolor="#ffffff">枠だけに色をつけます</td>
</tr>
</table>
<tr>を、<td bgcolor="#ffffff">に変えました。
#ffffffこれは、白の色なんですが、中身の色は白に色指定しないと枠だけ色をつけることは出来ません。

自分のブログの背景の色と合わせた色指定をすると、枠だけに色をつけることが出来ます。



外枠を二重線しました
 
<table border bordercolor="#660000">
<tr>
<td >外枠を二重線しました</td>
</tr>
</table>
<table border bordercolor="#660000">にすると、外枠が二重になります。




こんな感じですが、タグって大変ですよね(;´д`)
解ってしまえば楽なんでしょうけど・・・。

もし間違いがあったりしたら教えてくれると助かります~♪

次回は、表の増やし方を書こうと思います(*´∀`*)


表の作り方 Trackback:(0) | Comments:(0) | [編集] | 投稿者 kyaro ri


Copyright © 子育てしながらお小遣い稼ぎ ネットで内職 All Rights Reserved. Powered By FC2. 
skin:*cuteblog*    美容用品 /妊娠.出産