表タグ

 編集ソフトが最も役に立つのが、この表を作る時のタグです。表タグは、論理構造だけで表を作るので、タグを手書きする のは大変面倒です。表は、罫線を隠して、レイアウト枠としても使うことが多く、最も大事なタグです。

tableとtr・tdタグで、表が組めます。tableのオプションに、border=”0”とすると、罫線の見えない表が作れます。レイアウトを正確にするために表組みを使うこともあります。

<table>
 <tr> (1行目の定義)
  <td>1行1列 </td><td>1行2列 </td>
 </tr>
 <tr> (2行目の定義)
  <td>2行1列 </td><td>2行2列 </td>
 </tr>
</table>

tableのオプション  border=”n”(罫線の太さ) width=”n”(横幅) height=”n”(高さ)

tdのオプション width・height(上と同じ):bgcolor=”#colorNo”(セルの色)

2行3列の表の例

 赤のtrタグが1行目、青が2行目を表しています。<td>でセルの中身を挟みます。
<table>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>D</td><td>E</td><td>F</td></tr>
</table>

<table>のオプション border=”n”で罫線の太さ ・ width=”x” height=”y”で表のサイズ
<td>のオプション  width=”x” height=”y”でセルの大きさ・ align=”center”で中身の位置

border=0を指定すると、罫線が見えなくなります。画像や文字をレイアウトしたいとき、border=0の表を使うと簡単です。
width・heightは、ピクセル単位の他、%表示も可能です。tableで指定したものと、tdで指定したものの合計が一致する必要があります。指定をしなければ、中身で自動的に決まりますが、中身がないと大きさが0となり、表が潰れます。
alignは、left・center・rightが使えます。tableタグの中にも、alignオプションが使え、表の位置を変更できます。

これは、borderを8にした表です。
tableタグには、borderの他に、bordercolorもあり、罫線の色も指定できます。
このように、額縁のようにできます。
tdのオプションで、bgcolorを使うと、セルの背景色を設定できます。

インラインスクリプト 

 従来のタグの中に、オプションの記述のように、CSSやJavascriptのコマンドを入れ込むことができます。これが、HTMLを分かりにくくしているのですが、便利にもしています。タグと、スクリプトとの区別が無くなりつつあるばかりか、CSSとJavascriptを組み合わせたJQueryやAjacsといったモジュールがあり、これを組み込むと、更に分かりにくいタグになります。GoogleMapなどのページは、これらのモジュールを使っているので、ソースを見ても意味が分かりません。

それでも、インラインで使うCSSなどは、手書き編集が可能な高機能タグとして便利です。CSSは、インラインで使うことから始めれば、勉強になるでしょう。

<span style="ここにCSSの記述"> この範囲に、スタイルシートが適用される </span>  

ここに記述されたスタイルシートコマンドは、font-weight:bold;color:#ff0000 です。/spanの範囲に適用されます。
または、<p style="CSSの記述"> </p>でも、同じです。これを使うと、タグの中でCSSが使えるので、書式のタグは使わずに済みます。実際には、書式タグではできないことがCSSで可能なので、もはや書式タグは使われなくなったのです。
詳しい説明は、ここでは省きますが、fornタグの中では、オプションの記述でJavascriptの関数を呼び出すこともできます。タグとして記述されますが、実際は別のスクリプトが使われているのです。

 

Designed by CSS.Design Sample