htmlタグとcssのリファレンス一覧と小技集のサンプルに加え、自作テンプレートで効率的にseo対策済みホームページを楽々作成まで♪

htmlタグとcss(ｽﾀｲﾙｼｰﾄ)

 http://www.faruru.info/ htmlタグとcss(スタイルシート) 無断リンク歓迎♪ 		私のネット関連管理サイト一覧 レンタルサーバー  HP作成  フリー素材  マナー
副業収入  SEO対策  ドメイン  麻雀の役とルール
 

html&css 手軽に使えるhtmlタグ♪

コピー＆ペーストですぐに使えるhtmlタグやソースのサンプル集。

htmlテンプレート、文字装飾、tableの型、電子メールの型など200種類以上のサンプルを完備。

他にもhtmlタグ、スタイルシート(css)、色見本、特殊文字のリファレンスに加え、1日で習得html言語など初めての人のためのページもあります。

スポンサード リンク






html&css 表のサンプルソース集

htmlタグを使って作ったテーブルなどの表関連ソースコードです。

青い文字をクリックするとtableサンプルの使用時の表示のされ方、赤い文字はコピー＆ペーストでそのまま使えます。


table関連のhtmlサンプル。

1、横一列だけのtable。

htmlソース: <table width=700 border=1 cellspacing=0 cellpadding=0> <tr> <td width=100>html</td> <td width=100>css</td> <td width=100>ルゥ</td> <td width=100>ふぁるる</td> <td width=100>ファルゼルゥ</td> <td width=100>るのあ♪</td> <td width=100>ラジア</td> </tr> </table>
2、縦一列だけのtable+枠。

htmlソース: <table width=100 height=700 border=1 cellspacing=10 cellpadding=0 align=center> <tr> <td height=100>A</td> </tr> <tr> <td height=100>B</td> </tr> <tr> <td height=100>C</td> </tr> <tr> <td height=100>D</td> </tr> <tr> <td height=100>E</td> </tr> <tr> <td height=100>F</td> </tr> <tr> <td height=100>G</td> </tr> </table>
3、2の枠なしversion。

htmlソース: <table width=100 height=700 border=0 cellspacing=10 cellpadding=0 align=center> <tr> <td height=100>A2</td> </tr> <tr> <td height=100>B2</td> </tr> <tr> <td height=100>C2</td> </tr> <tr> <td height=100>D2</td> </tr> <tr> <td height=100>E2</td> </tr> <tr> <td height=100>F2</td> </tr> <tr> <td height=100>G2</td> </tr> </table>
4、縦横2列の基本テーブル。

htmlソース: <table width=400 border=1 cellspacing=0 cellpadding=0 align=center> <tr> <th>V</th> <td>W</td> </tr> <tr> <td>X</td> <td>Y</td> </tr> </table>
5、枠の大きさを変化させたテーブル。

htmlソース: <table width=700 height=700 border=1 cellspacing=0 cellpadding=10 align=right> <tr> <td width=100 height=200>H</td> <td width=100 height=200>I</td> <td width=100 height=200>J</td> <td width=100 height=200>K</td> <td width=100 height=200>L</td> <td width=100 height=200>M</td> <td width=100 height=200>N</td> </tr> <tr> <td width=100 height=500>O</td> <td width=100 height=500>P</td> <td width=100 height=500>Q</td> <td width=100 height=500>R</td> <td width=100 height=500>S</td> <td width=100 height=500>T</td> <td width=100 height=500>U</td> </tr> </table>
6、テーブルに色を付ける。

htmlソース: <table width=400 border=0 cellspacing=0 cellpadding=0 align=center bgcolor="#AACCBB"> <tr> <th> Z </th> <td> html </td> </tr> <tr> <td> css </td> <td> table </td> </tr> </table>
7、6に枠を加えたテーブル。

htmlソース: <table width=400 border=1 cellspacing=10 cellpadding=0 align=center bgcolor="#AACCBB"> <tr> <th width=100> か </th> <th width=100> き </th> <th width=100> く </th> <th rowspan=2 width=100> け </th> </tr> <tr> <th width=100> こ </th> <th width=100> さ </th> <th width=100> し </th> </tr> </table>
8、7に余白を加えたテーブル。

htmlソース: <table width=400 border=1 cellspacing=10 cellpadding=10 align=center bgcolor="#AACCBB"> <tr> <th width=100> す </th> <th width=100> せ </th> <th width=100> そ </th> <th rowspan=2 width=100> た </th> </tr> <tr> <th width=100> ち </th> <th width=100> つ </th> <th width=100> て </th> </tr> </table>
9、colspanを使用したテーブル。

htmlソース: <table width=400 border=0 cellspacing=0 cellpadding=0 align=center> <tr> <td width=30> と </td> <th> な </th> <td width=30> に </td> </tr> <tr> <td colspan="3">ぬ</td> </tr> <tr> <td width=30> ね</td> <th> の </th> <td width=30> は </td> </tr> </table>
10、colspanを使用したテーブル2。

htmlソース: <table width=400 border=1 cellspacing=0 cellpadding=0 align=center> <tr> <th width=100> あ </th> <th width=100> い </th> <th width=100> う </th> <th width=100> え </th> </tr> <tr> <td colspan="4"> お </td> </tr> </table>
11、rowspanを使用したテーブル。

htmlソース: <table width=800 border=0 cellspacing=0 cellpadding=0 align=center> <tr><td colspan="3">htmlテンプレート制作実験。−見出し部分を予定。</td></tr> <tr><td height=20> </td></tr> <tr> <td width=500>htmlテンプレート作成実験。−本文部分を予定。</td> <td width=20> </td> <td width=280>htmlテンプレート製作実験。−目次部分を予定。</td> </tr> <tr><td height=20> </td></tr> <tr><td colspan="3">htmlタグでテンプレートを作る。−seo対策部分やトップペ ージリンクを予定。</td></tr> </table>
12、rowspanを使用したテーブル2。

htmlソース: <table width=400 height=400 border=0 cellspacing=0 cellpadding=0 align=center> <tr> <td bgcolor="#AACCBB"> a </td> <th> b </th> <th> c </th> <td> d </td> </tr> <tr> <th> html </th> <td colspan="2" rowspan="2" bgcolor="#CCCCCC"> center </td> <th> css </th> </tr> <tr> <td> e </td> <td bgcolor="#AACCBB"> f </td> </tr> </table>
13、テーブルの中にテーブル。

htmlソース: <table width=400 border=0 cellspacing=0 cellpadding=0 align=center bgcolor="#AACCBB"> <tr><td height="1"></td></tr> <tr> <td> <table width=398 border=0 cellspacing=0 cellpadding=0 align=center bgcolor="#FFFFFF"> <tr> <td> Sample </td> </tr> </table> </td> </tr> <tr><td height="1"></td></tr> </table>
14、13を改良したテーブル。

htmlソース: <table width=600 border=0 cellspacing=0 cellpadding=0 align=center bgcolor="#CCCCCC"> <tr> <td width=200 bgcolor="#AACCBB"> <table width=198 border=0 cellspacing=0 cellpadding=0 align=center bgcolor="#FFFFFF"> <tr><td height="1" bgcolor="#AACCBB"></td></tr><tr><td> AAAAA </td></tr><tr><td height="1" bgcolor="#AACCBB"></td></tr></table> </td> <td width=200> BBBBB </td> <td width=200 bgcolor="#AACCBB"> <table width=198 border=0 cellspacing=0 cellpadding=0 align=center bgcolor="#FFFFFF"> <tr><td height="1" bgcolor="#AACCBB"></td></tr><tr><td> AAAAA </td></tr><tr><td height="1" bgcolor="#AACCBB"></td></tr></table> </td> </tr> <tr> <td width=200> BBBBB </td> <td width=200 bgcolor="#AACCBB"> <table width=198 border=0 cellspacing=0 cellpadding=0 align=center bgcolor="#FFFFFF"> <tr><td height="1" bgcolor="#AACCBB"></td></tr><tr><td> AAAAA </td></tr><tr><td height="1" bgcolor="#AACCBB"></td></tr></table> </td> <td width=200> BBBBB </td> </tr> <tr> <td width=200 bgcolor="#AACCBB"> <table width=198 border=0 cellspacing=0 cellpadding=0 align=center bgcolor="#FFFFFF"> <tr><td height="1" bgcolor="#AACCBB"></td></tr><tr><td> AAAAA </td></tr><tr><td height="1" bgcolor="#AACCBB"></td></tr></table> </td> <td width=200> BBBBB </td> <td width=200 bgcolor="#AACCBB"> <table width=198 border=0 cellspacing=0 cellpadding=0 align=center bgcolor="#FFFFFF"> <tr><td height="1" bgcolor="#AACCBB"></td></tr><tr><td> AAAAA </td></tr><tr><td height="1" bgcolor="#AACCBB"></td></tr></table> </td> </tr> </table>
15、実用的なテーブル1。

htmlソース: <table width=800 border=0 cellspacing=0 cellpadding=0> <tr> <td width=549> <h1>ホームページのタイトル名</h1> </td> <td width=1 bgcolor=#AACCBB> </td> <td width=250> ホームページについての説明文や自己紹介などなんでもOK。 </td> </tr> <tr> <td colspan="3" height=10 bgcolor=#AACCBB> </td> </tr> </table>
16、実用的なテーブル2。

htmlソース: <table width=280 border=0 cellspacing=0 cellpadding=0 bgcolor="#AACCBB"><tr><td height=1></td></tr><tr> <tr><th>html目次</th></tr> <tr> <td align=center> <table width=278 border=0 cellspacing=0 cellpadding=0 bgcolor="#FFFFFF"> <tr> <td> 1、<br> 2、<br> 3、<br> 4、<br> 5、<br> 6、<br> 7、<br> 8、<br> 9、 </td> </tr> </table> </td> </tr> <tr><th>htmlソース</th></tr> <tr> <td align=center> <table width=278 border=0 cellspacing=0 cellpadding=0 bgcolor="#FFFFFF"> <tr> <td> none </td> </tr> </table> </td> </tr> <tr><th>テンプレート使用法</th></tr> <tr> <td align=center> <table width=278 border=0 cellspacing=0 cellpadding=0 bgcolor="#FFFFFF"> <tr> <td> 以下に記載する赤字htmlソースをコメント部分(ここにコピペで目次増設)の所にコピー＆ペーストすれば目次の部分を増やせます。 <hr> </td> </tr> </table> </td> </tr> <tr><td height=1></td></tr><tr></table>
17、実用的なテーブル3。

htmlソース: <table width=800 border=0 cellspacing=0 cellpadding=0 bgcolor="#AACCBB"><tr><td height=1></td></tr><tr><td> <table width=798 border=0 cellspacing=0 cellpadding=0> <tr> <th width=200> seo対策用keywordを入力 </th> <td width=600 bgcolor="#FFFFFF"> seo対策用keywordについての記述を書く。特定のキーワード出現率を高めるのに使う。(不自然な文章にならないように気をつける。) </td> </tr> </table> </td></tr><tr><td height=1></td></tr></table>
18、12のテーブルにvalignを使用。

htmlソース: <table width=400 height=400 border=0 cellspacing=0 cellpadding=0 align=center> <tr> <td bgcolor="#AACCBB" valign="top"> a </td> <th valign="top"> b </th> <th valign="top"> c </th> <td valign="top"> d </td> </tr> <tr> <th valign="top"> html </th> <td colspan="2" rowspan="2" bgcolor="#CCCCCC" valign="top"> center </td> <th valign="top"> css </th> </tr> <tr> <td valign="top"> e </td> <td bgcolor="#AACCBB" valign="top"> f </td> </tr> </table>
menu関連のhtmlサンプル。

1、type="1"型メニュー。

htmlソース: <ol type="1"> <li>type="1"</li> <li>数字。</li> <li>html</li> </ol>
2、type="a"型メニュー。

htmlソース: <ol type="a"> <li>type="a"</li> <li>アルファベット。</li> <li>hp</li> </ol>
3、type="A"型メニュー。

htmlソース: <ol type="A"> <li>type="A"</li> <li>アルファベットの大文字。</li> <li>HTML</li> </ol>
4、type="i"型メニュー。

htmlソース: <ol type="i"> <li>type="i"</li> <li>数字。</li> <li>css</li> </ol>
5、type="I"型メニュー。

htmlソース: <ol type="I"> <li>type="I"</li> <li>数字。</li> <li>スタイルシート。</li> </ol>
form関連のhtmlサンプル。

1、selectを利用したサンプル。

htmlソース: <select name="更新履歴" size="5"> <option>ホームページ公開日</option> <option>20XX年 YY月 ZZ日</option> <option>----------------------------</option> <option>最終更新日</option> <option>20XX年 YY月 ZZ日</option> <option>----------------------------</option> </select>




html help、html option、html filter、html index。



○○○ ○○○




戻る: htmlタグとcss(スタイルシート)のトップへ
 現在地
 

htmlタグとcss(スタイルシート)のサイトマップ

 >> 表のサンプルソースと作成法
 
About Site
 
Home Mail Blog

Copyright© 著作元
転載不可 ふぁるる  Link集

Link Free address <a href="
http://www.faruru.info/
" target="_blank"> htmlタグとcss(スタイルシート) </a>

カスタム検索
オススメのコンテンツ
 
その壱:1日で楽々習得html言語。

その弐:htmlタグで文字装飾。

その参:htmlテンプレート(配布＋)。

その四:html関連リファレンス辞典。

その五:テーブルや表の作成法。

その六:フレームページの作成法。

その七:1日で習得css−簡単スタイルシート。

その八:htmlタグ−小技集。

その九:html関連の雑学。

その拾:旧htmlリファレンス辞典。
 
Sponsor
 
 
20個以上のSEO対策ツールが1,980円で使い放題！
20個以上のSEO対策ツールが1,980円で使い放題！
私が現在使用している有料サービスです。ホームページの売り上げアップ、つまるところアクセス数増加、このサービスの良い所は国内の検索エンジンさんだけでなく海外の検索エンジンさんまで登録出来る事です。(要英語ページ作成)英語は世界共通語ですから大手検索エンジンさんからも高く評価されやすいです。
 
30,000サイト以上の導入実績がある、国内NO.1SEOサービス
30,000サイト以上の導入実績がある、国内NO.1SEOサービス
私が利用しているパーソナルプランの上位プランです。サイトへのアクセス数を増加させるため上位表示はもちろんのことその後まで視野に入れています。
 
20種類以上のSEO対策ツールを自社サービスとして提供可能
20種類以上のSEO対策ツールを自社サービスとして提供可能
これはでかいですよ。有料のseo対策ツールを再販出来るのですからね。ちょっとしたseo対策サイトを作ろうと思っている人には強力な味方ですね。ただ、アフィリエイトとか考えていない個人サイトの場合には必要ないですね。
 
50,000名以上のウェブマスターに認められた、アフィリエイトプログラム
50,000名以上のウェブマスターに認められた、アフィリエイトプログラム
私が現在参加しているリンクスタッフです。無料登録で広告が出せるようになります。また、特典として検索エンジン登録をやってくれたり、seo対策ツールを使ったり出来ます。
 
2年連続！ 最優秀ウイルス対策ソフトの上位版
2年連続！ 最優秀ウイルス対策ソフトの上位版
ウイルス対策ソフトです。性能が結構ある上、業界最高クラスの軽さというのが売りのようです。なんにしても重いソフトは嫌われますからね。
 
MindManager（マインドマネージャー）でマインドマップ
MindManager（マインドマネージャー）でマインドマップ
アイデアや考えを整理するのに便利なソフトです。体験版があるので興味がある人は製品購入前にどの位、役に立つか試してみてください。
 
No,1動画キャプチャーソフトのカムタジアスタジオ
No,1動画キャプチャーソフトのカムタジアスタジオ
高機能キャプチャーソフトが最安値で購入出来るというのが売りらしい、動画制作をしたい人をターゲットにした商品のようだ。
 
キーワードアドバイス
ツールプラス

ホームページ制作に便利、狙い目のキーワードが探せます。
 
サイトマップラス
Powered by SEO対策
googleなどの検索エンジン対策用、サイトマップを作る事が出来ます。
 

URL

サイトタイトル

ディレクトリ登録
by ホームページ登録
ディレクトリ型の検索エンジンに登録されているかチェックする事が出来ます。
スポンサード リンク
xml html
スポンサード リンク
html css
html select、html submit、html class。
 
 
htmlとは htmlのタグ テンプレート htmlでメール htmlの色見本 スタイルシート cssでHP装飾
 
Hハイパー Tテキスト Mマークアップ Lランゲージ、略してhtml。
 		  
ウェブページはhtmlのタグを使って作られています。タグは100種類以上。
 		  
ホームページの雛形となるものこれの有無で制作効率が倍以上変わります。
 		  
htmlタグの機能を利用し第三者がホームページからメール利用が可能に。
 		  
ホームページで利用できる色の見本。NameとCodoの2種類の色指定が可。
 		  
ホームページの見栄えに利用するデザイン用の言語である。名称はcss。
 		  
レイアウトを定義する規格でHPのデザインにはcssを使うのが常識的。