Tableの1セル内に画像・テキストを均等貼り付けしたい

締切済

質問者：Tetraodon
質問日時：2010/01/03 21:50
回答数：1件

初心者です。　HTMLと外部CSSについて教えていただきたく。
1列3行のテーブルの2行目に　複数枚の画像を均等に横並びに配置し、改行してそれぞれの画像の下に画像タイトル文を入れたいと考えています。　一つのセルの上行に画像下行にテキストといった考えです。　
列幅は750px　画像1枚の幅は最大350px。　この場合、下記のHTMLをどのように改変し、外部CSSはどのように書けばよいでしょうか。　ブラウザはIE7以降とFireFOX3.5.xを考えています。　
追記：このテーブルデザインをフォームとして他でも使いたいと考えています。　画像の枚数は2枚から最大4枚で変動します。　画像とタイトル文の間に不可視ラインを入れて1列4行のテーブルでもOKと考えております。

手を入れたいHTML　（写真3枚の場合。）
<BODY>
<CENTER>
<TABLE border="1" width="750">
<TBODY>
<TR>
<TD align="center">1行目</TD>
</TR>
<TR>
<TD>2行目　ここに写真3枚横並び　<ｂｒ>　写真1　写真2　写真3　　 </TD>
</TR>
<TR>
<TD align="center">3行目</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</BODY>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2010/01/04 00:51

非推奨タグを初めとして、tableを配置のために使用するなど、

どのような参考書をご覧なっているのでしょう。
≫ CENTER要素は、DIV要素でalign属性を"center"に設定することと全く等価である。 CENTER要素は推奨しない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
≫単に文書内容を整形する目的だけで表を用いるべきでない。
(http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 … )

　もちろん、HTMLは文書構造に従ったものでないとなりません。--これは必須。

　たとえば作成されようとしている部分が
・何らかのリストである。
　たとえば商品の写真とデータ
・リストを横に並べたい
・画像データのサイズによりある程度可変させたい。

の場合、HTMLは
<ol class="product">
　<li style="width:370px;">商品1タイトル
　　　<ol>
　　　　　<li>商品1写真(幅350px)</li>
　　　　　<li>商品1説明</li>
　　　</ol>
　</li>
　<li style="width:260px;">商品2タイトル
　　　<ol>
　　　　　<li>商品2写真(幅240px)</li>
　　　　　<li>商品2説明</li>
　　　</ol>
　</li>　
</ol>

となりますね。
　こうしておけば、読み上げブラウザでも、携帯端末でも、研削エンジンでも意味がわかる。
★HTMLで文章の構造を書く。

　次に、スクリーンディプレイ(パソコンの画面のこと)用にそととで、デザインを決めていきます。
1) 上記リストを横に並べる。
2) タイトルがあれば表示する。
3) 写真の下に説明を書く。
4) 画像の幅は変化する。
5) 全体の幅は最大で750px程度とする。
　　携帯端末のように小さなディスプレイにも対応させる。
CSS

ol.product{
　　margin:0px 0px 1em 0px;
　　padding:0px;
　　display:block;
　　position:relative;
　　max-width:750px;
　　width: 80%;
　　margin-left:auto;
　　margin-right: auto;
}
ol.product li{
　　display: block;
　　liststyle: none;
　　margin: 0px;
　　padding: 0px;
　　text-align:center;
　　float:left;
}
ol.product li ol{
　　display:block;
}
ol.product li ol li{
　　float: none;
}