• ベストアンサー

ブログでの表の表示が下にずれます。訂正の方法は?

ブログで表をHTMLで作成し表示したいのですが、 ブログによっては(グーブログも)、表をUPすると、画面の下の方にずれて表示されます。きちんと上から表示したいのですがどなたか、お分かりの方、御教授宜しくお願いします。 表例題(サンプル) <table border="3"> <tr> <th width="250" height="40"> </th> <th width="250" height="40"> </th> </tr> <tr> <th width="250" height="240"> <br> <br> <FONT size=3> </FONT> </th> <th width="250" height="240"> <br> <br> <FONT size=3> </FONT> </th> </tr> <tr> <th width="250" height="240"> <br>   <br> <FONT size=3> </FONT> </th> <th width="250" height="240"> <br> <br> <FONT size=3> </FONT></th> </tr> <tr> </table>

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

  • ベストアンサー
  • akuhijrwq
  • ベストアンサー率35% (381/1064)
回答No.1

下にずれるっというのがいまいちわかりませんが ブログの記事の部分にテーブルを書くのなら1つ注意が必要です。 改行はしないで、つなげてかいてください。 (改行すると改行されてしまいます) ○<table border="3"><tr><th width="250" height="40"></th> × <table border="3"> <tr> <th width="250" height="40"></th>

nicegoo
質問者

お礼

下にずれるというのは、確かに改行されてしまうのか、表の表示位置が、画面の下の方にいってしまって、空白部分が相当に出来てしまうということです。 早速試して改行をとったところ、きちんと上から表示されました。いいヒントを頂きましてありがとうございました。 ブログによっては、そのままでもうまくいくんですが、殆どのブログでは、改行されてしまいます。 またこれからも研究して、改善していきたいと思います。 ほんとに感謝いたしております。

その他の回答 (1)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.2

ブログの記事設定で改行設定になっている為、 テーブルが正規に表示されなくなります。 改行設定を解除するとHTMLでの正規表示になります。 ただし 他の文などは、改行されなくなりますので 自分で改行タグ p や br を入れる。

nicegoo
質問者

お礼

naokita様、アドバイスを頂きありがとうございます。 一応、akuhijrwqさまから回答を頂き、各行を改行せずに全て連続したら、きちんと所定の位置から表示出来ました。 でも、全部が詰まってしまい、表の中身を挿入するのにちょっと大変ですが、所期の目的は達成できています。 これからも、研究していいものを作り上げて行きたいと思います。どうもありがとうございます。

関連するQ&A

  • 表の作成

    いつもお世話になっています。 下記の構文で表を作成した際に、セルの幅がずれてしまいます。 <TABLE border="1" cellspacing="0" width="940"> <TBODY> <TR> <TH height="17" width="790" colspan="5">A</TH> <TH height="17" width="75" rowspan="2">G</TH> <TH height="17" width="75" rowspan="2">H</TH> </TR> <TR> <TH height="17" width="150">B</TH> <TH height="17" width="80" >C</TH> <TH height="17" width="220">D</TH> <TH height="17" width="280">E</TH> <TH height="17" width="60" >F</TH> </TR> </TBODY> </TABLE> <TABLE border="1" cellspacing="0" width="940"> <COLGROUP> <col width="150"> <col width="80" > <col width="220"> <col width="280"> <col width="60" > <col width="75" > <col width="75" > </COLGROUP> <TBODY> <TR height="30"> <TD><FONT SIZE="-1">○</FONT></TD> <TD><FONT SIZE="-1">×</FONT></TD> <TD><FONT SIZE="-1">△</FONT></TD> <TD><FONT SIZE="-1">□</FONT></TD> <TD><FONT SIZE="-1">◆</FONT></TD> <TD align="center"> <INPUT type="button" value="◎" style="width:55px;height:27px" onClick=""> <!-- ж --> </TD> <TD align="center"> <INPUT type="button" value="Δ" style="width:55px;height:27px" onClick=""> <!-- ☆ --> </TD> </TR> </TBODY> </TABLE> どなたか解決方法を教えていただけないでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • エクセルでのHTMLの表の切替(行・列切替も)

    こんにちは。 お世話になります。 ショッピングサイトで表示中のサイズ表を新たなデザインに変えることにしました。 具体的には下記に記載の通りです。 元は横に伸びる表記だったものをこのタイミングで縦に伸びる表記に変えます。 また、デザインもよりシンプルなものになります。 このアイテム1点であればこれにて作業完了なのですが、 1000点ともなると、仕組みを作った方がはるかに早いのですが、 手法が頭に浮かびません。 新レイアウトにするのは、エクセル上でひな形の表を作って、それをマクロでボタンを押せば 一気にHTMLのTABLEタグ付きで出力すればイケるかも、と思いました。 ではそのひな形の表を現在のHTMLタグから起こすには… 想像ができませんでした。 それともそもそもまったく違う手法の方が簡易…?難しいです。 よろしければご教示いただけないでしょうか。 ちなみに袖丈があるものもあったり、アイテムによって形状・揃えているサイズ展開が違うため、 テーブルの行や列はアイテムによって変わってきてしまい、○行○列のものです、と いうことはできません。 -------------------- ※現在のサイズ表である↓を <font color=#000000 size=3><b>サイズ表</b></font><br><table width=300 cellspacing=0 cellpadding=2 bgcolor=#FFFFFF><tr><td bgcolor=#66CC66><table width=100% cellspacing=1 cellpadding=1 bgcolor=#FFFFFF><tr><td bgcolor=#99CC99><table width=100% cellspacing=0 cellpadding=20 bgcolor=#FFFFFF><tr><td bgcolor=#FFFFFF align=left><font color=#000000 size=3><table border=1 width=420><tr><td width=60></td><td width=60>92cm</td><td width=60>98cm</td><td width=60>104cm</td><td width=60>110cm</td><td width=60>116cm</td><td width=60>122cm</td></tr> <tr><td width=60>総丈</td><td width=60>54cm</td><td width=60>57cm</td><td width=60>60cm</td><td width=60>63cm</td><td width=60>66cm</td><td width=60>69cm</td></tr> <tr><td width=60>身幅</td><td width=60>26cm</td><td width=60>27cm</td><td width=60>28cm</td><td width=60>29cm</td><td width=60>30cm</td><td width=60>31cm</td></tr></table><br>※平置きでの採寸になるので、若干の誤差はご了承ください。<br></font></td></tr></table></td></tr></table></td></tr></table> 新しい以下のサイズ表表記に切り替えたいです。 【サイズ表】 <table> <tr> <th scope="row">年齢・身長</th> <th scope="row">総丈</th> <th scope="row">身幅</th> </tr> <tr> <th scope="row">92cm</th> <td>54cm</td> <td>26cm</td> </tr> <tr> <th scope="row">98cm</th> <td>57cm</td> <td>27cm</td> </tr> <tr> <th scope="row">104cm</th> <td>60cm</td> <td>28cm</td> </tr> <tr> <th scope="row">110cm</th> <td>63cm</td> <td>29cm</td> </tr> <tr> <th scope="row">116cm</th> <td>66cm</td> <td>30cm</td> </tr> <tr> <th scope="row">122cm</th> <td>69cm</td> <td>31cm</td> </tr> </table> ※平置きでの採寸になるので、若干の誤差はご了承ください。 <br> ちなみに、新しいサイズ表は、サイズ表以外の他の商品情報とともに 以下のスタイルで定義されています。 <style> .sc-table-01{width: 320px;font-size: 0.9em;} .sc-table-01 table{ border-collapse:collapse; margin: 5px; width: 100%; } .sc-table-01 th{ font-style: normal; font-size: 0.9em; color: #000; background-color: #FFD6C1; border: 1px solid #999; padding: 6px; white-space: nowrap; line-height: 150%; } .sc-table-01 td{ border: 1px solid #999; font-size: 0.9em; padding: 10px; line-height: 150%; } </style> <div class="sc-table-01">

  • 表の中のテキストを中央ではなく上部に表示したい

    現在、ホームページビルダーVer.14でホームページ作成中です。 1行1列の表を作成し、中にテキストを入力しましたが、表の中央に表示されてしまいます。 表の上部に表示したいので、下記のように入力しましたが、表の中央に表示されうまくいきません。 在庫あります)。<br> の後ろに</font>を入力しても「エラーを検出しました」というメッセージが表示され消されてしまいます。 <table border="0" bgcolor="#ffffff"> <tbody> <tr> <td width="301" height="433"><span style="line-height10%> <font size=" -1">年末年始は、12月30日から1月3日までお休みになります。<br> <br> インフルエンザワクチン予約受付、接種実施中。<br> 料金:1回3000円<br> <br> 四種混合ワクチンの予約を始めました(接種は11月2日より、在庫あります)。<br> </span>&nbsp;</td> </tr> </tbody> </table> 表の上部に表示する方法につきご教示ください(HTML)。 OSは、Windows7 Home Premiumです。よろしくお願い致します。

  • ブラウザによってリンク集のバナー画像が表示されません。

    ↓ こちらの質問とほぼ同じです。 http://oshiete1.goo.ne.jp/qa3085778.html そして、こちらで紹介されているサイトhttp://www.aland.to/~lintrank/trylint/htmllint.htmlでチェックしても解決できなかったので、質問させていただきたいと思います。 私は、Win(IE7)、ビルダー11、フォトショ・イラレ等を使ってHPを作成しました。 既に転送済みのファイルのうち リンク集の表に貼ったバナー画像がIE6だと表示されません(直リンはしてません)。×がつくのではなく、何も表示されていません。 IE7だと全く問題ないです。他のファイルには上記の様な異常は一切ありません。 リンク集一覧は、2×2の表を作り、左にバナー画像、右に ちょっとした説明を載せています。 ブラウザによって表示が異なるのはタグが正確ではないからでしょうか。HTMLというものは、つい最近知った初心者なのでよく分かりません。 よろしくお願いします。 おそらく↓この部分が表のタグだと思います。 <TABLE border="0" width="731" height="85" summary="イラスト関連サイト様一覧"> <TBODY> <TR> <TD align="center" valign="middle" width="258"><A href="http://***.***.jp/" target="_blank"><IMG src="banner1.gif" width="200" height="40" border="0" alt="*** "></A><BR> <FONT size="-1">サイト名:<A href="http://***.***.jp/" target="_blank"> ***</A></FONT></TD> <TD valign="middle" width="463"><FONT size="-1">管理人:***様</FONT><BR> <FONT size="-1">***さんが描かれるイラストは、~。</FONT></TD> </TR> <TR> <TD align="center" width="258" height="23"><A href="http://***.***.jp/" target="_blank"><IMG src="banner2.GIF" width="200" height="40" border="0" alt="***"></A><BR> <FONT size="-1">サイト名: <A href="http://***.***.jp/" target="_blank">***</A></FONT></TD> <TD valign="middle" width="463" height="23"><FONT size="-1">管理人:***様<BR> ***さんが描かれるイラストは、~。</FONT></TD> </TR> </TBODY> </TABLE>

    • ベストアンサー
    • HTML
  • 2列に表示させたい

    お世話になります。HTML初心者で教えていただきたいのですが、よろしくお願いします。 以下のタグで、「月別来館者数の推移」まで表示できたら、次の表は3cm程間を空けて右に表示させたいのですが、 タグをどのようにすればいいのでしょうか。 タグを直していただければ助かります。 よろしくお願いします。  <tbody> <tr> <td width="200" valign="Top" class="normal"> <p><span class="textitle"><font size="2"><b> 来館者数</b></font></span><br> <br> <font size="2">平成17年○月分<br> <br> <font size="2">月別来館者数の推移</font></p> </td> </tbody> </table> <font size="2">平成  年  月  日現在</font></tr> <table border="1" bordercolor="black" vspace="5" hspace="30" align="Left"> <tbody> <tr> <td align="Center" width="70"><font size="2">資料1</font></td> <td align="Center" width="70"><font size="2">約   冊</font></td> </tr> <tr> <td align="Center" width="70"><font size="2">資料2</font></td> <td align="Center" width="70"><font size="2">約   題</font></td> </tr> <tr> </tbody> </table>

    • ベストアンサー
    • HTML
  • HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。

    HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。 下のソースで50と130のとこをきちんとエクセルのように枠線揃えたいのですが、 どのようにしたら良いのでしょうか? よろしくお願いします。 <HTML> <BODY> <TABLE border=1><TR> <TH width="50"></TH> <TH width="135"></TH> <TH width="65"></th> <TH width="65"></th> <TH width="65"></th> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR><TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=50 rowSpan=2>50</TD> <TD width=135 rowSpan=2>135</TD> <TD width=65 rowSpan=2>65</TD> <TD width=130 colSpan=2>130</TD> </TR><TR> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=50>50</TD> <TD width=135>135</TD> <TD width=65>65</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR><TR> <TD width=250 colSpan=3>250</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR></TABLE> </TD> </TR><TR> <TD colspan="5"> <TABLE border=1><TR> <TD width=250>250</TD> <TD width=130>130</TD> </TR></TABLE> </TD> </TR> </TABLE> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • 楽天ブログ・日記の下に表示のおすすめアイテムって・・・。

    ブログ初心者です。 いつかはアフェリエイトまでできると良いな~と思っていますが、まだその前の段階ですでにつまづいております・・・(汗) メインの日記の下に、おすすめアイテムを載せられるように設定したのですが、こちらの画像は私自身で気にいった商品を載せられるのですよね・・・。 (もしかして、楽天の広告ページ??) 【Recommend Item】ってタイトルに出ています。 今まで、自動的にブログの内容に合うようなアイテムが表示されているような気がしますが、好きな雑貨などを載せたいのですが・・・。 もし自分で出来るならどのように画像を載せればいいのでしょうか?? たとえばですが、アフェリエイトのやり方のページで出ていたこの商品を載せたい場合、この部分をどこに載せるとブログのおすすめアイテムに載せられるのか教えてください。 すみません・・・。 パソコンが苦手で、↓これも間違っているのかな?と思っています。 <a href="http://***" target="_blank"> .:*:.*.:*:.2本ベルトのフォーマルシューズ .:*:.*.:*:. </a>        ************** さらに、画像の載せ方が分からないのですが、こちらのテンプレートを製作した方は全然ブログをされていないようなので、もし、分かる方でいらっしゃったら教えてください! コチラは、トップやアフェリエイト部分のテンプレートらしいのですが 。 <center><table cellspacing="3" cellpadding="0" width="560"><tr><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像1</td></tr></table></td></tr></table></td><td width="34%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像大2</td></tr></table></td></tr></table></td><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像3</td></tr></table></td></tr></table></td></tr><tr><td colspan="3" align="right"><font style="font-size:10px"> </a></font></td></tr></table></center> 画像1・2・3の部分に、何を入れるとショップの商品とリンクするのでしょうか?? どうぞ、よろしくお願いいたします。

  • このようなソースを書いたのですが下に表示した二つのテーブルがどうしても

    このようなソースを書いたのですが下に表示した二つのテーブルがどうしても左よりに表示されてしまいます。 一行に2つのテーブルを横に並べつつその2つのテーブルを中央に表示できないでしょうか? よろしくお願いいたします <HTML><Div Align=center><HEAD><TITLE>検索結果詳細画面</TITLE></HEAD><BODY> <BR><BR><BR> <B>検索詳細画面</B><BR> <form action='/humans/servlet/Seach' method='get'> <table bor 社員番号</th> <td width=200> sno</td></tr><tr> <th>氏名</th> <td> name</td></tr><tr> <th>ヨミガナ</th> <td> kana</td></tr><tr> <th>住所</th> <td> address</td></tr><tr> <th>生年月日</th> <td> birthday</td></tr> <tr><th>性別</th> <td> sex</td></tr> <tr><th>身長</th> <td> hight</td></tr> <tr><th>体重</th> <td> weight</td></tr> <tr><th>血液型</th> <td> blood</td></tr> <tr><th>携帯電話番号</th> <td> mtel</td></tr> <tr><th>自宅電話番号</th> <td> ttel</td></tr></table><hr /> <br>家族(扶養家族)のデータ</br> <br></br><table border=1 align=left><tr><th width=150>氏名</th> <td width=200> name</td></tr><tr> <th>ヨミガナ</th> <td> kana</td></tr><tr> <th>生年月日</th> <td> birthday</td></tr><tr> <th>性別</th> <td> sex</td></tr><tr> <tr><th>身長</th> <td> hight</td></tr> <tr><th>体重</th> <td> weight</td></tr> <tr><th>血液型</th> <td> blood</td></tr> <tr><th>携帯電話番号</th> <td> mtel</td></tr> <tr><th>自宅電話番号</th> <td> ttel</td></tr> <tr><th>続柄</th> <td> reration</td> </tr></table> <table border=1 align=left><tr><th width=150>氏名</th> <td width=200> name2</td></tr><tr> <th>ヨミガナ</th> <td> kana2</td></tr><tr> <th>生年月日</th> <td> birthday2</td></tr><tr> <th>性別</th> <td> sex2</td></tr><tr> <tr><th>身長</th> <td> hight2</td></tr> <tr><th>体重</th> <td> weight2</td></tr> <tr><th>血液型</th> <td> blood2</td></tr> <tr><th>携帯電話番号</th> <td> mtel2</td></tr> <tr><th>自宅電話番号</th> <td> ttel2</td></tr> <tr><th>続柄</th> <td> reration2</td> </tr></table><br></br><br></br><br></br><br></br><br></br><br></br><br></br>

  • テーブルだらけのページをスッキリさせたい

    いま、ホームページビルダーで趣味のサイトを作っているところなのですが、 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>

  • borderが1のテーブル

    ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか? 私が書いたのはこんなかんじです。 <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"> <tr bgcolor="#999999"> <th><div align="center"><font size="2">名称</font></div></th> <th><div align="center"><font size="2">模型材質</font></div></th> <th><div align="center"><font size="2">生産材質</font></div></th> </tr> <tr bgcolor="#FFFFFF"> <td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td> <td><div align="center"><font size="2">発泡塩ビ板</font></div></td> <td><div align="center"><font size="2">プラスチック</font></div></td> </tr> </table></td> </tr> </table> CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。 よろしくおねがいします。