>> HTML入門トップに戻る

table,div等のタグについて

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

表示結果 ソースコード
ヘッダ1 ヘッダ2
あいうえお かきくけこ
さしすせそ たちつてと
2列分です。
<table border="4">
<tr>
<th>ヘッダ1</th>
<th>ヘッダ2</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入門トップに戻る
●更新履歴
2016/08/16 Java入門ページにページを幾つか追加
2016/04/08 Java入門ページ作成
2016/03/09 メニューレイアウト変更。ブラウザキャッシュのクリアをお願い致します。
2016/03/09 PDOトランザクション、自動コミットモードをオフ追加
2016/03/09 PDO 例外処理 try catch追加
2016/03/09 PDO update文実行追加
2016/03/09 PDO delete文実行追加
2016/03/09 PDO insert文実行追加
2016/03/09 PDO selectでデータを取得、fetchAll、queryメソッド追加
2016/03/09 PDO bindValueとbindParamの違い追加
2016/03/09 PDO prepare プリペアドステートメントの使い方追加
2016/03/04 ソースコードをクリップボードにコピーする機能を追加
2016/03/04 C言語、C++のページのソースコードを一部修正
2014/01/31 C言語関数一覧ページに11ページほど追加
2014/01/31 C言語関数一覧ページに30ページほど追加
2014/01/30 C言語関数一覧ページ作成中
2013/07/01 レイアウト変更に伴いブラウザキャッシュのクリアをお願いします。
2013/07/01 MySQL入門ページ作成
2013/07/01 PHP入門ページにSQLite学習項目追加
2013/06/25 ドメイン変更、レイアウトを一部変更
2013/03/14 レイアウトを一部変更
2012/08/13 C言語よくある課題・宿題ページ開設!
2012/08/13 シューティングゲーム作成第33章追加!
2012/08/11 ドメイン変更&サーバ移設完了
2012/04/21 シューティングゲームプログラミング第2,3章の内容を修正
2012/04/19 シューティングゲームプログラミング第2章の内容を修正
2012/04/03 Googleカスタム検索を設置!
2012/04/03 シューティングゲームプログラミング第32章追加!
2012/04/03 シューティングゲームプログラミング第31章追加!
2012/03/31 サイトをリニューアルしました!
2012/03/25 シューティングゲームプログラミング第30章追加!
2012/03/19 シューティングゲームプログラミング第29章追加!
2012/03/16 シューティングゲームプログラミング第28章追加!
2012/02/27 シューティングゲームプログラミング第27章追加!
2012/02/03 シューティングゲームプログラミング第26章追加!
2012/01/31 シューティングゲームプログラミング第25章追加!
2012/01/20 シューティングゲームプログラミング第23,24章追加!
2012/01/11 シューティングゲームプログラミング第22章追加!
2012/01/05 トップページ、ゲームプログラミング関連のトップページのデザインを変更
2012/01/04 シューティングゲームプログラミング第21章追加!
2012/01/01 シューティングゲームプログラミング第20章追加!
2011/12/25 シューティングゲームプログラミング第19章追加!
2011/12/22 シューティングゲームプログラミング第18章追加!
2011/12/18 シューティングゲームプログラミング第17章追加!
2011/12/17 シューティングゲームプログラミングページOPEN!
2011/11/21 ゲームプログラミングページOPEN!
2011/11/21 サイトデザインを大幅に変更
2011/11/17 TOPページのデザインを変更。相互リンクページに、複数サイト追加。
2011/11/06 WINAPI学習ページ(33~36章)追加
2011/11/05 WINAPI学習ページ(20~32章)追加
2011/10/27 WINAPI学習ページ(14~19章)追加
2011/10/21 WINAPI学習ページ(13章)追加
2011/10/21 サイトマップ、連絡ページ追加
2011/10/17 WINAPI学習ページ(6~11章)追加
2011/10/16 WINAPI学習ページ(1~5章)追加
2011/10/13 全体のレイアウト変更
2011/10/07 PHP学習ページ(8~11章)追加
2011/10/06 PHP学習ページ(1~7章)作成
2011/10/06 JavaScriptリファレンスページ作成
2011/10/05 C言語学習ページ発展編(10~14章)追加
2011/10/04 C言語学習ページ発展編(1~9章)追加。
2011/10/03 HTML/CSSリファレンスのページ追加。(個々の詳細ページは作成中)
2011/09/30 HTML学習ページ(8章)追加
2011/09/29 JavaScript学習ページ(12~17章)追加
2011/09/28 JavaScript学習ページ(1~11章)追加
2011/09/27 HTML学習ページ(4~7章)追加
2011/09/26 C言語学習ページ(27章)追加、C++学習ページ(17章)、HTML学習ページ(1~3章)追加
2011/09/25 C言語学習ページ(23~26章)を追加
2011/09/24 C++学習ページ(9~16章)追加
2011/09/23 C++学習ページ(3~8章)追加
2011/09/22 C言語の学習ページ(22章)とC++学習ページ(1~2章)追加
2011/09/21 C言語の学習ページ(15章~21章)を追加
2011/09/20 C言語の学習ページ(10章~14章)を追加
2011/09/19 サイト作成(随時更新予定)