htmlタグとcss−すぐに使えるサンプルと小技集 |
|||||||||||||||||||||||||||||
|
目次 WwwDomain Top SubDomain Top テーブルや表の作成法。 表(table,form,menu)サンプル集。 table作成編。 form作成編。 menu作成編。 copy right(©) 転載禁止。 当サイトの著作権はふぁるるに帰属。 address http://www.faruru.info/ Profile 管理人のふぁるると申します。 身体的特徴:身長、約160サンチ体重、4800gの肉10個、楽観思考で窮地に立つまで不動を貫く。 何事にも首を突っ込みすぎない事なかれ主義。 まったく、人生図々しくやっていくのが一番ですのに。何を躊躇っているんだか(＝ω＝)がっかりデスヨエエ。 勝負事や金には人一倍非情です。 スポンサード リンク  重いパソコンがサクサク動くウイルス対策ソフト |
独自domain
htmlタグとcss−すぐに使えるサンプルと小技集
のサブドメインサイトです。
スポンサード リンク ◆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タグとcssのリファレンス一覧と小技集サンプルに加え、自作テンプレートで効率的にホームページを楽々作成する方法。 |
|||||||||||||||||||||||||||||