ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > タグのお勉強 > title - 表を応用して色々つくろう

表を応用して色々つくろう

表の作り方を覚えたら、テーブルタグを利用して色々な物が作れるようになります。せっかく覚えたのだから、いろいろ工夫して作って自分のブログをより良くしましょう!

どんな物が作れるのかを少し紹介したいと思います。

タイトル
ここに文字を書く
ここに文字を書く
ここに文字を書く
ここに文字を書く

<table width="180" height="150" 
cellpadding="4" cellspacing="1" border="2" 
bordercolor="#3F5FBF" bgcolor="#ffffff">
<tr>
<td align="center" bgcolor="#9999ff" 
style="font-size:15px;">タイトル</td>
</tr>
<tr>
<td bgcolor="#ffffff"style="font-size:13px;">
ここに文字を書く<br>
ここに文字を書く<br>
ここに文字を書く<br>
ここに文字を書く<br></td>
</tr>
</table>

ちょっとしたまとめなど、色々な場面で使うことができる便利なテーブルです。

タイトル
・文字を書く
・文字を書く
・文字を書く
・文字を書く

<table><tr><td>
<table align="center"cellspacing="0" 
bgcolor="#FFDAB9" height="1" width="190">
<tr><td></td></tr></table>
<table align="center"cellspacing="0" bgcolor="#FFDAB9" 
height="1" width="192">
<tr><td></td></tr></table>
<table align="center"cellspacing="0" bgcolor="#FFDAB9" 
height="1" width="194">
<tr><td></td></tr></table>
<table align="center"cellspacing="0" bgcolor="#FFDAB9" 
height="1" width="196">
<tr><td></td></tr></table>
<table align="center"cellspacing="0" bgcolor="#FFDAB9" 
height="2" width="198">
<tr><td></td></tr></table>
<table align="center"cellspacing="4" cellpadding="5" 
bgcolor="#FFDAB9" width="200" style="font-size:13px;">
<tr><td align="center">
タイトル
</td></tr><tr><td bgcolor="#ffffff">
・文字を書く<br>
・文字を書く<br>
・文字を書く<br>
・文字を書く<br>
</td></tr></table>
<table align="center"cellspacing="0" bgcolor="#FFDAB9" 
height="3" width="200">
<tr><td></td></tr></table>
</td></tr></table>

上のとものとほぼ同じで、角が丸いテーブルです。横長の細いテーブルを少しずつ長くしながら並べて、角が丸くなるようにしています。

・メニュー
・メニュー
・メニュー
・メニュー
・メニュー

<table border bgcolor="#ffbbff" bordercolor="#ff11ff" 
cellpadding=4 cellspacing=2 style="color:
#666666;font-size:13px;"width="120">
<tr>
<td bgcolor="#ffffff" >・メニュー</td>
</tr>
<tr>
<td bgcolor="#ffffff" >・メニュー</td>
</tr>
<tr>
<td bgcolor="#ffffff" >・メニュー</td>
</tr>
<tr>
<td bgcolor="#ffffff" >・メニュー</td>
</tr>
<tr>
<td bgcolor="#ffffff" >・メニュー</td>
</tr>
</table>

メニューを並べたりする時に使えそうなテーブルです。

プロフィール
名前 ここに書く
年齢 ここに書く
性別 ここに書く
血液型 ここに書く
誕生日 ここに書く
趣味 ここに書く

<table border=3 bgcolor="#FFC000" width="250" 
cellspacing="1" cellpadding="5" style="font-size:14px;">
<tr>
<td style="border:3px outset #d2b596"
bgcolor="#d2b596"align="center" colspan="2">
プロフィール</td>
</tr>
<tr><td style="border:3px outset #d2b596"
bgcolor="#d2b596" align="center">名前</td>
<td bgcolor="#ffffff">ここに書く</td></tr>
<tr><td style="border:3px outset #d2b596"
bgcolor="#d2b596" align="center">年齢</td>
<td bgcolor="#ffffff">ここに書く</td></tr>
<tr><td style="border:3px outset #d2b596"
bgcolor="#d2b596" align="center">性別</td>
<td bgcolor="#ffffff">ここに書く</td></tr>
<tr><td style="border:3px outset #d2b596"
bgcolor="#d2b596" align="center">血液型</td>
<td bgcolor="#ffffff">ここに書く</td></tr>
<tr><td style="border:3px outset #d2b596"
bgcolor="#d2b596" align="center">誕生日</td>
<td bgcolor="#ffffff">ここに書く</td></tr>
<tr><td style="border:3px outset #d2b596"
bgcolor="#d2b596" align="center">趣味</td>
<td bgcolor="#ffffff">ここに書く</td></tr>
</table>

プロフィールを書くのも、表で紹介した方が見やすいかも知れませんね。

☆彡タイトル☆彡

<table width="440" cellspacing="2" cellpadding="3" border 
bordercolor="#333333" bgcolor="#FF4500">
<tr><td bgcolor="#FFA07A">
<table width="100%" cellspacing="2" cellpadding="6" border 
bordercolor="#333333" bgcolor="#fFFDAB9" style=
"font-size:20px;color:#222222;">
<tr><th bgcolor="#ffffff">
☆彡タイトル☆彡
</th></tr></table
</td></tr></table>

タイトルを紹介する時に、このような看板みたいな物があるといいかも知れません。


<table border cellspacing="0" bgcolor="#4169E1">
<tr bgcolor="#87CEEB">
<td width="20" height="10">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
</td><td width="20">
/td></tr></table>

記事などの話題の境目などに使うと効果的な線です。

タイトル
ここに文字を書く
ここに文字を書く
ここに文字を書く
ここに文字を書く
ここに文字を書く
ここに文字を書く

<table width="300" cellspacin="0" 
cellpadding="0" style="border:solid 1px 
#ffffff;"align="center">
<tr><td bgcolor="#ffffff">
<table bgcolor="#ffffff" cellspacing="1" cellpadding="4" 
style="font-size:15px;">
<tr><td width="3" bgcolor="#99f999"></td>
<td width="3" bgcolor="#bbfdbb"></td>
<td align="center" bgcolor="#aaf9aa"width="288">
タイトル</td>
<td width="3" bgcolor="#bbfdbb"></td>
<td width="3" bgcolor="#99f999"></td></tr>
<tr><td width="3" bgcolor="#bbfdbb"></td>
<td width="3" bgcolor="#99f999"></td>
<td bgcolor="#ddffdd"width="288"style="font-size:13px;">
<font color="#66f166">■</font>
ここに文字を書く</td>
<td width="3" bgcolor="#99f999"></td>
<td width="3" bgcolor="#bbfdbb"></td></tr>
<tr>
<td width="3" bgcolor="#99f999"></td>
<td width="3" bgcolor="#bbfdbb"></td>
<td bgcolor="#ddffdd"width="288"style="font-size:13px;">
<font color="#66f166">■</font>
ここに文字を書く</td>
<td width="3" bgcolor="#bbfdbb"></td>
<td width="3" bgcolor="#99f999"></td></tr>
<tr>
<td width="3" bgcolor="#bbfdbb"></td
<td width="3" bgcolor="#99f999"></td>
<td bgcolor="#ddffdd"width="288"style="font-size:13px;">
<font color="#66f166">■</font>
ここに文字を書く</td>
<td width="3" bgcolor="#99f999"></td>
<td width="3" bgcolor="#bbfdbb"></td></tr>
<tr>
<td width="3" bgcolor="#99f999"></td>
<td width="3" bgcolor="#bbfdbb"></td>
<td bgcolor="#ddffdd"width="288"style="font-size:13px;">
<font color="#66f166">■</font>
ここに文字を書く</td>
<td width="3" bgcolor="#bbfdbb"></td>
<td width="3" bgcolor="#99f999"></td></tr>
<tr>
<td width="3" bgcolor="#bbfdbb"></td>
<td width="3" bgcolor="#99f999"></td>
<td bgcolor="#ddffdd"width="288"style="font-size:13px;">
<font color="#66f166">■</font>
ここに文字を書く</td>
<td width="3" bgcolor="#99f999"></td>
<td width="3" bgcolor="#bbfdbb"></td></tr>
<tr>
<td width="3" bgcolor="#99f999"></td>
<td width="3" bgcolor="#bbfdbb"></td>
<td bgcolor="#ddffdd"width="288"style="font-size:13px;">
<font color="#66f166">■</font>
ここに文字を書く</td>
<td width="3" bgcolor="#bbfdbb"></td>
<td width="3" bgcolor="#99f999"></td></tr>
</table>
</td></tr></table>

小さい大きさのテーブルタグをたくさん使うと、このような模様のある表も作る事ができます。

自分の工夫次第で様々な物が作れるので、勉強しがてら何か作ってみると楽しいですよ。


関連ページ)
表をつくる
表をつくる(1)基本
表をつくる(2)表の飾り方
表をつくる(3)複数の枠の表の飾り方
表をつくる(4)表の大きさを変える
表をつくる(5)枠線を変える
表をつくる(6)タグのまとめ
└表を応用して色々つくろう


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
とても役立ちました!
表を作ったことがないので表の作り方で検索したらこちらのブログがヒットしました☆彡

いろんな種類の表を作るのはムズかしそうですが、これから挑戦しようと思います!

ありがとうございました☆
頑張って!
役にたった様で良かったです。
なかなか難しいけど頑張ってくださいね!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/91-54416fdb   

Template Designed by DW99