3498781 ランダム
 HOME | DIARY | PROFILE 【フォローする】 【ログイン】

楽天広場HTML講座

全28件 (28件中 1-10件目)

1 2 3 >

全て | カテゴリ未分類 | HTML文字画像リンク | HTMLタグ(テーブル) | HTML(応用編) | アフィリエイト入門編 | ユーザービリティとSEO | 楽天で購入した商品 | 生活,美容,健康,家電 | スポーツ,アウトドア,車,バイク | 金運アップ,風水,自己トレ | 楽天市場のPR | 食品,グルメ,飲料 | ダイエット,健康,食品 | 園芸,DIY,ペット,おもちゃゲーム | 日用品雑貨,キッチン用品,寝具 | ファッション,ジュエリー,アクセサリー,靴 | パソコン・周辺機器 | アフィリエイト | 防災,介護,医療 | TV・オーディオ・カメラ | 自己管理,美容,インナー | DVD,CD,本,旅,楽器 | インテリア,ライト,収納,ベビー,キッズ | 心緒 | 音楽 | ブランド雑貨,時計 | 酒場放浪記 | 天気気象予報 | 気になる動画 | 最近チェックした商品 | 血圧測定 | 気になるニュース | 人生の名言集

HTMLタグ(テーブル)

2007.02.18
XML
・テーブルをつかう


■ マス目をタテにつなげる



前回は、マス目をヨコにつなげてみました。
今回は、マス目をタテにつなげる方法です。


td」をタテにつなげるときは「rowspan」属性をつかいます。


属性値には「つなげる「マス目」の数」をいれます。


これにより、さらにテーブルレイアウトの自由度が格段に広がるのです。


たとえばこの例をみてください。

なにも指定しない状態:




(「<table border="1">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
<tr><td>▲</td><td>△</td></tr>
</table>」と入力)
<rowspan="2">」としたとき:




(「<table border="1">
<tr><td rowspan="2">●</td><td>○</td></tr>
<tr><td>■</td></tr>
<tr><td>▲</td><td>△</td></tr>
</table>」と入力)
<rowspan="3">」としたとき:



(「<table border="1">
<tr><td rowspan="3">●</td><td>○</td></tr>
<tr><td>■</td></tr>
<tr><td>△</td></tr>
</table>」と入力)
<rowspan="4">
<rowspan="4">」としたとき:
数字数字
(「<table border="1" cellpadding="4"><tr><td rowspan="4" valign="top">数字</td><td>1</td><td rowspan="4" valign="top">数字</td><td>一</td></tr><tr><td>2</td><td>ニ</td></tr><tr><td>3</td><td>三</td></tr><tr><td>4</td><td>四</td></tr></table> 」と入力)




このようにタテのマス目をつなげることができました。

※rowspanの設定はまたがる項目ごとにします。
※数字の位置を上に表示するために
「valign="top"」のタグも使用しました。


td」のかわりに「th」でもつかえます。
同じように「th rowspan=""」と入力します。






[トップページへ戻る][次のページ⇒]







Last updated  2008.12.21 08:00:50
2007.02.15
・テーブルをつかう


■ マス目をヨコにつなげる



前回は、テーブルの並べ方(応用編)でした。
今回は、マス目をヨコにつなげる方法を学んでいきましょう。


マス目をヨコにつなげるときは「colspan」属性をつかいます。



今回は今までとちがい、「table」にではなく、tdに属性を合わせています。
属性値には「つなげる「マス目」の数」をいれます。


これによりテーブルレイアウトの自由度が格段に広がるのです。


たとえばこの例をみてください。

なにも指定しない状態:



(「<table border="1">
<tr><td>●</td><td>○</td><td>●</td></tr>
<tr><td>□</td><td>■</td><td>□</td></tr>
</table>」と入力)
<colspan="2">」としたとき:



(「<table border="1">
<tr><td colspan="2">●</td><td>●</td></tr>
<tr><td>□</td><td>■</td><td>□</td></tr>
</table>」と入力)
<colspan="3">」としたとき:


(「<table border="1">
<tr><td colspan="3">●</td></tr>
<tr><td>□</td><td>■</td><td>□</td></tr>
</table>」と入力)
<colspan="5">
<colspan="2">」としたとき:


(「<table border="1">
<tr><td colspan="5">●</td></tr>
<tr><td>□</td><td>■</td><td>□</td><td>■</td><td>□</td></tr><tr><td colspan="2">■</td><td colspan="2">□</td><td>■</td></tr><tr><td colspan="5">□</td></tr>
</table>」と入力)



このようにヨコのマス目をつなげることができました。


td」のかわりに「th」でもつかえます。
同じように「th colspan=""」と入力します。

次回は同じように、タテのマス目をつなげる方法です。






[トップページへ戻る][次のページ⇒]







Last updated  2008.12.21 07:59:15
2006.11.10






Last updated  2006.11.10 15:56:06
2006.11.08
ピンク基調のシンプルデザイン(ページ用)テンプレートを作成しました。
カスタマイズはご自由にどうぞ。

 ★文字★ 



★文字★
★画像★
★文字★
★画像★
★文字★
★画像★
★文字★
★画像★



★文字★
★文字★
★文字★
★文字★
★文字★
★文字★
★文字★
★文字★
★文字★
★文字★



★スペース★★スペース★



入力ソース:使用例>>
<center><font color="#B09475"><table width=430><tr><td><table cellpadding=5 width=430><tr><td style="border-top:2px solid #FFACE8;border-bottom:2px solid #FFACE8" align=center height=3><font size=3><font color=#FFACE8>■</font><font color=#FFCCF0>■</font><font color=#FFEEFF>■</font> ★文字★ <font color=#FFEEFF>■</font><font color=#FFCCF0>■</font><font color=#FFACE8>■</font></td></tr></table><BR>

<table width=430><tr><td><table cellspacing=0 cellpadding=5 style="border:1px solid #D6D4A5" cellpadding=0><tr><td bgcolor=#FFEEFF style="border-bottom:2px dashed #D6D4A5"><font size=1>★文字★</td></tr><tr><td width=80 height=80>★画像★</td></tr></table></td><td><table cellspacing=0 cellpadding=5 style="border:1px solid #D6D4A5" cellpadding=0><tr><td bgcolor=#FFEEFF style="border-bottom:2px dashed #D6D4A5"><font size=1>★文字★</td></tr><tr><td width=80 height=80>★画像★</td></tr></table></td><td><table cellspacing=0 cellpadding=5 style="border:1px solid #D6D4A5" cellpadding=0><tr><td bgcolor=#FFEEFF style="border-bottom:2px dashed #D6D4A5"><font size=1>★文字★</td></tr><tr><td width=80 height=80>★画像★</td></tr></table></td><td><table cellspacing=0 cellpadding=5 style="border:1px solid #D6D4A5" cellpadding=0><tr><td bgcolor=#FFEEFF style="border-bottom:2px dashed #D6D4A5"><font size=1>★文字★</td></tr><tr><td width=80 height=80>★画像★</td></tr></table></td></tr></table><BR>

<table><tr><td><table cellpadding=3><tr><td width=145 style="border-bottom:1px dashed #ffddcc">★文字★</td></tr><tr><td width=145 style="border-bottom:1px dashed #ffddcc">★文字★</td></tr><tr><td width=145 style="border-bottom:1px dashed #ffddcc">★文字★</td></tr><tr><td width=145 style="border-bottom:1px dashed #ffddcc">★文字★</td></tr><tr><td width=145 style="border-bottom:1px dashed #ffddcc">★文字★</td></tr></table></td><td><table cellpadding=3><tr><td width=145 style="border-bottom:1px dashed #FFACE8">★文字★</td></tr><tr><td width=145 style="border-bottom:1px dashed #FFACE8">★文字★</td></tr><tr><td width=145 style="border-bottom:1px dashed #FFACE8">★文字★</td></tr><tr><td width=145 style="border-bottom:1px dashed #FFACE8">★文字★</td></tr><tr><td width=145 style="border-bottom:1px dashed #FFACE8">★文字★</td></tr></table></td></tr></table><BR>

<table cellspacing=0><tr><td style="border:2px dotted #D6D4A5" height=80 width=180>★スペース★</td><td style="border-top:2px dotted #D6D4A5;border-bottom:2px dotted #D6D4A5;border-right:2px dotted #D6D4A5" height=80 width=180>★スペース★</td></tr></table></td></tr></table>
</font></center>






[トップページへ戻る]









Last updated  2008.11.03 20:39:12
2006.11.07
軽くて見やすいホームページを作りたいときに役立つWebデザインテンプレート(シンプル飾り枠)集です。○の数の増減で枠の高さを調節できます。





















Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text


入力ソース
<table width="400" bgcolor="#5f5f5f" cellspacing="5" cellpadding="5" style="border:1px solid #cccccc;">
<tr height="100"><td width="20" align=center style="border-right:1px dashed #cccccc;color:#cccccc;font-size:11px;line-height:25px;">○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br></td><td colspan="2" bgcolor="#f5f5f5" valign="top" align="center">
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</td></tr></table>























Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text


入力ソース
<table width="400" bgcolor="#ffffff" cellspacing="5" cellpadding="5" style="border:1px solid #cccccc;">
<tr height="100"><td width="20" align=center style="border-right:1px dashed #cccccc;color:#cccccc;font-size:11px;line-height:25px;">○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br>○<br></td><td colspan="2" bgcolor="#ffffff" valign="top" align="center">
Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text Sample Text</td></tr></table>



※Sample text Sample text を削除して、文章・画像を入力してください。
※width=""の数値を変える事で、自由にワクの大きさを変える事ができます。





[トップページへ戻る]









Last updated  2008.11.03 20:38:29
2006.11.06
軽くて見やすいホームページを作りたいときに役立つWebデザインテンプレート(シンプル飾り枠)集です。(テーブルの中にテーブル)を入れることでいろいろな組み合わせにしてイメージを変えることができます。


Sample text Sample textSample text Sampletext Sample text
Sample text Sample textSample text Sample text Sample text
Sampletext Sample text Sample text Sample textSample text
Sample text Sample text Sampletext Sample text Sample text
Sample textSample text Sample text Sample text


入力ソース
<TABLE border="0" cellpadding="4" cellspacing="0" width="400" height="400" bgcolor="#969696"><TR><TD><TABLE border="0" cellpadding="4" cellspacing="0" width="400" height="400" bgcolor="#C8C8C8"><TR><TD><TABLE border="0" width="400" height="400" cellpadding="4" cellspacing="0" bgcolor="#E7E7E7"><TR><TD><TABLE border="0" width="400" height="400" cellpadding="5" cellspacing="0" bgcolor="#F6F6F6"><TR><TD valign="top">Sample text Sample textSample text Sampletext Sample text
Sample text Sample textSample text Sample text Sample text
Sampletext Sample text Sample text Sample textSample text
Sample text Sample text Sampletext Sample text Sample text
Sample textSample text Sample text Sample text
</TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE>



Sample text Sample textSample text Sampletext Sample text
Sample text Sample textSample text Sample text Sample text
Sampletext Sample text Sample text Sample textSample text
Sample text Sample text Sampletext Sample text Sample text
Sample textSample text Sample text Sample text


入力ソース
<TABLE border="0" cellpadding="4" cellspacing="0" width="400" height="400" bgcolor="#BCBCFF"><TR><TD><TABLE border="0" cellpadding="4" cellspacing="0" width="400" height="400" bgcolor="#D6D6FF"><TR><TD><TABLE border="0" width="400" height="400" cellpadding="4" cellspacing="0" bgcolor="#ECECFF"><TR><TD><TABLE border="0" width="400" height="400" cellpadding="5" cellspacing="0" bgcolor="#F6F6F6"><TR><TD valign="top">Sample text Sample textSample text Sampletext Sample text
Sample text Sample textSample text Sample text Sample text
Sampletext Sample text Sample text Sample textSample text
Sample text Sample text Sampletext Sample text Sample text
Sample textSample text Sample text Sample text
</TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE>



Sample text Sample textSample text Sampletext Sample text
Sample text Sample textSample text Sample text Sample text
Sampletext Sample text Sample text Sample textSample text
Sample text Sample text Sampletext Sample text Sample text
Sample textSample text Sample text Sample text


入力ソース
<TABLE border="0" cellpadding="4" cellspacing="0" width="400" height="400" bgcolor="#FFADAD"><TR><TD><TABLE border="0" cellpadding="4" cellspacing="0" width="400" height="400" bgcolor="#FFBEBE"><TR><TD><TABLE border="0" width="400" height="400" cellpadding="4" cellspacing="0" bgcolor="#FFDEDE"><TR><TD><TABLE border="0" width="400" height="400" cellpadding="5" cellspacing="0" bgcolor="#F6F6F6"><TR><TD valign="top">Sample text Sample textSample text Sampletext Sample text
Sample text Sample textSample text Sample text Sample text
Sampletext Sample text Sample text Sample textSample text
Sample text Sample text Sampletext Sample text Sample text
Sample textSample text Sample text Sample text
</TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE></TD></TR></TABLE>


※Sample text Sample text を削除して、文章・画像を入力してください。
※width=""とheight=""の数値を変える事で、自由にワクの大きさを変える事ができます。




ランキング
↑ ↑ ↑
楽天広場アフィリエイト講座。


被リンク数を調べる*アフィリエイト入門編*トップページへ戻ります
Google検索エンジン登録(無料)はコチラから*商品が売れる法則


脳トレーニング講座TOP*運気アップ講座TOP

飾り枠TOP*いろいろな飾り枠(5)>>






Last updated  2006.11.07 09:09:52
2006.10.22
CSS濫用型(テンプレート集)です。

◆タイトル◆
枠の太さは各20ピクセルです

SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText


入力ソース
<TABLE border="0" cellpadding="0" cellspacing="0" width="450"><TR><TD bgcolor="#999999"></TD><TD bgcolor="#E7E7E7" height="20" align="center">◆タイトル◆</TD><TD bgcolor="#999999"></TD></TR><TR><TD bgcolor="#E7E7E7" width="20"></TD><TD bgcolor="#F6F6F6"><DIV style="padding-top : 8px;padding-left : 8px;padding-right : 8px;padding-bottom : 8px;">枠の太さは各20ピクセルです<BR>
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText</DIV></TD><TD bgcolor="#E7E7E7" width="20"></TD></TR><TR><TD bgcolor="#999999"></TD><TD bgcolor="#E7E7E7" height="20"></TD><TD bgcolor="#999999"></TD></TR></TABLE>




◆タイトル◆
枠の太さは各20ピクセルです

SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText


入力ソース
<TABLE border="0" cellpadding="0" cellspacing="0" width="450"><TR><TD bgcolor="#BCBCFF"></TD><TD bgcolor="#ECECFF" height="20" align="center">◆タイトル◆</TD><TD bgcolor="#BCBCFF"></TD></TR><TR><TD bgcolor="#ECECFF" width="20"></TD><TD bgcolor="#F6F6F6"><DIV style="padding-top : 8px;padding-left : 8px;padding-right : 8px;padding-bottom : 8px;">枠の太さは各20ピクセルです<BR>
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText</DIV></TD><TD bgcolor="#ECECFF" width="20"></TD></TR><TR><TD bgcolor="#BCBCFF"></TD><TD bgcolor="#ECECFF" height="20"></TD><TD bgcolor="#BCBCFF"></TD></TR></TABLE>




◆タイトル◆
枠の太さは各20ピクセルです

SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText


入力ソース
<TABLE border="0" cellpadding="0" cellspacing="0" width="450"><TR><TD bgcolor="#FFBEBE"></TD><TD bgcolor="#FFDEDE" height="20" align="center">◆タイトル◆</TD><TD bgcolor="#FFBEBE"></TD></TR><TR><TD bgcolor="#FFDEDE" width="20"></TD><TD bgcolor="#F6F6F6"><DIV style="padding-top : 8px;padding-left : 8px;padding-right : 8px;padding-bottom : 8px;">枠の太さは各20ピクセルです<BR>
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText
SampleText SampleText SampleText SampleText</DIV></TD><TD bgcolor="#FFDEDE" width="20"></TD></TR><TR><TD bgcolor="#FFBEBE"></TD><TD bgcolor="#FFDEDE" height="20"></TD><TD bgcolor="#FFBEBE"></TD></TR></TABLE>






[トップページへ戻る]









Last updated  2008.11.03 20:37:35
Simple-->Naturalがモットーのテンプレート集です。


テキスト


入力ソース
<TABLE BORDER="0" WIDTH="300" ALIGN="CENTER" BGCOLOR="#F2FFD5"><TR><TD><TABLE border="0" cellpadding="0" cellspacing="0" width="300" BGCOLOR="#F2FFD5"><TR><TD bgcolor="#FFC600"></TD><TD bgcolor="#D4BCA3" height="1" align="center"></TD><TD bgcolor="#FFC600"></TD></TR><TR><TD bgcolor="" width="1"></TD><TD bgcolor=""><DIV style="padding-top : 8px;padding-left : 8px;padding-right : 8px;padding-bottom : 8px;">テキスト</DIV></TD><TD bgcolor="" width="1"></TD></TR><TR><TD bgcolor="#FFC600"></TD><TD bgcolor="#D4BCA3" height="1"></TD><TD bgcolor="#FFC600"></TD></TR></TABLE></TD></TR></TABLE>




テキスト


入力ソース
<TABLE BORDER="0" WIDTH="300" ALIGN="CENTER" BGCOLOR="#E7E7E7"><TR><TD><TABLE border="0" cellpadding="0" cellspacing="0" width="300" BGCOLOR="#E7E7E7"><TR><TD bgcolor="#FFC600"></TD><TD bgcolor="#666666" height="1" align="center"></TD><TD bgcolor="#FFC600"></TD></TR><TR><TD bgcolor="" width="1"></TD><TD bgcolor=""><DIV style="padding-top : 8px;padding-left : 8px;padding-right : 8px;padding-bottom : 8px;">テキスト</DIV></TD><TD bgcolor="" width="1"></TD></TR><TR><TD bgcolor="#FFC600"></TD><TD bgcolor="#666666" height="1"></TD><TD bgcolor="#FFC600"></TD></TR></TABLE></TD></TR></TABLE>




テキスト


入力ソース
<TABLE BORDER="0" WIDTH="300" ALIGN="CENTER" BGCOLOR="#ECECFF"><TR><TD><TABLE border="0" cellpadding="0" cellspacing="0" width="300" BGCOLOR="#ECECFF"><TR><TD bgcolor="#FFC600"></TD><TD bgcolor="#9696FF" height="1" align="center"></TD><TD bgcolor="#FFC600"></TD></TR><TR><TD bgcolor="" width="1"></TD><TD bgcolor=""><DIV style="padding-top : 8px;padding-left : 8px;padding-right : 8px;padding-bottom : 8px;">テキスト</DIV></TD><TD bgcolor="" width="1"></TD></TR><TR><TD bgcolor="#FFC600"></TD><TD bgcolor="#9696FF" height="1"></TD><TD bgcolor="#FFC600"></TD></TR></TABLE></TD></TR></TABLE>




テキスト


入力ソース
<TABLE BORDER="0" WIDTH="300" ALIGN="CENTER" BGCOLOR="#FFECEC"><TR><TD><TABLE border="0" cellpadding="0" cellspacing="0" width="300" BGCOLOR="#FFECEC"><TR><TD bgcolor="#FFC600"></TD><TD bgcolor="#FF3366" height="1" align="center"></TD><TD bgcolor="#FFC600"></TD></TR><TR><TD bgcolor="" width="1"></TD><TD bgcolor=""><DIV style="padding-top : 8px;padding-left : 8px;padding-right : 8px;padding-bottom : 8px;">テキスト</DIV></TD><TD bgcolor="" width="1"></TD></TR><TR><TD bgcolor="#FFC600"></TD><TD bgcolor="#FF3366" height="1"></TD><TD bgcolor="#FFC600"></TD></TR></TABLE></TD></TR></TABLE>




テキスト


入力ソース
<TABLE BORDER="0" WIDTH="300" ALIGN="CENTER" BGCOLOR="#E4F8F3"><TR><TD><TABLE border="0" cellpadding="0" cellspacing="0" width="300" BGCOLOR="#E4F8F3"><TR><TD bgcolor="#FFC600"></TD><TD bgcolor="#009966" height="1" align="center"></TD><TD bgcolor="#FFC600"></TD></TR><TR><TD bgcolor="" width="1"></TD><TD bgcolor=""><DIV style="padding-top : 8px;padding-left : 8px;padding-right : 8px;padding-bottom : 8px;">テキスト</DIV></TD><TD bgcolor="" width="1"></TD></TR><TR><TD bgcolor="#FFC600"></TD><TD bgcolor="#009966" height="1"></TD><TD bgcolor="#FFC600"></TD></TR></TABLE></TD></TR></TABLE>






[トップページへ戻る]









Last updated  2008.11.03 20:36:38
Sampletextを削除して、文章や画像を入れてください。
テンプレートのカスタマイズは自由です。


Title(タイトル)
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext


入力ソース
<TABLE border="0" width="400" cellpadding="1" cellspacing="0"><TR><TD align="center" bgcolor="#666666" rowspan="2"><FONT color="#ffffff"><B>Title(タイトル)</B></FONT></TD><TD width="250" height="11"></TD></TR><TR><TD bgcolor="#666666"></TD></TR><TR><TD colspan="2" bgcolor="#E7E7E7"><DIV style="padding : 10px;">Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
</DIV></TD></TR></TABLE>




Title(タイトル)
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext


入力ソース
<TABLE border="0" width="400" cellpadding="1" cellspacing="0"><TR><TD align="center" bgcolor="#9696FF" rowspan="2"><FONT color="#ffffff"><B>Title(タイトル)</B></FONT></TD><TD width="250" height="11"></TD></TR><TR><TD bgcolor="#9696FF"></TD></TR><TR><TD colspan="2" bgcolor="#ECECFF"><DIV style="padding : 10px;">Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
</DIV></TD></TR></TABLE>




Title(タイトル)
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext


入力ソース
<TABLE border="0" width="400" cellpadding="1" cellspacing="0"><TR><TD align="center" bgcolor="#FF3366" rowspan="2"><FONT color="#ffffff"><B>Title(タイトル)</B></FONT></TD><TD width="250" height="11"></TD></TR><TR><TD bgcolor="#FF3366"><IMG src="images/dummy.gif" width="1" height="1" border="0"></TD></TR><TR><TD colspan="2" bgcolor="#FFECEC"><DIV style="padding : 10px;">Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
</DIV></TD></TR></TABLE>




Title(タイトル)
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext


入力ソース
<TABLE border="0" width="400" cellpadding="1" cellspacing="0"><TR><TD align="center" bgcolor="#009966" rowspan="2"><FONT color="#ffffff"><B>Title(タイトル)</B></FONT></TD><TD width="250" height="11"></TD></TR><TR><TD bgcolor="#009966"></TD></TR><TR><TD colspan="2" bgcolor="#E4F8F3"><DIV style="padding : 10px;">Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
Sampletext Sampletext Sampletext Sampletext
</DIV></TD></TR></TABLE>






[トップページへ戻る]









Last updated  2008.11.03 20:34:57
2006.07.19
・テーブルをつかう


■ テーブルの背景に画像をつける



前回は、枠に別々に色をつける方法を学びました。
今回は、背景に画像をつける方法を学んでいきましょう。



今回つかうのは、「background=""」属性です。



この属性は「table」はもちろん、「td」にも設定できます。
tr」には基本的に設定できません。


=""」部分には画像のURLを入れます。


では、さっそく例をみてみましょう。
table」に
background」を設定:



(「<table border="1" background="画像のURL">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>」と入力)
border="0"」にすると・・・:



(「<table border="0" background="画像のURL">
<tr><td>●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>」と入力)


(「<table border="1">
<tr><td background="画像のURL">●</td><td>○</td></tr>
<tr><td>□</td><td>■</td></tr>
</table>」と入力)



テーブルの背景に画像をはりつける場合は、
<img src="http://image.space.rakuten.co.jp/lg01/33/0000122333/98/imgb9317367h94jq7.gif" width="200" height="267" alt="絵画">

青色に表示されているところは、使用しません。







[トップページへ戻る][次のページ⇒]







Last updated  2009.02.23 07:00:14

全28件 (28件中 1-10件目)

1 2 3 >


Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.