表を作る
上部
HTMLには表を作るためのタグもあるんだよ。
例えば、学君の自己紹介に年表を追加する場合は、表を使ったほうが分かりやすいよね？
学君の簡単な年表を自己紹介に追加してみようか。
学
そうですね。じゃあ、僕の簡単な年表を作ってみます。
「学の年表」
年 齢 ： 内容
０歳 ： 誕生。
６歳 ： 小学校入学。給食大好き。
１２歳 ： 中学校入学。お弁当大好き。
上部
この学君の年表の場合は、
- 表のタイトルが「学の年表」で
- 表の見出しが「年齢」と「内容」になって
- 行数が４行つで、
- 列数が２列つなので
- ４行２列の表になるね。
HTMLで表を作る場合の基本
上部
じゃあ、まずは表でHTMLを作る場合の、基本から説明していこう。
１行１列の表をHTMLで書くと次のようになるんだ。
<table>
<tr>
<td>ここに表の内容を書きます</td>
</tr>
</table>
学
なるほどー。これまた難しそうですねぇ。
上部
HTMLで表を作るのは結構複雑なので、ちょっとずつ説明していくよ。
<table>とは
上部
<table> はここから表が始まりますよという目印だよ。
そして、 </table> がここで表が終わりますよという目印だよ。
<tr>とは
上部
<tr> はここから行が始まりますよという目印だよ。
そして </tr> はここで行が終わりますよという目印だよ。
４行の表を作る場合は<tr>〜</tr>が４つ必要になるよ。
<td>とは
上部
<td> はここからセル（マス）が始まりますよという目印だよ。
そして </td> はここでセル（マス）が終わりますよという目印だよ。
２行の表を作る場合は、１つの<tr>〜</tr>の間に
<td> 〜 </td>を２つ必要になるよ。
表の１セル（マス）ごとの内容は全て<td> 〜 </td>の間に書いていくんだよ。
表のタイトルを書く
上部
表のタイトルを入れる場合は、<caption>〜</caption>の間にタイトルを記載して
<table>の次の行に追加すればいいよ。これは必須ではないので必要に応じて入れよう。
<table>
<caption>ここに表のタイトルを書きます</caption>
<tr>
<td>ここに表の内容を書きます</td>
</tr>
</table>
行を追加する
上部
行を増やして２行１列にする場合を考えてみよう。行を追加したい場合は、<tr>〜<td>〜</td>〜</tr>を追加すればいいので次のようなHTMLになるよ。
<table>
<tr>
<td>ここに１行１列目の内容を書きます</td>
</tr>
<tr>
<td>ここに２行１列目の内容を書きます</td>
</tr>
</table>
列を追加する
上部
次に、列を増やして１行２列にする場合を考えてみよう。列を追加したい場合は、
<tr>〜</tr>の中の<td>〜</td>を追加すればいいので次のようなHTMLになるよ。
<table>
<tr>
<td>ここに１行１列目の内容を書きます</td>
<td>ここに１行２列目の内容を書きます</td>
</tr>
</table>
見出しセル（マス）を指定する
表の見出しとなるセル（マス）を指定する場合は、<td>〜</td>ではなく、<th>〜</th>を使おう。
見出しセル（マス）の内容はセルの中で中央寄せになって、太字になるよ。
例えば、２行１列の表で、１行目を見出しにする場合のHTMLは次のようになるよ。
<table>
<tr>
<th>ここに見出しを書きます</th>
</tr>
<tr>
<td>ここに表の内容を書きます</td>
</tr>
</table>
学の年表をHTMLにして自己紹介に追加する
学
なるほどー。じゃあ、さっき作ってみた年表をHTMLにして自己紹介に追加してみますね。
２行４列の表で、表のタイトルをつけて、見出しの行を付けて・・・。こんな感じでしょうか。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>学の自己紹介</title>
</head>
<body>
<h1>学の自己紹介</h1>
<h2>名前</h2>
<p>名前は学（まなぶ）ですが勉強は苦手です。</p>
<h2>性格</h2>
<p>元気がとりえです。<br>
ちょっとおっちょこちょいで小さな失敗をすることがあります。</p>
<h2>趣味</h2>
<p>趣味はサッカーと映画です。</p>
<h3>サッカー</h3>
<p>週末には草サッカーをやっています。</p>
<h3>映画</h3>
<p>好きな映画のジャンル</p>
<ul>
<li>アクション映画
<li>ホラー映画
</ul>
<table>
<caption>「学の年表」</caption>
<tr><th>年齢</th><th>内容</th></tr>
<tr><td>０歳</td><td>誕生</td></tr>
<tr><td>６歳</td><td>小学校入学。給食大好き。</td></tr>
<tr><td>１２歳</td><td>中学校入学。お弁当大好き。</td></tr>
</table>
</body>
</html>
上部
では、ここまでを表示してみようか。
学の自己紹介を新しいウィンドウで開く
学
ありゃ？表の線が無いですけど・・・？
