- ベストアンサー
文章の見栄え
テーブルタグの下に文章を入れているのですが、中央に揃えると文章の最後の文字数が少ない為、その文字も真ん中に揃ってしまい見栄えが悪いです…テーブルの幅に合わせ、文字の頭は左揃えにしたいのですが、 テーブルタグを <CENTER> <TABLE width="600"> <TBODY> <TR> <Div align="center"><Table border="1" width="600" height="10" bgcolor="#ffbfff" bordercolor="#0080ff" cellspacing="0"> <Tr><Td align="left"> タイトル </Td></Tr></Table> <BR> <font size="-1"> ここに文章を入れています。<BR> 文章は２段です。</font> </Div> </TR> </TBODY> </TABLE> </CENTER> このようにしても意味はないのでしょうか？
- na-na228
- お礼率17% (3/17)
- HTML
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
文章を左揃えにしたいのに、中央寄せになるのを修正したいということでしょうか？ だとすれば、</Div>の位置を左揃えにしたい文章よりも前に移動すればいいだけかと思います。 あと、<Div align="center">の前に<TD>が抜けているのと、文章の後の</TR>の前に</TD>が抜けていますので、これらも追加したほうがいいと思いますよ。 <CENTER> <TABLE width="600"> <TBODY> <TR> <TD> <Div align="center"> <Table border="1" width="600" height="10" bgcolor="#ffbfff" bordercolor="#0080ff" cellspacing="0"> <Tr><Td align="left"> タイトル </Td></Tr></Table> </Div> <BR> <font size="-1"> ここに文章を入れています。<BR> 文章は２段です。</font> </TD> </TR> </TBODY> </TABLE> </CENTER>
その他の回答 (3)
> <center>このタグを使っている所は直した方がいいのですね… > width: 600は必要なタグですか？ 書式や表現はスタイル設定で行うべき というのが ＳＥＯ(サーチエンジン の最適化)の上で 重要な意味を持ちます。その辺を気にしないなら ブラウ ザごとの表示のズレにだけ気をつけてればいいと思います。 「width:600」は タグではなく これもスタイル設定です。<div>の中身が 中央揃えにならないように設定する為には <div>に 幅とマージンの設定を 入れないといけません。抜いてみれば分かりますが 中身まで中央揃えにな ってしまうはずです。 あとスタイル設定は 本来 <body>内ではなく <head>内か 外部リンクにし た方がいいとされています。これもＳＥＯを気にしないなら それほど問題 ないと思います。
> テーブルなどを使わない長い文章を＜center＞で作る時に余りの文字 > までも真ん中になってしまうのを避けるには＜/Div＞で閉じればキレ > イに表示されるのですか？ そんなことはないです。<div>は あまり特別な意味のないブロック要素 という意味合いでしかないので。 ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト http://www.mozilla.gr.jp/standards/webtips0004.html が参考になると思います。本来 <div>や <table>のようなブロック要素 にはには text-alignを設定しないのが前提な訳です。 それを無理やりやろうとすると IEのバグにも対応させる必要があり 幅と 左右のマージンを指定しなければなりません。 <center> <div style="width: 600; text-align: left; margin: 0 auto;"> あいうえお<br />かきく</div> </center> あと一応 読んでおいて欲しいのですが 右・左・中央寄せ http://uguisu.skr.jp/html/center.html 現在 <center>は推奨されていませんので。極力 スタイル設定で指定 するようにして下さい。
補足
<center>←このタグは… <div style="width: 600; text-align: left; margin: 0 auto;"> あいうえお<br />かきく</div> </center> <center>このタグを使っている所は直した方がいいのですね… width: 600は必要なタグですか？
tableタグは レイアウト用ではなく あくまで表を作る時のものなので 本来のレイアウトは <head></head>内に <style type="text/css"><!-- body { text-align: center; } #titleFrame { width: 600; text-align: justify; margin: 0 auto; } h1 { margin: 0; padding: 1pt; background-color: #ffbfff; font-weight: normal; font-size: medium; border: 2px #0080ff solid; } h2 { margin: 0; font-weight: normal; font-size: x-small; } --></style> と記述しておいて 本文は <div id="titleFrame"> <h1>タイトル</h1> <h2>ここに文章をいれています<br /> 文章は２段です。</h2> </div> こう表現した方がいいかもしれません。
補足
Chiquilinさんの方法でやってみたら、とてもキレイに出来ました！！ ありがとうございます！！ テーブルなどを使わない長い文章を＜center＞で作る時に余りの文字までも真ん中になってしまうのを避けるには＜/Div＞で閉じればキレイに表示されるのですか？ なかなか、いつもキレイに出来ずそれで悩んでいます…
関連するQ&A
- 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
- dreamweaverで、テーブルのボーダーカラーに入力しても、表示されません。
プロの方に作っていただいたHPを書き換えていて、 テーブルのボーダーカラーを指定しようとしているのですが、 コードから何回もボーダーカラーを指定しているのに、 色がまったく表示されません。 </table> <table width="500" height="118" border="2" align="center" cellpadding="5" cellspacing="2" bordercolor="#000000"> <tr> <td width="131" bordercolor="#000000" bgcolor="#CCCCCC"><div align="center">●●●</div></td> <td width="205" bordercolor="#000000" bgcolor="#CCCCCC"><div align="center">●●●</div></td> <td width="114" bordercolor="#000000" bgcolor="#CCCCCC"><div align="center">●●●</div></td> </tr> <td bordercolor="#000000"><div align="center">●●●</div></td> <td bordercolor="#000000"><div align="center">●●●</div></td> <td bordercolor="#000000"><div align="center">●●●</div></td> <tr> <td bordercolor="#000000"><div align="center">●●●</div></td> <td bordercolor="#000000"><div align="center">●●●<br> ●●● </div></td> <td bordercolor="#000000"><div align="center">●●●</div></td> </tr> </table> 新しいページに、以上のコードをペーストすると、ちゃんと表示されます。 スタイルシートやCSSで指定してあって、それが優先されているのでしょうか？ スタイルシートやCSSは使ったことがないのですが、 それを解除するには、どうすれば良いでしょうか？ よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- テーブルだらけのページをスッキリさせたい
いま、ホームページビルダーで趣味のサイトを作っているところなのですが、 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>
- ベストアンサー
- ホームページ作成ソフト
- 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>
- ベストアンサー
- ホームページ作成ソフト
- ２列に表示させたい
お世話になります。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">資料１</font></td> <td align="Center" width="70"><font size="2">約 冊</font></td> </tr> <tr> <td align="Center" width="70"><font size="2">資料２</font></td> <td align="Center" width="70"><font size="2">約 題</font></td> </tr> <tr> </tbody> </table>
- ベストアンサー
- HTML
- テーブルサイズ指定
こんにちは。 困ったことがあるのですが、 <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170文字</TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TR></TBODY></TABLE> <BR> <TABLE BORDER="1"CELLSPACING=1 CELLPADDING=1 BGCOLOR="#FFFFFF"> <TBODY> <TR> <TD width=170>文字</FONT></TD> <TD width=638>文字</TD></TR> <TR> <TD>文字</FONT></TD> <TD>文字</TD></TR> </TBODY></TABLE> (それぞれの文字の長さは違います。) という２つのテーブルで、 ２つともテーブルの幅が異なるんです。 これを、両方とも同じ幅にすることはできないでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- ＡＳＰ修正について
下記のソースを書いています。 印刷ボタンと閉じるボタンがうまく表示されない。ボタンクリック表示されない。 不要なところは削除してもかまいません。 教えてください。 sResult = sResult & _ " </TR></TBODY></TABLE><BR>" & _ "<TABLE border=^0^><TBODY>" & _ " <TR>" & _ " <TD width=^354^><FONT size=^-1^ color=^#0099ff^></FONT></TD>" & _ " </TR><TR>" & _ " <TD><FONT size=^-1^>" & _ " " & _ " " & _ " " & _ " " & _ " " & _ " </FONT></TD>" & _ " </TR>" & _ "</TBODY></TABLE>" & _ "<input type=^button^ value=^印 刷^ onclick=^window.print()^> <input type=^button^ value=^とじる^ onclick=^link()^>" & _ "<BR><BR><TABLE border=^0^ align=^center^><TBODY>" & _ " <TR><TD align=^center^>" & _ " <br><B>処理が完了しました。ご依頼ありがとうございます。<BR>" & _ " [印刷] ボタンをクリックすると、このページの内容をプリントアウトできます。<BR>" & _ " [印刷] ボタンが表示されない場合は、ブラウザの印刷機能をご利用ください。</B>" & _ " </TD></TR>" & _ "</TBODY></TABLE>" & _ "<BR></CENTER>" & _ "<TABLE border=^0^><TBODY>" & _ " <TR><TD><FONT size=^-1^>" & _ " " & _ " </FONT></TD>" & _ " </TR>" & _ "</TBODY></TABLE>" & _ "<BR></FONT>" & _ "<TABLE border=^0^ width=^660^ cellpadding=^1^ align=^center^><TBODY>" & _ " <TR><TD width=^911^ align=^center^>" & _ " <A href=^^>" & _ " <IMG src=^img/index.gif^ alt=^indexページへ^ border=^0^ height=^20^ width=^80^ align=^center^></A>" & _ " </TD></TR>" & _ "</TBODY></TABLE>" & _ "</FORM></BODY>" & _ "</L>"
- ベストアンサー
- Microsoft ASP
- HTMLでテーブルを縦に並べたい！
基本的な質問でお恥ずかしいのですが、困っています。 テーブルを二つ、縦に並べたいのですが、何故か横に並んでしまいます。 どこが悪いのでしょうか？初心者ですみません…お知恵をお貸しください(T_T)。 <caption><font color="#ff0000">●</font>A <font color="#0000ff">●</font>B</font></caption> <table bgcolor="#80ffff" border="1"cellspacing="0" bordercolor="#0000ff" align="left"> <tr><th width="30"><font size="+5"><font color="#ff0000">●</font></th> <th width="150"> <font size="+4"><strong><big>C</big></strong></font></th> <td><font size="+2">D<br>E</font></td></tr> <tr><td></td><td><div align="center"> <font size="4" color="#8080ff"> 準備中</font></div></td><td></td></tr></table> </p></div> <p></p> <table align="center" bgcolor="#80ffff" height="20" width="250" border="1" cellspacing="2" cellpadding="0"> <tr><td><blink>HOME</blink></td></tr> </table> </body>
- ベストアンサー
- HTML
- 入力したHTMLがちゃんと表示されるか確認したい
以下のように入力したＨＴＭＬをちゃんとブラウザで表示されるか確認したいのですが、どうすれば良いのでしょうか？（下の入力内容は気にしないでください） -------------------------------------------------------------------------------------------------- <table align="center" style="border-spacing: 0px;width:100%;"><tr><td><div id="EBdescription"> <!-- Begin Description --><table border="6" bordercolor="#72799E" cellspacing="0" cellPadding="10" width="70%" align="center"> <!-タイトル＋写真 ここから--> <tr><td> <center> <font size="6" face="Tunga" color="#122276"> <b>◆FANTA GRAPE◆</b> </font> </center> </td></tr> <tr><td><br> <center> <font face="Arial">
- ベストアンサー
- HTML
- 添付のような飾り枠内に箇条書きを配したものを作ったところ、１行目が枠の
添付のような飾り枠内に箇条書きを配したものを作ったところ、１行目が枠の下端に近づくのですが、枠の内側に均等に余白を入れ、文章全体が中央に行くようにするにはどうしたらよいでしょうか。 <TABLE cellspacing="3" bgcolor="#dfe8bd"> <TBODY> <TR> <TD> <TABLE background="red.gif"> <TBODY> <TR> <TD></TD> <TD height="5"></TD> <TD></TD> </TR> <TR> <TD width="10"></TD> <TD align="center"> <TABLE bgcolor="#e1e9c2" width="100%" cellspacing="2"> <TBODY> <TR> <TD bgcolor="#e6ffe6" width="649" height="147"> <IMG src="tyoutin.gif" width="70" height="90" border="0" hspace="15" vspace="20" align="right"> <dl> <DD>日付 ○○○○○○○○○○○○○○○<br><br> <DD>日付 ○○○○○○○○○○○○○○○<br><br> <DD>日付 ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ </dl> </TD> </TR> </TBODY> </TABLE> </TD> <TD width="10"></TD> </TR> <TR> <TD></TD> <TD height="5"></TD> <TD></TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE></center>
- ベストアンサー
- レンタルサーバ・ASP
お礼
まだまだ勉強不足ですね… 携帯サイトを作るよりも奥が深いですね。 丁寧な回答ありがとうございました！！