【HTML50分講座】HTMLのTABLEタグを学ぶ①ーChapter07

今回は文章の本文を記述する＜BODY＞タグ内からTABLEタグを説明していきます。

前回の「Chapter06」の後、当講座に進んでください。

HTML文章の本文を記述する＜BODY＞タグ

BODYタグとは、HTML文章の本文を表すタグになります。

BODYタグ内はWEB（ブラウザ）に表示されます。

TABLEタグ

TABLEタグとは、THタグ、TRタグ、TDタグなどを組み合わせて表を作成するタグになります。

記述例：

  1. <table>
  2. <tr><th>見出し1</th><th>見出し2</th></tr>
  3. <tr><td>データ1A</td><td>データ1B</td></tr>
  4. <tr><td>データ2A</td><td>データ2B</td></tr>
  5. </table>

結果：

  1. 　　見出し1　　｜　見出し2　　｜
  2. 　　データA１　｜　データB１　｜
  3. 　　データA２　｜　データB２　｜

表を作成したい場合は、TABLEタグの中にTRタグとTDタグを入れていきます。TRタグで横方向の一行を定義し、TDタグでテーブル（表）のセルを定義します。

border属性

border属性を使って、テーブル枠線の太さを指定します。border属性を記述しない、または、border=”0″を指定すると枠線を表示しません。枠線を表示する場合は、border=”1″を指定します。ちなみに、初期値では枠線は表示しません。

TRタグ

TRタグとは、Table Rowの略語で、テーブル（表）の横方向の一行を定義するタグです。TRタグは<table>～</table>の間で使用します。

記述例： <table><tr>～</tr></table>

THタグ

THタグとは、Table Headerの略語で、テーブル（表）の｢見出し｣セルを定義するタグです。THタグは<table>～</table>の間のさらに、<tr>～</tr>の間で使用します（入れ子にして使用）。

記述例： <table><tr><th>見出し1</th><th>見出し2</th></tr></table>

TDタグ

TDタグとは、Table Dataの略語で、テーブル（表）の｢データ｣セルを定義するタグです。TDタグは<table>～</table>の間のさらに、<tr>～</tr>の間で使用します（入れ子にして使用）。

記述例： <table><tr><td>データ1</td><td>データ2</td></tr></table>

今日の問題

まず始めに、以下をメモ帳で記述し、Chapter07.htmlファイルとして保存してください。

  1. <html>
  2. <head>
  3. <meta charset=”UFT-8″>
  4. <title>ここページのタイトルです</title>
  5. <meta name=”description” content=”ページの要約文”>
  6. </head>
  7. <body>
  8. <section>
  9. <h2>TABLEタグの勉強</h2>
  10. <table>
  11. <tr>
  12.   <th>1行目</th>
  13.   <th>2行目</th>
  14. </tr>
  15. <tr>
  16.   <td>〇</td>
  17.   <td>〇</td>
  18.   <td>×</td>
  19.   <td>×</td>
  20. </tr>
  21. </table>
  22. </section>
  23. </body>
  24. </html>

問1

Chapter07.htmlを実行した結果、

  1. １行目　｜　２行目
  2. 　〇　　｜　　〇
  3. 　×　　｜　　×

となるように、修正してください。

問2

Chapter07.htmlのテーブルに枠線を表示してください。

問3

Chapter07.htmlのテーブル表（2×3）から、テーブル表（3×4）に変更してください。

問4

Chapter07.htmlのテーブル表（3×4）を使って、

  1. １行目　｜　２行目　｜　３行目
  2. 　〇　　｜　　×　　｜　　△
  3. 　□　　｜　　〇　　｜　　×
  4. 　△　　｜　　□　　｜　　〇

になるように、修正してください。

宿題

CSS（スタイルシート）の border-color: blue を使って、テーブルの枠線を青色に変更してください。

コメント