- 締切済み
Tableの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）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
非推奨タグを初めとして、tableを配置のために使用するなど、 どのような参考書をご覧なっているのでしょう。 ≫ CENTER要素は、DIV要素でalign属性を"center"に設定することと全く等価である。 CENTER要素は推奨しない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#edef-CENTER ) ≫単に文書内容を整形する目的だけで表を用いるべきでない。 (http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) もちろん、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; }
お礼
ご指摘ありがとうございました。