- ベストアンサー
DreamWeaverで作るテーブル
<!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="800" height="394" border="1" align="center"> <tr> <td> <p>1</p> <table width="200" border="1" align="left"> <tr> <td height="118">2</td> </tr> </table> <table width="600" border="1"> <tr> <td height="121">3</td> </tr> </table> <p> </p></td> </tr> </table> </body> </html> このようにテーブルを作った場合、3のセルの右のラインが1のセルの右ラインに隠れるというか見えなくなります。 そこで3のセルにalign="left"を設定するとIEではラインが見えるのですが、Netscapeでは2と3が縦に並んでしまいます。 なんとか3の右ラインを見えるようにしてNetscapeでも縦に並ばないようにするにはどうすればいいでしょう。 よろしくお願いいたします。
- amusemariy
- お礼率58% (102/175)
- その他（インターネット・Webサービス）
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
１日～２日前に、特定のURLがあったために管理者さんに削除されてしまった質問の続きでしょうか? もしそうなら、ドキュメントタイプ宣言を途中で改行処理しているのが原因ではないかと私は思いましたけれども。 タグの冒頭、【<!DOCTYPE】で始まるドキュメントタイプ宣言が【Transitional//EN"】の直後にいきなり改行されてしまっているので、ブラウザが正しく処理できない場合が発生します。IEではうまく表示できてもNetscapeで表示が乱れるのはこれが原因かと…。 ドキュメントタイプ宣言の【Transitional//EN"】の直後は、改行しないで、半角スペースを一つ入れてから【"http://www.w3.org/TR/html4/loose.dtd">】まで全部１行にして試してみて下さい。 もしくは、ドキュメントタイプ宣言の後半の部分である【"http://www.w3.org/TR/html4/loose.dtd">】は省略してしまって、【Transitional//EN"】のすぐ後にタグの締めくくりをする「グレーターザン」の記号【>】を付けて試してみて下さい。
その他の回答 (2)
こんにちは。 セルの中にTABLE2つ（2と3）を並べて表示させるのが目的ですよね。 2のTABLEにalign="left"、3のTABLEには align="right"を設定してみてはどうでしょうか。 1のTABLEの中に2と3のTABLEを作成する目的に興味があります。 ↓こんな感じで2と3をTABLEひとつにまとめてはダメでしょうか。 <table width="**" border="*" cellspacing="*" cellpadding="*" align="center"> <tr> <td> </td> <td> </td> </tr> </table> 色々試してご自分の意図したページに仕上がると良いですね！
- rightegg
- ベストアンサー率41% (1357/3236)
こんにちは。 ボーダーを1にしていると都合2ピクセル幅が増えます。 それが計算されていませんね。中のテーブルの幅を狭めるか、外のテーブルを広げて下さい。 それとここでテーブルを入れ子にする必要はあるのでしょうか？ セルを並べるだけでは駄目なんですか？ ちょっと理解に苦しみます。 どんなものを作りたいか書いてもらえるともう少しまともなアドバイスが出来るのですが...
補足
何がやりたいのかといえば、2と3のテーブルをブラウザで見た時常に画面の真ん中にふたつ並べて表示したいのです。アドバイスをお願いします。
関連するQ&A
- テーブルを作ったんですが…
はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- テーブルレイアウト
テーブルレイアウトで困っています。 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100％</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> これだと問題なく表示されるのですが、 <table width="100%" height="100%" border="1"> <tr> <td colspan="2" valign="top" height="100">全体の幅は100％ 少し長い文章を入れる</td> </tr> <tr> <td width="150" valign="top">左のセル<br>幅150</td> <td valign="top">右のセル<br>幅指定なし</td> </tr> </table> このように１列目のセルに長い文章を入れると、２列目の左のセルの幅が勝手に広がってしまいます。 何が原因で、対処法はないでしょうか？ Netscape7.1ではこうならないんですが、IE6では勝手に崩れてしまいます。 よろしくお願いします。
- ベストアンサー
- HTML
- テーブルが一行下がる・・・
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 width="490" height="395" cellpadding="0" cellspacing="0" bgcolor="#666666"> <tr> <td width="490" height="393"> <table width="100%" height="100%" border="0" cellpadding="5" cellspacing="1"> <tr> <td width="121" height="35" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td width="344" height="35" align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> <tr> <td height="22" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> </table> </td> </tr> </table> --------------------------------------------------------- 試したこと：各セルの縦幅を揃えて指定してみる。指定を全て 外してから、再度調節してみる。セル内のテキスト 表示位置を上位置に設定してみるなどです。。。 どこかすごい見落としをしているのでしょうか。よろしくお願い します。
- ベストアンサー
- HTML
- テーブルの大きさを揃えたい
各ページの大きさ＝高さが揃わないのですが原因がわかりません。 １．文字の高さが指定した高さより大きい？(普通の文字の高さは決まっているのでしょうか。） ２．入れ子にしているテーブルで２行の所が指定した高さより大きい？ ３．CSSスタイルの背景の高さが関係している？ ４．全体の大きさがずれている？ 参考にHTML(高さのみ）抜き出しますので教えていただけませんか。 【ページ１】 <table width="700" height="55" border="0"> <tr> <td><img.gif height="40"> welcome homepage(見た目は2行）</td> <td> </td> <td align="right" valign="bottom"> <img.gif" height="20" ></td></tr></table> <table height="15"></table> <table height="430"> <tr><td height="375"><flash.swf height="360"></td></tr> <tr><td height="25"></td></tr> <tr><td height="15"></td></tr></table> 【ページ２】 <table width="700" height="55" border="0"> <tr> <td height="40"> <img.gif height="40"></td> <td height="40"> </td> <td height="40"></td></tr> <tr><meta http-equiv="Content-Style-Type" content="text/css"> <td height="15"> welcome homepage </td> <td height="15"></td> <td align="right" height="15">|HOME|MAP|MAIL|</td></tr></table> <table height="15"></table> <table height="430"> <tr><td> <table height="10"> <tr><td height="15"></td></tr> <tr><td><IFRAME height="380"></IFRAME></td></tr> </table></td></tr> <tr><td height="15"></td></tr></table>
- 締切済み
- HTML
- cssでテーブルの位置を設定するには？
<table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。
- 締切済み
- CSS
- テーブルが横に長くなってしまう
の困ってます width=100%を超えたら折り返してほしいのですが・・・ aaa...aaaが短いときにはいいのですが長いとテーブルが横に長くなります 範囲を超えたら自動的に折り返すようにできないのでしょうか? <table width="100%" border="1"> <tr><td align="center">contents</td></tr> aaa...aaa <tr><td align="left"> </td></tr> </table>
- ベストアンサー
- HTML
- タブ付きテーブル２
エクセルのようにタブの付いたテーブルを作りたいと思っています。 ページはマス目でなくていいです。 以下はソースです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> </head> <body> <p align="left"> </p> <p align="left"><img height="23" alt="" src="file://C:/Documents and Settings/****/My Documents/princess_ichigo/table/test.JPG" width="99" align="absBottom" border="0"> <table style="WIDTH: 517px; HEIGHT: 414px" cellspacing="1" cellpadding="10" bgcolor="#000000" border="0"> <tr> <td valign="top" align="center" bgcolor="#ffffff"> <p align="left"> </p></td></tr></table></p> </body> </html> ※画像は□（四角）で下の線が無いものです。 一応このような記述でテーブルっぽいのができました。 画像は「絶対底辺」に指定しています。 しないと画像とテーブルの間が空いてしまいます。 この記述の場合、ブラウザによっては間が空いて見えたり、変に映ってしまうでしょうか？
- 締切済み
- HTML
- IEでのテーブル幅
質問させて下さい。 テーブルのソースが以下のようになっています。 <table width="450" height="300" border="1" cellpadding="10" cellspacing="0" bordercolor="#333333"> <tr> <td width="225" height="150" align="left" valign="top">あああああああああああああああああああああああ</td> <td width="225" height="300" rowspan="2" background="haikei.jpg"> </td> </tr> <tr> <td width="225" height="150" align="left" valign="top">いいいいいいいいいいいいいいいいいいいいいい</td> </tr> </table> このときに、ファイアーフォックス3での表示と、IE8での表示に 違いが大きいんです。（IEの表示の方が縦が長くなります） このままだと右側の背景画像の高さと左のテキストの高さが あいません・・・それぞれのテーブル幅などの指定はきちんと しているつもりなのですが、どうすれば良いのでしょう。 CSSの利用はなしとして、どなたか教えて頂けないでしょうか。
- ベストアンサー
- HTML
- Firefoxで崩れる
IE6.0 IE7.0では、問題なく表示されるのですが、Firefoxで 一部のページが右にずれてしまうのです。 問題点を教えていただけますと幸いです。 正常なページのソース <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XXXXXXXXXXXXXXXXXXXXXサイト</title> <META HTTP-EQUIV="Imagetoolbar" CONTENT="no"> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <table width="758" border="0" cellpadding="0" cellspacing="0" class="table-base"> <tr> <td height="95" colspan="2"><table width="758" cellspacing="0" cellpadding="0"> <tr> <td width="213" rowspan="4"><a href="../index.html"><img src="../common/images/rogo.jpg" width="213" height="93" border="0" /></a></td> <td height="38"> </td> </tr> </table></td> </tr> <tr> <td height="31" colspan="2"><img src="images/" alt="blog" width="758" height="31" border="0" /></td> </tr> <tr> <td height="21" colspan="2" class="td-bar"> </td> </tr> <tr> <td width="556" height="111" valign="top"><table width="543" height="182" cellpadding="10" cellspacing="0" class="td-0e3758"> <tr> <td colspan="2" class="bottom-border0e3758"><strong>200X/XX/XX</strong></td> </tr> <tr> <td width="94" height="131"><img src="images/s_img.jpg" width="94" height="125" /></td> <td width="407" valign="top">テテキストテキスト</td> </tr> </table></td> ***************************** 崩れてしまう方 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XXXXXXXXXX</title> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <table width="758" border="0" cellpadding="0" cellspacing="0" class="table-base"> <tr> <td width="758" height="95"><table width="758" cellspacing="0" cellpadding="0"> <tr> <td rowspan="4"><a href="../index.html"><img src="../common/" width="213" height="93" border="0" /></a></td> <td height="38"> </td> </tr> </table></td> </tr> <tr> <td height="31" colspan="2" class="td-bar"><img src="images/blog-.gif" alt="blog" width="758" height="31" border="0" /></td> </tr> <tr> <td align="center"><table width="725" cellspacing="0" cellpadding="7"> <tr> <td colspan="2"> </td> </tr> <tr> <td width="37" align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td width="658" align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXXXXX</td> </tr> <tr> <td align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXX</td> </tr> <tr> <td align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span> XXXXXXXXXXXXXXXXXXXXXXX</td> </tr>
- 締切済み
- HTML
補足
そうです、削除された質問の続きです。 【"http://www.w3.org/TR/html4/loose.dtd">】は省略してしまったら横に並んで表示されました。 でも、質問にある3の右ラインは見えませんでした。 何がやりたいのかといえば、2と3のテーブルをブラウザで見た時常に画面の真ん中にふたつ並べて表示したいのです。アドバイスをお願いします。