mamohoのＨＰ作成講座

テーブルのいろいろな使い方　6

●　テーブルのいろいろな使い方　6

今回は　ショッピングサイトの商品紹介などでよく見かける
テーブルの使い方を紹介しますまず　このテーブルを見てください
どうなっているかわかりますか？

●　アネモネ

キンポウゲ科

紫のアネモネの花言葉は
「あなたを信じて待つ」

●　スイトピー

マメ科ハマエンドウ
(ラティルス)属

白いスイトピーの花言葉は
「微妙・優しい思い出・門出」

●　マーガレット

キク科アルギランセマム（シュンギク）属

マーガレットの花言葉は
「心に秘めた愛・誠実」

●チューリップ

ユリ科
チューリップ属

桃のチューリップの花言葉は、
恋の告白・真面目な愛

●　ダリア

キク科
ダリア属

ダリア（淡桃）の花言葉は、
エレガント

●　ユリ

ユリ科
ユリ（リリウム）属

ユリ（橙）の花言葉は、
華麗・愉快・軽率

まず　縦2行　横3列のテーブルを作ります
borderは　0セルの余白　cellpadding　を　10に設定しています
下はわかりやすいように　border　を　1にしますね

次に　それぞれのセルに　縦3行　横2列のテーブルを入れます

それぞれに入れたセルの　左側のセルの　上二つを結合させます
縦に結合させるのは　rowspan　のタグを使います
この部分に　写真が入るわけです

右側　一番上のセルの背景を　#ｆｆｃｃ99に指定して
一番下のセル二つを結合させています
横のセルの結合は　colspan　のタグを使います

あとは　写真の名前と　説明文をいれてあるだけです
ぱっと見るとぐちゃぐちゃしていますが　ひとつひとつの作業は
そんなに難しくありませんので　是非　挑戦してみてください