| 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◆ table作成編htmlでテーブルを自作する方法です。 使うhtmlタグは、 <table></table> <tr></tr> <th></th> <td></td> です。 テーブルを作ってみよう。 1、まずはtableタグ。 <table width=400 align=center border=0 cellspacing=0 cellpadding=0> </table> 2、trとtdを追加 align=centerを削除。 <table width=400 border=0 cellspacing=0 cellpadding=0> <tr> <td width=400>テーブル欄1</td> </tr> </table> 3、段数を増やしてみる。 <table width=400 border=0 cellspacing=0 cellpadding=0> <tr> <td width=400>テーブル欄1</td> </tr> <tr> <td width=400>テーブル欄2</td> </tr> <tr> <td width=400>テーブル欄3</td> </tr> <tr> <td width=400>テーブル欄4</td> </tr> </table> 4、一段に割り当てられる欄数を増やしてみる。 <table width=400 border=0 cellspacing=0 cellpadding=0> <tr> <td width=100>テーブル欄1</td> <td width=100>テーブル欄5</td> <td width=100>テーブル欄9</td> <td width=100>テーブル欄D</td> </tr> <tr> <td width=100>テーブル欄2</td> <td width=100>テーブル欄6</td> <td width=100>テーブル欄A</td> <td width=100>テーブル欄E</td> </tr> <tr> <td width=100>テーブル欄3</td> <td width=100>テーブル欄7</td> <td width=100>テーブル欄B</td> <td width=100>テーブル欄F</td> </tr> <tr> <td width=100>テーブル欄4</td> <td width=100>テーブル欄8</td> <td width=100>テーブル欄C</td> <td width=100>テーブル欄0</td> </tr> </table> 5、tdタグの一部をthタグへ。 <table width=400 border=0 cellspacing=0 cellpadding=0> <tr> <td width=100>テーブル欄1</td> <th width=100>テーブル欄5</th> <th width=100>テーブル欄9</th> <th width=100>テーブル欄D</th> </tr> <tr> <th width=100>テーブル欄2</th> <td width=100>テーブル欄6</td> <td width=100>テーブル欄A</td> <td width=100>テーブル欄E</td> </tr> <tr> <th width=100>テーブル欄3</th> <td width=100>テーブル欄7</td> <td width=100>テーブル欄B</td> <td width=100>テーブル欄F</td> </tr> <tr> <th width=100>テーブル欄4</th> <td width=100>テーブル欄8</td> <td width=100>テーブル欄C</td> <td width=100>テーブル欄0</td> </tr> </table> 6、colspanを導入。 <table width=400 border=0 cellspacing=0 cellpadding=0> <tr> <th width=300 colspan="3">テーブル欄1</th> <th width=100>テーブル欄D</th> </tr> <tr> <th width=100>テーブル欄2</th> <td width=100>テーブル欄6</td> <td width=100>テーブル欄A</td> <td width=100>テーブル欄E</td> </tr> <tr> <th width=100>テーブル欄3</th> <td width=100>テーブル欄7</td> <td width=100>テーブル欄B</td> <td width=100>テーブル欄F</td> </tr> <tr> <th width=100>テーブル欄4</th> <td width=100>テーブル欄8</td> <td width=100>テーブル欄C</td> <td width=100>テーブル欄0</td> </tr> </table> 7、rowspanとvalign="top"を導入。 <table width=400 border=0 cellspacing=0 cellpadding=0> <tr> <th width=300 colspan="3">テーブル欄1</th> <th width=100>テーブル欄D</th> </tr> <tr> <th width=100>テーブル欄2</th> <td width=100>テーブル欄6</td> <td width=100>テーブル欄A</td> <td width=100 rowspan="3" valign="top">テーブル欄E</td> </tr> <tr> <th width=100>テーブル欄3</th> <td width=100>テーブル欄7</td> <td width=100>テーブル欄B</td> </tr> <tr> <th width=100>テーブル欄4</th> <td width=100>テーブル欄8</td> <td width=100>テーブル欄C</td> </tr> </table> 8、色を付けてみる。 <table width=400 border=0 cellspacing=0 cellpadding=0> <tr> <th width=300 colspan="3" bgcolor="#88CC88">テーブル欄1</th> <th width=100 bgcolor="#AACCAA">テーブル欄D</th> </tr> <tr> <th width=100 bgcolor="#AACCAA">テーブル欄2</th> <td width=100>テーブル欄6</td> <td width=100>テーブル欄A</td> <td width=100 rowspan="3" valign="top" bgcolor="#CCAAAA">テーブル欄E</td> </tr> <tr> <th width=100 bgcolor="#AACCAA">テーブル欄3</th> <td width=100>テーブル欄7</td> <td width=100>テーブル欄B</td> </tr> <tr> <th width=100 bgcolor="#AACCAA">テーブル欄4</th> <td width=100>テーブル欄8</td> <td width=100>テーブル欄C</td> </tr> </table> 9、完成したテーブル。
10、tableのborder=0 cellspacing=0 cellpadding=0をいじると見た目がちょっと変わります。
html help、html option、html filter、html index。
戻る: htmlタグとcss(スタイルシート)のトップへ |
現在地
|
|||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
