• ベストアンサー

テキストの回り込みができない?

テーブルで縦2列に区切って、左側には固定幅の表を作っています。 右側には残りの幅を使った表(更新履歴)をつくりたいと思って、<img>タグにalign属性を使ってテキストが回りこむようにしたつもりなのですが、テキストが回りこまず、表示される位置まで列の幅が広がってしまうのですが、どこか間違っているのでしょうか? <table border="0" width="100%"><tr>  <td valign="top" width="450">   <table><tr>     <td>...</td>     <td>...</td>   </tr></table>  </td>  <td valign="top">   <table border="0" width="100%"><tr>    <td class="cel1" align="left">     <b>タイトル</b>...日付    </td>   </tr><tr>    <td class="cel2" align="left">     コメントコメントコメントコメント    </td>   </tr><tr>    <td class="cel1" align="left">     <b>タイトル</b>...日付    </td>   </tr><tr>    <td class="cel2"><img src="./img.gif" align="left">     コメントコメント<br>コメントコメント    </td>   </tr></table>  </td> </tr></table>

  • CSS
  • 回答数4
  • ありがとう数8

質問者が選んだベストアンサー

  • ベストアンサー
noname#199778
noname#199778
回答No.4

補足されたソースをコピーして表示してみました。 確かに左側のセルの幅が広くなってしまっていますね。 色々と試してみたんですが、もしかして元のソースでは回り込みさせている部分の文章に、折り返しできない長い文字列などが入っていませんか? 半角アルファベットの文字列は、スペースやハイフンで切るなどしない限り、その部分を一つの単語と見て、折り返しできない文字列とブラウザが判断する可能性があると思います。 そうした場合、セルの幅は折り返しできない文字列の幅の長さにあわせて広がってしまうようなのですが。 そうでない場合は、ちょっとわかりません… 意図していることを実現させる上では、ソース上の問題はないように思えるのですが…

nonchi
質問者

お礼

わざわざ、ソースのコピーの表示までしてもらってすみません。 ソースの問題ではなく、入力した文字列の方が問題だったんですね。 すっきりしました。 ありがとうございました。

その他の回答 (3)

  • mirurin
  • ベストアンサー率43% (48/111)
回答No.3

> TESTTESTTESTTESTTESTTESTTESTTESTTEST..... 半角英数字は英単語の途中で改行されないように、自動改行が行われません。 全角にするか、改行したい位置に<BR>を入れるようにしたら横に伸びる ことはないと思います。

nonchi
質問者

お礼

テスト入力した文字列が悪かったとは・・・。 そりゃそうですよね。 ありがとうございました。

noname#199778
noname#199778
回答No.2

右側のtd内に入っているtableタグのwidth属性を、ブラウザが誤判定して、画面幅に対する100%で表示しているのが原因なのではないでしょうか(本来なら親ボックスの幅に対して100%となるべきと思いますが…)。 私のところでは、ソースをコピーしてIE5.5SP2で表示の確認をしたんですが、先に書かれているような表示にはなりませんでした。 多分、ブラウザ側のバグの一つなのではないかと推察しますが… 中に入っているtableのwidth属性を消せば、とりあえずセルの幅がはみ出す問題は解消できるのではないかと思います。 見当違いでしたら、ごめんなさい。

nonchi
質問者

お礼

失礼しました。質問のところのソースは、省略しすぎてうまく動くようです。 ・・・ということは、消したところが悪いのか・・・? URLをかければいいのですが、違反になるそうなのでソースを丸投げします。 <html> <head> <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- body{ font-size: 10pt;} hr { color: #336699; width:90%; height:1px; noshade; } tr,td { font-size: 10pt; color:#000000; } .cel1 { font-size: 10pt; color: #000000; background: #99CCFF; } .cel2 { font-size: 10pt; color: #000000; background: #FFFFFF; } .top { width:450; height:400; background: url(./img/top.jpg);} --> </style> <title>NEWS</title></head> <body> <CENTER> <br><br>  <table border="0" cellpadding="0" cellspacing="20" width="100%">   <tr>    <td class="top" width="450">     <table border="0" cellspacing="8" cellpadding="0">      <tr height="50">       <td><img src="./img/adabat.gif" width="100" height="32" border="1"></td>       <td><img src="./img/atelier_sab.gif" width="100" height="32" border="1"></td>       <td><img src="./img/carlo_palazzi.gif" width="100" height="32" border="1"></td>       <td><img src="./img/christian_aujard.gif" width="100" height="32" border="1"></td>      </tr>      <tr height="50">       <td><img src="./img/georges_rech.gif" width="100" height="32" border="1"></td>       <td><img src="./img/jc_jezequel.gif" width="100" height="32" border="1"></td>       <td><img src="./img/jj_farmer.gif" width="100" height="32" border="1"></td>       <td><img src="./img/lancetti.gif" width="100" height="32" border="1"></td>      </tr>      <tr height="50">       <td><img src="./img/michel_klein.gif" width="100" height="32" border="1"></td>       <td><img src="./img/tfox.gif" width="100" height="32" border="1"></td>       <td><img src="./img/xenos_classic.gif" width="100" height="32" border="1"></td>       <td> </td>      </tr>     </table>    </td>    <td valign="top">     <table border="0" cellpadding="2" cellspacing="3" width="100%">      <tr>       <td class="cel1" align="left"><b>TEST</b>...11/03</td>      </tr>      <tr>       <td class="cel2">       testtesttesttesttesttesttesttesttest       </td>      <BR CLEAR="left">      </tr>      <tr>       <td class="cel1" align="left"><b>TEST</b>...2002/11/03</td>      </tr>      <tr>       <td class="cel2"><img src="./img/img3.gif" width="75" height="56.25" alt="TEST" border="0" align="left"> TESTTESTTESTTESTTESTTESTTESTTESTTEST<br>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST       </td>      <BR CLEAR="left">      </tr>      <tr>       <td class="cel1" align="left"><b>test</b>...11/03</td>      </tr>      <tr>       <td class="cel2"><img src="./img/img2.gif" width="75" height="56.25" alt="test" border="0" align="left">       testtest       </td>      <BR CLEAR="left">      </tr>      <tr>       <td class="cel1" align="left"><b>リニューアル</b>...11/03</td>      </tr>      <tr>       <td class="cel2">       全面リニューアルしました。       </td>      <BR CLEAR="left">      </tr>     </table>    </td>   </tr>  </table> <br><hr> <i>Copyright 1999 by XXXXXXXXXXXXXXX All right reserved. </i> </CENTER> </body></html> ※インデントに全角スペースを使っています。よろしくお願いします。

  • teketeke
  • ベストアンサー率13% (6/43)
回答No.1

おはようございます、teketekeと申します。 以下の方法では如何でしょうか・・・。 <TABLE WIDTH="450" border="0"> <TR><TD ALIGN=LEFT VALIGN=TOP> <IMG SRC="***.gif" ALT="コメント" HEIGHT="200" WIDTH="169" ALIGN="left"><BR> コメント<BR>コメント<BR>コメント<BR> コメント<BR>コメント<BR>コメント <BR CLEAR="left"> 参考になれば幸いです。

nonchi
質問者

お礼

返事が遅くなってすみません。 teketekeさんの回答のポイントは <BR CLEAR="left"> だということでよろしいですか? 調べたら、<BR>のClear属性は「テキストの回り込みを行っている際に、テキストの回り込みを解除」ということなので、やりたいことと少し違うようなのですが。 ├    幅は90%などで指定    ┤ ┏━━━━━━┳━━━━━━━━━┓ ┃こちらの  ┃■■こちらは可変。┃ ┃幅は450pxで ┃■■BRタグなしでも┃ ┃固定    ┃折り返したい。  ┃ ┃      ┣━━━━━━━━━┫ 「こちらは可変。BRタグなしでも折り返したい。」と<BR>タグを含まない文章があっても、■の部分の画像をよけながら、でも外側の90%と指定された大きさからはみ出ないように折り返して表示したいのです。 ├    幅は90%などで指定    ┤  →この部分がはみ出す ┏━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━┓ ┃こちらの  ┃■■こちらは可変。BRタグなしでも折り返したい。┃ ┃幅は450pxで ┃■■                     ┃ ┃固定    ┃                       ┃ ┃      ┣━━━━━━━━━━━━━━━━━━━━━━━┫ 質問の仕方が悪かったと思いますが、『現状では回り込みしたかのように文字の開始位置はずれるけど、折り返らない』のです。 なにか分かりましたら、またよろしくお願いします。 ※上の図が崩れてしまうかもしれませんがごめんなさい。 等幅フォントでならちゃんと見られると思うのですが。

関連するQ&A

  • テーブルにCSSの枠のつけ方

    はじめまして、こんにちわ。 HTMLで組んだテーブルにCSSの枠をつけたいと思っています。 ここのページ​http://www.rakuten.ne.jp/gold/royalparty/​ の『NEW ITEMS』みたいに1列4行に枠をつけたい場合はどうしたら良いのでしょうか。よろしくお願いいたします。 組んだテーブルは下です。 <table class="newtable" cellspacing="0" cellpadding="0" border="0" width="610"> <tbody> <tr> <td class="photo" valign="middle" align="center" width="138"> 1-1 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-2 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-3 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-4</a></td> </tr> <tr> <td valign="top" align="left" width="138"> 2-1</a> </td> <td valign="top" align="left" width="138"> 2-2</a> </td> <td valign="top" align="left" width="138"> 2-3 </a> </td> <td valign="top" align="left" width="138"> 2-4</a> </td> </tr> <tr> <td valign="top" align="left" width="138">3-1</td> <td valign="top" align="left" width="138">3-2</td> <td valign="top" align="left" width="138">3-3</td> <td valign="top" align="left" width="138">3-4</td> </tr> </tbody> </table>

    • ベストアンサー
    • HTML
  • 同じ<table align="center">を用いていますが、セルの中身の行揃えが代わってしまいます。

    どちらも<table align="center">を用いています。 ですが、タグ1は特にセルの位置を指定せずとも、セルの中身が自動的に左詰めになりますが タグ2のセルの中身は、中央ぞろえになってしまいます。 タグ1のように、<table align="center">を用い、セルを左詰め指定(<align="left">)をせずとも なぜセルの中身が左詰めになるのか分かりません。。。 -------------タグ1------------- <table width="600" border="0" align="center" cellpadding="0" cellspacing="5"> <tr> <td width="10"><img src="img/concept_title.gif" width="10" height="30"></td> <td><img src="img/concept_title01.gif" alt="テキスト" width="127" height="16"></td> </tr> <tr> <td width="10">&nbsp;</td> <td class="t01">テキスト</td> </tr> </table> ------------------------------ -------------タグ2------------- <table width="640" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="3" rowspan="2" valign="top"><img src="image/grade_line.gif" width="3" height="177" /></td> <td width="8" valign="bottom"><img src="image/grade_line30.gif" width="20" height="2" /></td> <td width="368"><img src="image/kisyo/01t.gif" width="368" height="32" /></td> <td align="left" valign="bottom"><img src="image/grade_line_right.gif" width="42" height="2" /></td> </tr> <tr> <td>&nbsp;</td> <td height="145" align="left">テキスト <td rowspan="2"><img src="image/kisyo/01_ph.jpg" alt="井戸" width="200" height="139" /></td> </tr> <tr> <td valign="top"><img src="image/grade_line_bottom02.gif" /></td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> ------------------------------ 初心者的な質問・タグで恐れ入りますが、ご助力頂けますと幸いです。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 表(table)の字の大きさの設定

    ブログに表を載せたいと思って調べているところなのですが、↓のようにして、入力すると、字が14くらいの大きさになってしまいます。9くらいの小さめの字にしたいのですが、字の大きさは、どのように入力すれば良いのでしょうか?教えて下さい。どうぞ宜しくお願い致します。 <div align="center"> <table border=1><tr><tdalign="center"colspan="3"bgcolor="#99ee66">あ<BR>あ</td></tr><tr><td align="center" colspan="3"bgcolor="#ffcd59">あ</td></tr><tr><td width="30" align="left" valign="top" bgcolor="#efefde">あ</td><td width="45" align="left" valign="top" bgcolor="#efefde">あ</td><td align="left">・あ<BR>あ</td></tr><td width="30" align="left" valign="top" bgcolor="#efefde">あ</td><td width="45" align="left" valign="top" bgcolor="#efefde">あ</td><td align="left">あ</td></tr></table></div>

    • ベストアンサー
    • HTML
  • テキストボックスの表示

    テキストボックスの表示 テキストボックスを2つ横に並べて表示したいのですが、 <html> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="308" height="300" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストA </Td></Tr> </Table></div> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="200" height="200" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストB </Td></Tr> </Table></div> </html> これで、記述をすると縦に二つ表示されます。 スタイルシートを使用しないと無理でしょうか?

    • ベストアンサー
    • 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>        ------3 <td valign="top" >*** <br> </td>

    • ベストアンサー
    • 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>

  • background-color css

    目的:社員のスケジュール表を作りたいです。 出勤、休み、緊急休みを一目瞭然に表で表現したいですが、そのやり方が分からないです、ご存知の方々教えてお願いします。 <!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=windows-31j" /> <title>表</title> <style> <!-- .open{ background-color:rgb(255,255,255); } .holiday{ background-color:rgb(166,166,166); } .rest_holiday{ position:relative; filter:alpha(opacity=50); background-color:rgb(255,0,0); } .rev{ background-color:rgb(185,205,229); } --> </style> </head> <body> <table border="1" cellspacing="1"> <tr> <td valign="top"> <table border="1" cellspacing="0" width="60" > <tr align="center"> <td height="23" >名前</td> </tr> <tr align="center"> <td ></td> </tr> <tr align="center"><td>田中</td></tr> <tr align="center"><td>島村</td></tr> <tr align="center"><td>喜田村</td></tr> <tr align="center"><td>林義夫</td></tr> </table> </td> <td valign="top" > <table width="00" cellpadding="0" cellspacing="0" border="1"> <tr align="center"> <td width="100" height="23" colspan="2" >10時</td> <td width="100" height="23" colspan="2">11時</td> <td width="100" height="23" colspan="2" >12時</td> </tr> <tr > <td width="25" height="23" valign="top" class="open">&nbsp;</td> <td width="25" height="23" valign="top" class="open">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> </tr> <tr > <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="holiday">&nbsp;</td> </tr> <tr > <td width="25" height="23" valign="top" class="rev">&nbsp;</td> <td width="25" height="23" valign="top" class="rev">&nbsp;</td> <td width="25" height="23" valign="top" class="open">&nbsp;</td> <td width="25" height="23" valign="top" class="rev">&nbsp;</td> <td width="25" height="23" valign="top" class="rev">&nbsp;</td> <td width="25" height="23" valign="top" class="open">&nbsp;</td> </tr> <tr > <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rest_holiday">&nbsp;</td> <td width="25" height="23" valign="top" class="rev">&nbsp;</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>

  • IEのテーブル表示の不具合でしょうか・・・?

    IEで正しく表示されているものが、別のページへ行って「戻る」ボタンを押すと、テーブルの表示が崩れてしまいます。 2列のテーブルの右側の部分が左側にかぶって表示されてしまうのです。 参考までにその部分のソースを以下に記述します。 何か気になる点などお気づきになられたら教えてください。 <table width="320" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200"> <table width="200" border="0" cellspacing="0" cellpadding="5"> <tr> <td class="px12"> ・<a href=>あああああ</a><br> ・<a href=>いいいいい</a><br> ・<a href=>ううううう</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>えええええ</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>おおおおお</a><br> <hr width="160" size="1" noshade align="left"> </td> </tr> </table> </td> ※以下から左側のテキストにかぶって表示されてしまいます。 <td width="120"><a href=><img src="images/画像.gif" width="120" heigt="180" border="0"></a><br> <table width="120" border="0" cellspacing="2" cellpadding="0"> <tr> <td valign="top"><img src="images/矢印画像.gif" width="11" height="11" border="0"></td> <td class="px12"><a href=>テキストテキストテキスト</a></td> </tr> </table> </td> </tr> </table> 以下が私の環境です。 WindowsXP(HomeEdition)・SP2インストール済・IE6 よろしくお願いします。

  • 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">&nbsp;</td> </tr> <tr> <td width="225" height="150" align="left" valign="top">いいいいいいいいいいいいいいいいいいいいいい</td> </tr> </table> このときに、ファイアーフォックス3での表示と、IE8での表示に 違いが大きいんです。(IEの表示の方が縦が長くなります) このままだと右側の背景画像の高さと左のテキストの高さが あいません・・・それぞれのテーブル幅などの指定はきちんと しているつもりなのですが、どうすれば良いのでしょう。 CSSの利用はなしとして、どなたか教えて頂けないでしょうか。

    • ベストアンサー
    • HTML
  • テーブル幅を完全に指定したい

    テーブル幅の指定方法を教えてください。 以下のような記述のテーブルを何列も羅列して 表を作ろうと思っています。 alt="小A"~alt="小D" のところは 項目ごとのアイコン画像が入り、その項目に該当するものが無い場合は空白となるような表です。 実際にブラウザで表示してみると、widthの設定はしているのに、空白をつくると 若干ですが横幅が変わってしまい、表として並べたときにそのズレが目立ちます。 何がいけないのか、お知恵を拝借できませんでしょうか。 宜しくお願い致します。 以下、その表の一部である テーブルになります。 <table bordercolor="#ffffff" width="520" height="80" align="center" cellspacing="3"> <tr><td bgcolor="#ffcccc"> <table> <tr> <td width="100" bgcolor="#ffcccc" align="center" valign="middle"> <a href="★" target="_blank"><img src="■.gif" width="80" height="60" border="0" class="pict"/></a> </td> <td width="260" align="left" valign="center"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよ </td> <td valign="center"> <img alt="中" src="■.gif" width="80" height="60" class="pict" /> </td> <td width="25"><a href="★" target="_blank"><img alt="小A" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小B" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小C" src="■.gif" width="25" height="60" class="pict" /></a></td> <td width="25"><a href="★" target="_blank"><img alt="小D" src="■.gif" width="25" height="60" class="pict" /></a></a></td> </tr> </table></td></tr></table>

    • ベストアンサー
    • HTML

専門家に質問してみよう