小野崎さんが、さらなる課題を考えてくださいました。

追加課題03：画像を投稿した日記の、そのサムネイル画像とタイトルを、サンプル画像のとおりに交互に、テーブル形式で並べてください。

• 70日以内に書かれたエントリー内に含まれる、最新の画像アイテムを並べてください。
• 一行に3つずつ、横200pxにしたアイテムのサムネイルを並べます。
• 各アイテムのサムネイルはエントリーにリンクを張って下さい。
• 1列目はサムネイルの下に、2列目はサムネイルの上にと、交互にエントリーのタイトルを並べます。
• 1エントリーに3行分を使います。写真はrowspanを使い、2行分にしてください。
• 最後に3つ並べるのに足りなくなった場所は、colspanとrowspanを使い空要素で埋めてください。

実装済みのページ

http://www.zelazny.mydns.jp/school/index2.html

＊ヒント：テーブルでの要素のHTML上への出現順序に合わせて、どうやって書き出すかに工夫が要ります。出力ブロックを変数として扱う事で、簡素化した記述が出来ます。変数のappendモディファイアを使います。

HTMLソース

<table>

<tr>
<td rowspan="2" class="nikki_thumb">
<a href="http://www.zelazny.mydns.jp/school/6/20080615.html"
 title="修学旅行の思い出"><img src="
http://www.zelazny.mydns.jp/school/assets_c/2008/06/
photo_06-thumb-200xauto.jpg"
 alt="修学旅行の思い出" title="修学旅行の思い出" /></a></td>
<td class="nikki_title">つうがくろにいつもいるネコ</td>
<td rowspan="2" class="nikki_thumb">
<a href="http://www.zelazny.mydns.jp/school/2/20080510.html"
 title="りかのじゅぎょう"><img src="
http://www.zelazny.mydns.jp/school/assets_c/2008/06/
photo_02-thumb-200xauto.jpg"
 alt="りかのじゅぎょう" title="りかのじゅぎょう" /></a></td>
</tr>

<tr>
<td rowspan="2" class="nikki_thumb">
<a href="http://www.zelazny.mydns.jp/school/3/20080605.html"
 title="つうがくろにいつもいるネコ"><img src="
http://www.zelazny.mydns.jp/school/assets_c/2008/06/
photo_03-thumb-200xauto.jpg"
 alt="つうがくろにいつもいるネコ" title="つうがくろにいつもいるネコ" /></a></td>
</tr>

<tr>
<td class="nikki_title">修学旅行の思い出</td>
<td class="nikki_title">りかのじゅぎょう</td>
</tr>

<tr>
<td rowspan="2" class="nikki_thumb">
<a href="http://www.zelazny.mydns.jp/school/4/20080420.html"
 title="春の遠足"><img src="
http://www.zelazny.mydns.jp/school/assets_c/2008/06/
photo_04-thumb-200xauto.jpg"
 alt="春の遠足" title="春の遠足" /></a></td>
<td class="nikki_title">にゅうがくしました</td>
<td rowspan="3" colspan="1"></td>
</tr>

<tr>
<td rowspan="2" class="nikki_thumb">
<a href="http://www.zelazny.mydns.jp/school/1/20080406.html"
 title="にゅうがくしました"><img src="
http://www.zelazny.mydns.jp/school/assets_c/2008/06/
photo_01-thumb-200xauto.jpg"
 alt="にゅうがくしました" title="にゅうがくしました" /></a></td>
</tr>

<tr>
<td class="nikki_title">春の遠足</td>
</tr>

</table>