>> HTML入門トップに戻る

table,div等のタグについて

まずはtableタグについて説明します。
tableタグは簡単に表を作れるタグです。
コードを見てもらったほうが早いですね。

表示結果	ソースコード
ヘッダ１ ヘッダ２ あいうえお かきくけこ さしすせそ たちつてと 2列分です。	<table border="4"> <tr> <th>ヘッダ１</th> <th>ヘッダ２</th> </tr> <tr> <td>あいうえお</td> <td>かきくけこ</td> </tr> <tr> <td>さしすせそ</td> <td>たちつてと</td> </tr> <tr> <td colspan="2">2列分です。</td> </tr> </table> </td>

上記のコードを見てください。
まず、全体をtableタグで囲みます。
その次のtrタグというのが行を表します。
実際の中の文字はtdタグで書きます。
一つのtrタグにtdタグを二個書くということは、
一行2列の表ができると言うことです。
2行にしたければ、一旦trタグを閉じて、その下からまたtrタグを書いて、
中にtdタグを書いてやればよいです。
一番上のthタグというのがありますが、これは表のヘッダを表します。
ヘッダを付けたいときにtdタグの代わりに用います。
またtd属性に、rowspan,colspanを用いると、
値に指定した行数分、列数分の幅を持ったテーブルを作ります。
今回はcolspan=2としてるので、列数が2つ分の幅を持ったテーブルが一番したに出来ています。

次にdivタグについてですが、
このタグはある領域を囲む為のものです。
コードを見てください。

表示結果	ソースコード
あいうえお かきくけこ	<div style="background: #666666;width:250px;color:#7dff00;"> あいうえお かきくけこ </div>

表示結果を見てください。
文字が四角形で囲まれているのが分かります。
属性にはstyle属性を使って、背景と横の長さを指定しています。
この範囲の領域はこの属性の設定が適用されて、表示結果のようになるわけです。
つまり、囲んだ領域の属性をまとめて設定するのにも役立ちます。
div要素は要素の後ろに自動的に改行が付加されます。
こういう要素をブロック要素と言います。

これに対して、ただ要素を囲んでまとめて属性を指定するのに役立つspanタグがあります。
これはブロック要素と違って、要素の後ろに改行を含みません。
ただ要素を囲みたいだけの時によく使われます。

次にimgタグを説明します。
imgタグを使うと画像を表示させることができます。
src属性に画像ファイルのurlを直接指定します。

表示結果	ソースコード
	<img src="../pic/img.jpg">

このように表示できます。横と縦の長さを指定するとその大きさに自動的に拡大・縮小されます。

次にcenterタグです。
全体をcenterタグで囲むだけで画面の中央に寄せることが出来ます。
この今見てるページも一番外側のcenterタグで囲んでいるので、
画面の丁度真ん中に表示されています。

今回の説明は以上です。
次回はCSSを使った属性の設定方法を説明します。

>> 【CSSの使い方】に進む
>> HTML入門トップに戻る