テーブルを作成する

　　この文字をクリックするとサンプルダウンロード出来ます。


イベントページの概要を作成　←　｜　→　テーブルをデザインする


テーブル（表）は色々利用されます。ここではイベント一覧をテーブルを使って作成します。

テーブルで使用するタグは次の通りです。
・＜table＞ ：　テーブルを作成します。
・＜tr＞　　：　行を作成します。
・＜th＞　　：　見出し様セルを作成します。
・＜td＞　　：　セルを作成します。
・どのタグも開始タグと終了タグを入れ子にして使います。

セルの値とタグの関係を下記の例で説明します。

見出１	値１
見出２	値２

htmlでは次の様な記述になります。

<table>
　<tr>
　　<th>見出１</th>
　　<td>値１</td>
　</tr>
　<tr>
　　<th>見出２</th>
　　<td>値２</td>
</table>


●　早速イベント部分をテーブルで記述します。

htmlソースは次の様になります。

【　この上は省略　】
　<h2>季節のイベント</h2>

　<p>牛乳の工房・・略・・お知らせしてまいります。</p>

　<table　summary="イベント一覧">
　<tr>
　<th>春の高原お散歩</th>
　<td>春の花が咲き始め、木々の新緑がまぶしくなるころ、毎年「春の高原お散歩」を開催しています。
　　　春の息吹あふれる清々しい高原の中を自由に散策してください。</td>
　</tr>

　<tr>
　<th>高原列車試乗会</th>
　<td>工房近くを通る高原列車に実際に乗ってみます。JR最高標高地点と、日本一標高の高い駅を擁
　　　することで知られる小海線。特産の高原野菜の畑や牧場のただ中を行く列車は、どこから見ても絵に
　　　なります。</td>
　</tr>

　<tr>
　<th>大橋を渡ろう</th>
　<td>
　八ヶ岳連峰と八ヶ岳高原ラインきっての景勝地でもある川俣渓谷にかかる東沢大橋。絶好の撮影ポイント
　　　でもあるこの橋を徒歩で渡って見ます。ヒンヤリ冷たい川の空気が感じられて最高に気持ち
　　　いいですよ。</td>
　</tr>

　<tr>
　<th>自然の中の暮らし展</th>
　<td>自然と一体化した生き方や暮らしの形を提案する展示会です。丘の上のログハウス、木漏れ日
　　　の中のウッドデッキ、木の上の隠れ家などなど…。実際の自然の中で、こうした暮らしの楽しさや
　　　わくわく感を体験していただくことができます。宿泊をご希望の方は「メール」から連絡
　　　してください。</td>
　</tr>

　<tr>
　<th>木工教室</th>
　<td>緑の森の中に点在するのは、清里開拓の精神を受け継いで意欲的な創作活動を進める工芸作家
　　　たちの工房兼ギャラリー。ここで体験工作をしていただきます。またアンティークオルゴールの演奏
　　　が聴ける博物館や、地ビールと手作りソーセージが味わえるレストランなども、楽しみが尽きない
　　　クラフトヴィレッジです。</td>
　</tr>

　<tr>
　<th>冬のお散歩ウィーク</th>
　<td>真っ白な雪で化粧した冬の八ヶ岳を仰ぎ見る頃、毎年「冬のお散歩ウィーク」を開催しています。
　　　高原はとても静かで、幻想的な世界が広がっています。但し寒さは半端ではありません。防寒着
　　　を用意していますので身軽でお越し下さい。</td>
　</tr>
　</table>

　<address>Copyright (C) 野辺山高原社</address>

　</div>

　</body>
</html>

---

見出し表示はthタグが必須と言う事では有りません。
見出し表示も、通常のtdタグを使用する事の方が多いと思います。

tableタグ内のプロパティsummaryはテーブルに名前を付ける為です。
必須では有りません。音声ブラウザ・検索エンジン対応です。

記事を左右に配置したり、画像を自由に配置するにはhtmlの段組ではかなり面倒になります。
この為、記事や画像をテーブルのセル値に置き、罫線を消す事で実現させる事を良く行います。
テーブルは結構活躍します。

---

サンプルを表示した結果です。

thタグは見出しを表すため、太字で中央に表示されます。
tdタグは普通の太さで左に揃えて表示されます。
かなり野暮ったくなっています。修正する必要があります。

・罫線が野暮
　セルを取り囲む様に罫線が引かれます。またテーブル全体にもテーブルを取り囲む罫線
　が引かれます。この為、二重線が引かれた様に見えてしまいます。
・見出しが不揃い
・文字が大きい