隠居のHTML備忘録：テーブル・セルを縦に結合する

　なんとなく週に一回しか行かない習慣になってしまって、モッタイナイので　スポーツ・ジムを退会した。その代わりに、毎朝のウォーキングを再開することにした。
　１時間～２時間ほど歩くと、野鳥の撮影場所ロケハンができる。ほとんど決まった場所に行くのだが、行くたびに双眼鏡の視野に入ってくる野鳥に変化がある。
　それで、後々の記録にと思って、「探鳥日誌」とでも名付けて、下のようなWeb ページを作ることにした。

　今まで、テーブルのセルを縦方向に連結したことがなかったので、ネット・サーチをしてみると、簡単な方法は載っているが、下のような少し複雑な表のコード例は紹介されていなかった。いろいろとトライしてみたが上手くいかない。
　それで、Excel の表が Web ページにできることを思い出し、Excel でサンプル・ページを作り、そのWeb ページのソースをコピペして参考にした。ブログに使った　html ソース・コードを備忘録として記録しておきたい。

探鳥メモ
date	weather	location	Name	qtty.	memo
Revised on Feb. 11th, 2010
2010/2/11 7:15 - 8:15	曇天　ときに小雨	田辺池	ヒドリガモ	26羽	３グループ
		東谷池	ヒドリガモカイツブリコサギ	11羽 2羽 1羽	この池で初めて
		西松尾池	マガモ	10羽	この池で初めて


<table border="1" align="center">
<thead>
<tr>
<td id="th1" colspan="6" align="middle">探鳥メモ</td></tr>
<tr align="middle"><td id="th1">date</td><td id="th1">weather</td><td id="th1">location</td><td id="th1">Name</td><td id="th1">qtty.</td><td id="th1">memo</td></tr>
</thead>
<tfoot>
<tr>
<td bgcolor="#cccccc" align="right" colspan="6">Revised on Feb. 11th, 2010</td>
</tr>
</tfoot>
<tbody>
<col span=6 > 
<tr >
  <td width="100" rowspan=3 >2010/2/11<br />   7:15 - 8:15</td>
  <td width="100" rowspan=3 >曇天<br />　ときに小雨</td>
  <td width="100">田辺池</td>
  <td width="115">ヒドリガモ</td>
  <td width="80" align="right">26羽</td>
  <td width="230">３グループ</td>
 </tr>
 <tr >
  <td >東谷池</td>
  <td >ヒドリガモ<br />カイツブリ<br />コサギ</td>
  <td align="right" >11羽<br />2羽<br />1羽</td>
  <td valign="top">この池で初めて</td>
 </tr>
 <tr >
  <td >西松尾池</td>
  <td >マガモ</td>
  <td align="right" >10羽</td>
  <td >この池で初めて</td>
 </tr>
</tbody></table>

隠居のHTML備忘録：テーブル・セルを縦に結合する

タグ:

トラックバック

コメントする