- ベストアンサー
【IE】表示が全てセルの指定に合わされてしまう症状を回避したい
既出かも知れませんが、探し出せなかったもので、質問させて頂きます。 テーブルのセルをセンター揃えに指定すると、その中に入っているテーブルの中身までセンター揃えになってしまいます。 環境はWIN・XPのIE6です。Firefoxや、Macでは、きちんと左揃えで表示されます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テスト</title> </head> <body> <table width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#F5F5F5">このテキストを左揃えに！</td> </tr> </table></td> </tr> </table> </body> </html> テキスト部分を<div align="left">で囲むと左揃えになるのですが、それ以外での解決法をご存じの方、教えて下さい。よろしくお願い致します。 （左揃えの場合、特に指定を入れなくてもいいと思うのですが・・・）
- akoblue
- お礼率67% (96/142)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "?http://www.w3.org/TR/html4/loose.dtd">? <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テスト</title> <style type="text/css"> <!-- .test td {text-align:left;} --> </style> </head> <body> <table width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"> <table width="400" border="0" cellspacing="0" cellpadding="0" class="test"> <tr> <td bgcolor="#F5F5F5">このテキストを左揃えに！</td> </tr> </table></td> </tr> </table> </body> </html> IEの挙動って嫌ですね。 回答しておいてなんですが、この方法と＃1さんの方法とどっちがベターなのかが気になります。
その他の回答 (1)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テスト</title> </head> <body> <table width="500" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="400" border="0" cellspacing="0" cellpadding="0" style="margin:0px auto;"> <tr> <td bgcolor="#F5F5F5">このテキストを左揃えに！</td> </tr> </table></td> </tr> </table> </body> </html> これでどうでしょう、これはIEだけの現象です。 そのままでもFirefoxではちゃんと左揃えになっています。
お礼
アドバイスありがとうございます！ 私のやり方が悪いのか、教えていただいたやり方で解決できていません。。。すみません。コード上は問題ないと思うのですが。もう少し検証してみます。
関連するQ&A
- Mac IEのバグなのでしょうか？
TMEspionです。 <table border="0" cellpadding="5" cellspacing="5"><tr><td width="100" align="left" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="center" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="right" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td></tr><tr><td align="left" bgcolor="#999999">左</td><td align="center" bgcolor="#999999">中</td><td align="right" bgcolor="#999999">右</td></tr></table> --------------------------------- 上記のソースの様に、テーブルを縦2段、横2列にセルを作り、上段はテーブルタグ、下段はテキストでそれぞれalign属性をleft、center,rightと設定しています。 ところがInternet Explorer 5.2 for Macで見ると、 上段右のテーブルタグは「align="right"」の効果が出ていません。 この質問を呼んでいる回答者様には、ブラウザでどう表示されるんでしょうか？ どう表示されたかという結果とブラウザ名を教えて下さい。
- ベストアンサー
- HTML
- IE セル間に隙間が・・・
HTML初心者です。 テーブルでHPをレイアウトしたいのですが、--1と--3のセル間に微妙な隙間ができてしまいます。NNでは問題なく表示されます。通常どの様なことが原因するのでしょうか？よろしくお願いいたします。 <td width="396" height="234"valign="top"><table width="100%" height="234" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="180" rowspan="2" valign="bottom" >1 <img src="../image/***" width="180" height="180" align="bottom"></td> ------1 <td width="216" height="98" valign="bottom">***</td> </tr> <tr> <td height="136" valign="bottom" ><img src="../image/*** width="91" height="61" border="1"><br>></td> </tr> </table></td> <td width="10" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="262"></td> ------３ <td valign="top" >*** <br> </td>
- ベストアンサー
- HTML
- ドキュメントタグについて
下記のHTMLを開くと、赤のボックスと青のボックスを上下いっぱいに離して表示したいのですが、どうしてもくっついてしまいます。 なぜでしょうか？って、実は、原因が解っているのですが、ドキュメントタグの "http://www.w3.org/TR/html4/loose.dtd" この部分を削除すると、うまくいきます。 という事は、この部分がいらない？という事になるのですけど、削除しても、問題ないですか？ 誰か解る方、よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>hatena</title> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="100" height="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td valign="top" bgcolor="#FFFFFF"> <table width="10" border="0" cellspacing="0" cellpadding="0"> <tr><td bgcolor="#FF0000"><img src="image-top/spacer.gif" width="100" height="100"></td> </tr> </table> </td> </tr> <tr> <td valign="bottom" bgcolor="#FFFFFF"> <table width="10" border="0" cellspacing="0" cellpadding="0"> <tr><td bgcolor="#0033FF"><img src="image-top/spacer.gif" width="100" height="100"></td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- ヤフオクのテンプレートでバックグラウンドを使いたい
今、オークション用のテンプレートを作ってるのですが、テーブルの背景に、 <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> と言った感じで画像を背景に配置したいと考えていますが、どうやってもうまくいきません。 プレビュー表示の段階で、ソースコードを見てみたのですが、ちゃんと設定されているにもかかわらず、背景画像だけが表示されません。 別の方法で、 <div style="background-image:url(http://www.000.com/000.png);"> でも試して見ましたが、同じ結果でした。 背景画像の上に「商品説明」などの画像を重ねて配置したいので、どうにか上手くできる方法がありましたら是非教えて下さい。 ※上に重ねる画像だけが表示されます。 参考までに今編集中のソースを貼っておきます。 <center> <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> <tr> <td align="center" valign="top"><br /> <center> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/001.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 商品説明 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/002.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 発送方法 </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/003.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> お支払い方法 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/004.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 注意事項 </p></font></td> </tr> </table></td> </tr> </table> </center>
- ベストアンサー
- オークション
- 入れ子にしたテーブルをheight100%にする
お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- Dreamweaverのデザインで表示がおかしい時
IEだと綺麗に表示されるけど、Dreamweaverのデザインで見ると表示がおかしい時って結構あり困ってます。 ソースフォーマットとかやってもやはり駄目です。 今回の場合、どのタグが悪そうでしょうか？ <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-JP"> </HEAD> <BODY> <BR> <BR> <BR> <TABLE align="center" cellSpacing=0 cellPadding=0 width="95%" bgColor=#0066cc border=0> <TBODY><TR><TD> <TABLE cellSpacing=2 cellPadding=1 width="100%" border=0> <TBODY> <TR bgColor=#0066cc> <TD align=middle><SMALL><B><FONT color=#ffffff> テキストツール </FONT></A></B></SMALL> </TD></TR> <TR bgColor=#ffffff> <TD align=middle> <TABLE height="400" cellSpacing=0 cellPadding=1 width="95%" border=0> <TBODY> <TR valign=top> <TD width="100%" valign="center" align="center"> <BR><A>トップページ</A><BR><BR> </TD> </TR> <TR valign=top> <TD width="100%" valign="top" align="center"> <A HREF="list">あ</A><BR><BR> <A HREF="clist">い</A><BR><BR> <A HREF="slist">う</A><BR><BR> </TD> </TR> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </BODY></HTML>
- ベストアンサー
- ホームページ作成ソフト
- テーブルの中央配置
内容を中央揃えにしたく、以下のようにCSSで記述してみたのですが、テーブルが揃いません。どうすればよいのでしょうか？ <head> <style type="text/css" media="screen"><!-- body { background-color: #cecece; text-align: center; } --></style> </head> <html> <body> aaa <table width="64" border="1" cellspacing="2" cellpadding="0"> <tr> <td>bbb</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- Firefoxで作ったページが読めません
次のような簡単なページ（画像を一枚貼り付けただけ）を作って ブラウザで見てみると、Firefoxでは 『ファイル…が見つかりません』とメッセージが出て読めません。 IEなら読めます。 Firefoxでも読めるようにするにはどうすればいいのでしょうか？？？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/*****.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>グラフ</title> </head> <body bgcolor="#ffcc99"> <table width="650" height="450" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="middle"><img src="image001.gif"></td> </tr> </table> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- safariで特定条件下でデーブル幅が効かなくなります
safariでcolspanでセルを結合し、その中に大きい要素（下の例ですとwidth500pxの画像や、文字数60のテキスト領域）を入れると、他の行の幅が変わってしまいます。 スタイルシートでtd幅を指定してやったりしてみたのですが、どうしても幅が変わってしまいます。 何か解決方法等ございましたら、ご教授願います。 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20％</td> <td width="80%" align="center">80％</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" width="500" height="24"></td> </tr> </table> <br> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20％</td> <td width="80%" align="center">80％</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"><form name="form1" method="post" action=""> <textarea name="textarea" cols="60"></textarea> </form> </td> </tr> </table> <br> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="20%" align="center" bgcolor="#99FFFF">20％</td> <td width="80%" align="center">80％</td> </tr> <tr> <td colspan="2" align="center" bgcolor="#FFCCCC"> </td> </tr> </table>
- ベストアンサー
- HTML
- tableタグとtableタグの間の余白の消し方について
現在モバイル用のHPを作成しているのですが、 AUで見た際に、tableタグとtableタグの隙間(空白)が出来てしまいます。 tableタグ1個でまとめればどうってことのない問題なのですが、 デザイン上、どうしてもtableタグを分ける必要があるります。 ■以下ソースです。 ************************************* <html> <head> <meta http-equiv="Cache-Control" content="no-cache" /> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" /> <title>タイトル</title> </head> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> </td> </tr> </table> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" bgcolor="#FFFFCC"> <center> <a href=""><img src="gazou.gif" width="151" height="42" /></center> ・ ・ ・ ************************************* ↑の… </table> ←この部分に余白ができます。 <table width="100%" border="0" cellpadding="0" cellspacing="0"> どなたか原因と解決法をご教示いただけませんでしょうか。 宜しくお願いいたします。
- ベストアンサー
- HTML
お礼
アドバイスありがとうございます！こちらで解決できました。毎回悩まされていたので、とても助かりました。