イベントページのテーブル作成

売れるホームページの作り方 ⇒ 速攻HTML ⇒ テーブルを作成する


速攻HTML

イベントページevent.htmlにテーブルを追加作成

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



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


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


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


見出1値1
見出2値2

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

<table>
 <tr>
  <th>見出1</th>
  <td>値1</td>
 </tr>
 <tr>
  <th>見出2</th>
  <td>値2</td>
</table>



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


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


【 この上は省略 】


 <h2>季節のイベント</h2>

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

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

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


 <address>Copyright (C) 河口湖観光社</address>

 </div>

 </body>
</html>






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


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


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




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


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


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


・見出しが不揃い
・文字が大きい


  イベントページ