Atelierで“セル”タグの付いているブログ記事

2010年2月11日

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

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

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

探鳥メモ
dateweatherlocationNameqtty.memo
Revised on Feb. 11th, 2010
2010/2/11
7:15 - 8:15
曇天
 ときに小雨
田辺池 ヒドリガモ 26羽 3グループ
東谷池 ヒドリガモ
カイツブリ
コサギ
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">3グループ</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>