- 締切済み
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>
- Tetraodon
- お礼率87% (14/16)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （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; }
関連するQ&A
- CSSを使ってテーブルでセル全体をリンクしたい
CSSを使ってテーブルでセル全体をリンクしたい CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。 ４つのセル？を横並びにして（２段目は説明書き）、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。 block要素？を使うらしい？ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう？ 色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。 ホームページ作りもＣＳＳも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです ソースをのっけておきます ＜ｃｓｓの方＞ table#table-01 { width: 600px; border: 0px #E3E3E3 solid; border-collapse: separate; border-spacing: 20px 0; } table#table-01 th { width: 130px; height: 70px; padding: 5px; border: #E3E3E3 solid; border-width: 1px 0 0 1px; background: #F5F5F5; font-weight: bold; line-height: 120%; text-align: center; } table#table-01 td { vertical-align: top; padding: 1px 3px 20px 0; border: 0px #E3E3E3 solid; border-width: 0; text-align: center; } ＜ｈｔｍｌの方＞ <table id="table-01" cellspacing="20px"> <tr><th>●●●●</th><th>▲▲▲</th><th>■■■</th><th>○○○</th></tr> <tr><td>●の説明</td><td>▲の説明</td><td>■の説明</td><td>○の説明</td></tr> よろしくお願いします
- ベストアンサー
- HTML
- tableタグについて
tableタグの挙動について教えてください。 下記のタグで、tableの幅は240pxにしたいのですが、 ブラウザ表示（Chrome）では230pxとなりました。 この10pxの隙間はどこで発生しているのでしょうか？ どうぞよろしくお願いします。 ーーーーHTMLーーーーー <body style="width:240px;margin:0 auto;"> <div class="list-box"> <table width="240" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td>テキスト/td> <td>テキスト/td> </tr> </tbody></table> </div> </body> ーーーーCSSーーーーー .list-box{margin:0 auto;} .list-box table{ width:100%;} .list-box table td:first-child{ background:#900;} .list-box table td:last-child{ background:#069;}
- ベストアンサー
- CSS
- テーブルが一行下がる・・・
HTMLを作成していて、横一列に並べたいのに何故か一行下がってしまいます。 具体的には、 <TABLE width="50" border=1 align=left> <TBODY> <TR><TD noWrap align=middle>項目A</TD> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> </TABLE> <TABLE width="20" border=1 align=middle> <TBODY> <TR><TD noWrap align=middle>タイトル</TD></TR> </TBODY> </TABLE> <TABLE width="50" border=1 align=right> <TBODY> <TR><TD noWrap align=middle>項目B</TD></TR> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> というソースで、「項目A」→「タイトル」→「項目B」と横一線に並べたいのですが、何故か「項目B」が一行下がって表示されます・・・ HTMLを作るのは初めてで、色々と調べたのですがよく分かりませんでした・・・。 どなたか助けてください！！ よろしくお願い致しますm(_ _)m
- ベストアンサー
- HTML
- tableでレイアウトが崩れる場合
技術の足りなさからCSSにできなかったので、再度テーブルでサイズを指定してやってみようとしているところです。 どこかの数字がおかしくなっていると思うのですが、どうしてもわかりません。 ちゃんと表示できるブラウザとそうでないブラウザがあり、Firefoxは環境設定により表示が崩れる場合があります。 使用ソフトはビルダーの１１です。 なんでも良いのでどうぞアドバイスをよろしくお願い致します。 <body> <div ALIGN="center"> <table> <tbody> <tr> <td CLASS="td4" HEIGHT="70"> <table WIDTH="600" CELLSPACING="1" CELLPADDING="0"> <tbody> <tr> <td VALIGN="top" CLASS="td1" WIDTH="400" ALIGN="left" HEIGHT="180"> <b>文字 <textarea ROWS="15" COLS="70">文字</textarea><br> <br> </td> <td VALIGN="top" CLASS="td1" WIDTH="100" HEIGHT="180"> <table CELLSPACING="0" CELLPADDING="4"> <tbody> <tr> <td CLASS="td2" HEIGHT="16" WIDTH="100">文字</td> </tr> </tbody> </table> 文字 <br> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div> </body>
- ベストアンサー
- HTML
- テーブルだらけのページをスッキリさせたい
いま、ホームページビルダーで趣味のサイトを作っているところなのですが、 HTMLのことでわからない事があるので教えてください。 現在、大きなテーブルの中にさらに小さなテーブルをいれています。 そのためタグがとてもごちゃごちゃしています。 小さなテーブルはサイト更新の度に追加していく予定なので、 見た目よりデータが重いページになってしまうと思います。 これをなんとかスッキリさせたいのですが 良い方法はあるでしょうか？ スタイルシートを使えばいいのでしょうか？ どのように使用すれば無駄の無い形になるか 具体的なアドバイスをいただけると助かります。 参考までに作りかけのタグを載せました。 悪い部分等があったら、ぜひお願いします。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>サイト名「タイトル未定」</TITLE> </HEAD> <BODY> <CENTER> <TABLE border="0" cellpadding="0" cellspacing="0" width="840"> <TBODY> <TR> <TD colspan="2" align="center" height="40">サイト名 タイトル</TD> </TR> <TR> <TD colspan="2" align="center">サイトの説明と注意事項</TD> </TR> <TR> <TD colspan="2" height="15"> <HR> </TD> </TR> <TR> <TD align="center"> <TABLE border="1" cellpadding="2" cellspacing="1" bordercolor="#000000"> <TBODY> <TR> <TD rowspan="3" width="100" height="100" align="center" bgcolor="#009900">花の写真</TD> <TD width="80"><FONT size="-1">花の名前</FONT></TD> <TD width="150"><FONT size="-1">チューリップ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">分類</FONT></TD> <TD width="150"><FONT size="-1">あああああ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">撮影日</FONT></TD> <TD width="150"><FONT size="-1">2008年4月1日</FONT></TD> </TR> <TR> <TD colspan="3" height="80"><FONT size="-1">花の特徴など<BR> あああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいいいい<BR> うううううううううううううううううううううううう。</FONT></TD> </TR> </TBODY> </TABLE> <BR> </TD> <TD align="center"> <TABLE border="1" cellpadding="2" cellspacing="1" bordercolor="#000000"> <TBODY> <TR> <TD rowspan="3" width="100" height="100" align="center" bgcolor="#999900">花の写真</TD> <TD width="80"><FONT size="-1">花の名前</FONT></TD> <TD width="150"><FONT size="-1">さくら</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">分類</FONT></TD> <TD width="150"><FONT size="-1">あああああ</FONT></TD> </TR> <TR> <TD width="80"><FONT size="-1">撮影日</FONT></TD> <TD width="150"><FONT size="-1">2008年4月2日</FONT></TD> </TR> <TR> <TD colspan="3" height="80"><FONT size="-1">花の特徴など<BR> あああああああああああああああああああ<BR> いいいいいいいいいいいいいいいいいいいいいいいい<BR> うううううううううううううううううううううううう。</FONT></TD> </TR> </TBODY> </TABLE> <BR> </TD> </TR> <TR> <TD align="center"></TD> <TD align="center"></TD> </TR> <TR> <TD colspan="2"> <HR> </TD> </TR> </TBODY> </TABLE> </CENTER> </BODY> </HTML>
- ベストアンサー
- ホームページ作成ソフト
- テーブルに画像を入れると、テーブルの幅が広がってしまいます
HTML初心者の者です。 ３行２列のテーブルを作り、左側の列に縮小した画像を入れたのですが、左側の列が画面いっぱいに広がってしまい、画像の幅に合わせて幅を狭くすることが出来ないでいます。 どうしたら、画像の幅に合わせて左列の幅を狭くすることが出来るでしょうか。 その部分のHTMLは、以下の通りです。 <table border="0" align="center"> <tr> <td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> <tr> </td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> <tr> </td><img src="*****.jpg" width=20% align="right"> </td> <td>説明文・・・・</td> </tr> </table>
- ベストアンサー
- HTML
- テーブル入れ子した時の、テーブル外枠罫線を非表示にしたい
下記のように、入れ子にしたテーブルを作成しましたが、「AA, BB, 10, 20」のテーブル外枠線が太くなってしまいます。全て細い線で表示させるには、入れ子にしたテーブル外枠罫線を非表示にすれば良いのかなと思うのですが、どうすればよろしいでしょうか？ また他によい方法があればアドバイスお願いします。 条件として、 (1)入れ子でテーブルを作成 (2)教えて！gooのように細い線を使用 です。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE TYPE="text/css"> <!-- TABLE { margin: 0px; border: 1px solid #ff0000; border-collapse: collapse; } TD { padding: 0px; border-style: solid; } --> </STYLE> <TITLE></TITLE> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD>みかん</TD> <TD>バナナ</TD> <TD>パイン</TD> </TR> <TR> <TD>やさい</TD> <TD> <TABLE width="100%" border="1"> <TBODY> <TR> <TD>AA</TD> <TD>BB</TD> </TR> <TR> <TD>10</TD> <TD>20</TD> </TR> </TBODY> </TABLE> </TD> <TD>りんご</TD> </TR> <TR> <TD>いちご</TD> <TD>すいか</TD> <TD>れもん</TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- 締切済み
- HTML
- マウスカーソルを乗せた時にテーブルの行の色を変える
マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて 以下のようにCSSとHTMLを書いてみました。 しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。 【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
- テーブルのセルに画像をピッタリ表示するには
よろしくお願いします。 テーブルの以下のタグ並びで、 <img src=>の部分の画像jpgを、枠にピッタリ表示したいのです。 以前作った他のhtmlファイルでは、画像のサイズに変化があっても、自動的に枠にピッタリ表示でき、 同じ通りタグを書いたはずなのですが、 なぜか？今回は、この画像が、 一行二列目の枠（これが大きくなってしまう） のその左端寄りに、幅よりも小さく浮いたように表示されてしまいます。（枠の右側に不要な余白ができてしまう） 枠や画像のサイズを固定しても同じです。 この画像の枠以外は、画像ではなくテキストです。 うまくいかないのはなぜなのでしょう？ どこに間違いがあるのでしょうか、教えてください、お願いいたします。 <table width="85%"border="1" cellpadding="5" cellspacing="5" align="center"> <tr><td>一行一列目 </td> <td rowspan="3">１行二列目～ココの部分～<img src="" width="" height="" align="center" valign="top" alt=""> </td></tr> <tr><td>２行一列 </td></tr> <tr><td>３行一列 </td></tr> <tr><td>４行一列目 </td> <td>４行二列目 </td></tr> <tr><td colspan="2">５行一列 </td></tr> <tr><td colspan="2">６行一列 </td></tr></table>
- ベストアンサー
- HTML
- HTMLでテーブルをfloatで中央配置に並べたい
よろしくお願いします。 floatを使ってテーブルを横に複数個並べているのですが、全体が左に寄ってしまいます。 並べたテーブルすべてを中央に配置するにはどうしたらよいのでしょうか。 テーブルとテーブルの間の隙間を固定にしたいので、マージンは固定です。 ■HTML <body> <table><tr><td>TEST1</td></tr></table> <table><tr><td>TEST2</td></tr></table> <table><tr><td>TEST3</td></tr></table> </body> ■CSS table{ float: left; width: 100px; border: 1px solid #000000; margin: 0px 10px 0px 10px; } よろしくお願いいたします。
- ベストアンサー
- CSS
お礼
ご指摘ありがとうございました。