節約主婦のプチ稼ぎと住宅ローン返済の道のり。

ローン完済を目指して、 節約・投資・プチ稼ぎ・・・ 試行錯誤しているママの日記。

スポンサーサイト

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

応援おねがいします!励みになります
にほんブログ村 小遣いブログ プチ稼ぎへ 【トレミー】人気ブログランキング

[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

05.表(セル内の装飾)

表全体の背景色
<table align="center" width="300" bgcolor="#99ff99" style="border-color:#006600 ; border-style:double; border-width:3px ;">
<tbody>
<tr>
<td style="border:2px solid #00cc99" >1-1</td>
<td style="border:2px solid #00cc99" >1-2</td>
</tr>
<tr>
<td style="border:2px solid #00cc99" >2-1</td>
<td style="border:2px solid #00cc99" >2-2</td>
</tr>
</tbody>
</table>

1-1 1-2
2-1 2-2


セル毎の背景色
<table align="center" width="300" style="border-color:#006600 ; border-style:double; border-width:3px ;">
<colgroup><col width="150" /><col width="150" /></colgroup>
<tbody>
<tr>
<td style="border:2px solid #00cc99" bgcolor="#0000ff">青</td>
<td style="border:2px solid #00cc99" bgcolor="#ffff00">黄</td>
</tr>
<tr>
<td style="border:2px solid #00cc99" bgcolor="#00ffff">水色</td>
<td style="border:2px solid #00cc99" bgcolor="#ff00ff">ピンク</td>
</tr>
</tbody>
</table>

水色 ピンク


補足:当サイトの収入実績の表は、下記の色やサイズを変えて使用しています。
<table align="center" width="200" style="border-color:#006600 ; border-style:double; border-width:3px ;">
<colgroup><col width="100" /><col width="100" /></colgroup>
<tbody>
<tr>
<td align="center" style="border:2px solid #00cc99" bgcolor="#99ff99" colspan="2">タイトル</td>
</tr>
<tr>
<td style="border:2px solid #00cc99">●●●●●</td>
<td align="right" style="border:2px solid #00cc99">\999,999</td>
</tr>
<tr>
<td style="border:2px solid #00cc99">○○○○○</td>
<td align="right" style="border:2px solid #00cc99">\999</td>
</tr>
<tr>
<td style="border:2px solid #00cc99">■■■■■</td>
<td align="right" style="border:2px solid #00cc99">\0</td>
</tr>
</tbody>





応援おねがいします!励みになります
にほんブログ村 小遣いブログ プチ稼ぎへ 【トレミー】人気ブログランキング

スポンサーサイト
[ 2012/01/12 23:00 ] 初心者の部屋 表の作成 | TB(0) | CM(0)

04.表(表の大きさを指定する)

セル内の文字長さに関わらず、表の大きさを指定したい場合は、下記のようにします。

<table align="center" width="400" style="border-color:#006600 ; border-style:double; border-width:3px ;">
<tbody>
<tr>
<td style="border:2px solid #00cc99" >1-1</td>
<td style="border:2px solid #00cc99" >1-2</td>
</tr>
<tr>
<td style="border:2px solid #00cc99" >2-1</td>
<td style="border:2px solid #00cc99" >2-2</td>
</tr>
</tbody>
</table>

1-1 1-2
2-1 2-2




応援おねがいします!励みになります
にほんブログ村 小遣いブログ プチ稼ぎへ 【トレミー】人気ブログランキング

[ 2012/01/12 23:00 ] 初心者の部屋 表の作成 | TB(0) | CM(0)

03.表(列を連結する、行を連結する)

列を連結する
<table align="center" style="border-color:#006600 ; border-style:double; border-width:3px ;">
<colgroup><col width="100" /><col width="100" /></colgroup>
<tbody>
<tr>
<td style="border:2px solid #00cc99" colspan="2">1-1</td>
</tr>
<tr>
<td style="border:2px solid #00cc99" >2-1</td>
<td style="border:2px solid #00cc99" >2-2</td>
</tr>
</tbody>
</table>

1-1
2-1 2-2


行を連結する
<table align="center" style="border-color:#006600 ; border-style:double; border-width:3px ;">
<colgroup><col width="100" /><col width="100" /></colgroup>
<tbody>
<tr>
<td style="border:2px solid #00cc99" rowspan="2">1-1</td>
<td style="border:2px solid #00cc99" >1-2</td>
</tr>
<tr>
<td style="border:2px solid #00cc99" >2-2</td>
</tr>
</tbody>
</table>

1-1 1-2
2-2



応援おねがいします!励みになります
にほんブログ村 小遣いブログ プチ稼ぎへ 【トレミー】人気ブログランキング

[ 2012/01/12 23:00 ] 初心者の部屋 表の作成 | TB(0) | CM(0)

02.表(列幅を指定する、行高を指定する)

列幅を指定する

<table align="center" style="border-color:#006600 ; border-style:double; border-width:3px ;">
<colgroup><col width="20" /><col width="60" /><col width="100" /></colgroup>
<tbody>
<tr>
<td style="border:2px solid #00cc99">1-1</td>
<td style="border:2px solid #00cc99">1-2</td>
<td style="border:2px solid #00cc99">1-3</td>
</tr>
<tr>
<td style="border:2px solid #00cc99">2-1</td>
<td style="border:2px solid #00cc99">2-2</td>
<td style="border:2px solid #00cc99">2-3</td>
</tr>
</tbody>
</table>

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


行高を指定する
<table align="center" style="border-color:#006600 ; border-style:double; border-width:3px ;">
<tbody>
<tr>
<td style="border:2px solid #00cc99" height="70">1-1</td>
<td style="border:2px solid #00cc99" height="70">1-2</td>
<td style="border:2px solid #00cc99" height="70">1-3</td>
</tr>
<tr>
<td style="border:2px solid #00cc99" height="30">2-1</td>
<td style="border:2px solid #00cc99" height="30">2-2</td>
<td style="border:2px solid #00cc99" height="30">2-3</td>
</tr>
</tbody>
</table>

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


補足:全ての列に対して高さの指定をしていますが、1列のみでもOKです。
   但し、複数の列に対して高さの指定をしている場合に、値が異なると、最大の数値にあわせられます。



応援おねがいします!励みになります
にほんブログ村 小遣いブログ プチ稼ぎへ 【トレミー】人気ブログランキング

[ 2012/01/12 23:00 ] 初心者の部屋 表の作成 | TB(0) | CM(0)

01.表(2×3、3×2)

基本的な表を紹介します。

2×3の表
<table align="center" style="border-color:#006600 ; border-style:double; border-width:3px ;">
<tbody>
<tr>
<td style="border:2px solid #00cc99">   1-1</td>
<td style="border:2px solid #00cc99">   1-2</td>
<td style="border:2px solid #00cc99">   1-3</td>
</tr>
<tr>
<td style="border:2px solid #00cc99">   2-1</td>
<td style="border:2px solid #00cc99">   2-2</td>
<td style="border:2px solid #00cc99">   2-3</td>
</tr>
</tbody>
</table>

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


3×2の表
<table align="center" style="border-color:#006600 ; border-style:double; border-width:3px ;">
<tbody>
<tr>
<td style="border:2px solid #00cc99">   1-1</td>
<td style="border:2px solid #00cc99">   1-2</td>
</tr>
<tr>
<td style="border:2px solid #00cc99">   2-1</td>
<td style="border:2px solid #00cc99">   2-2</td>
</tr>
<tr>
<td style="border:2px solid #00cc99">   3-1</td>
<td style="border:2px solid #00cc99">   3-2</td>
</tr>
</tbody>
</table>

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


補足:線の種類(border-style
 none------ 表示無し(デフォルト)
 hidden---- 表示無し
       (例えば、テーブルのセルなどの枠線と重なり合ったときnoneは他の値を優先、
        hiddenは自分の値を優先)
 dotted---- 点線
 dashed---- 破線
 solid------実線
 double----二重線
 groove----線がへこんで見える
 ridge------線が浮き上がって見える
 inset------線より内側がへこんで見える
 outset-----線より内側が浮き上がって見える
自分のサイトに合うように、変更してください。



応援おねがいします!励みになります
にほんブログ村 小遣いブログ プチ稼ぎへ 【トレミー】人気ブログランキング

[ 2012/01/12 23:00 ] 初心者の部屋 表の作成 | TB(0) | CM(0)
TOP > CATEGORY - 表の作成
お知らせ
プチ稼ぎ|節約主婦0円からの挑戦!!
HPやっています。こちらもどうぞ、宜しくお願いします。
プロフィール

momokko2

Author:momokko2
2011年06月ブログ開設。

愛知県在住の専業主婦です。
2歳と3歳の娘に日々振り回されながらも、住宅ローン返済のために節約とプチ稼ぎやっています。

当サイトはリンクフリーです。

このブログをリンクに追加する
相互リンクについて


リサーチパネルへ2名様登録いただきました。GetMoney!へ2名様登録いただきました。マクロミルへ10名様登録いただきました。リンクシェアに4名様登録いただきました。チャンスイットに2名様登録いただきました。モラタメに3名登録いただきました。Tremii(トレミー)に1名様登録いただきました。げん玉に4名様登録いただきました。A8.netに2名様登録いただきました。アクセストレードに2名様登録いただきました。えんためねっとに2名様登録いただきました。モッピー(moppy)に1名様登録いただきました。ECナビに1名様登録いただきました。
ありがとうございます。

お気に入りに追加

ブログランキング
クリックして頂けると嬉しいです♪
励みになります。
facebookやっています!!
Momokko Petit


お友達、募集中です
相互Pingサーバー
メニュー
ECナビ
※300円から換金できるよ
リサーチパネル
※アンケートに答えると
ポイントがもらえるよ。
ポイントはECナビに合算されます♪
マクロミル
※アンケートはやっぱりマクロミル
フルーツメール
※メールを受信するだけでも
ポイントがたまります!
チャンスイット
※受信メールには
ポイントクジもあります
楽天銀行
※ネットバンクはやっぱり楽天!
免責事項
当サイトで紹介している情報は、最新のものとは限りません。
常に最新の情報を提供しようと努力はしておりますが、管理人も多忙な為、行き届いていない点が多々あるかと思います。情報に対する苦情はお控えください。当サイトを介しての登録及び登録後の如何なるトラブル、損害、損益に一切の責任を負負うことができませんのでご了承ください。

登録の際には、各サイトの利用規約等を確認し、全てご自分の責任において行ってください。宜しくお願いします。
訪問ありがとうございます

現在の閲覧者数:
げん玉


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。