• 締切済み

tableの改行、左右の余白について

今までHTML辞典を片手にHPを作成してきました。 見た目は割と綺麗に仕上がったと思いますが、ソースを見ると稚拙な事がバレます。 レイアウトもテーブルレイアウトですし、なによりも無駄なコードが多いです。 それで最近CSS利用してソースを簡素化しようと思っていますが、分からないことがあります。 そこで詳しい方に2点ほどお聞きしたいのですが。 CSSは外部ファイルにまとめてあります。 ・tableについて tableのセルに長い文章を入れると改行されることなく表示されます。 これではwidthで横幅を設定してても意味ありません。 今までは<br>などで手動で改行させてたのですが、これは予めCSSで設定できないでしょうか? あと<td>~</td>で囲ったセルの左側(テキストの前)に半角のスペースを入れたいのですが。これも今までは&nbsp;をコードに入れたりしていました。これも一緒に設定出来ないかと思いまして。 ×|テキスト| ○| テキスト| ・文章の左右にスペース 上記と少し被るかもしれませんが、ページ中に長い文章を記述する時も<br>を使用ていました。 左右に40pxぐらい空白を入れて文章も自動で改行されるようにしたいのですが、どのようにしたらいいでしょうか? CSSで作成されてるHPのソースを見ると<br>などがあまり使用されてないのでどうやってやるのかと思っていました。 ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。

  • CSS
  • 回答数1
  • ありがとう数0

みんなの回答

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

以下を表示したら理解出来るかも <table border="1"> <tr><td style="width:200px;"> デフォルト あああああああああああああ </td></tr> <tr><td> <p style="width:100px; margin:0; padding:0;"> ああああああああああああああああ </p> </td></tr> <tr><td style="padding-left:.5em;"> ああああああああああああああああ </td></tr> <tr><td style="padding:0 40px;"> ああああああああああああああああ </td></tr> </table> これは、表では無いのでtableで書くべきでは無いんですけどね・・・ つまり、レイアウトをtableで作らないって事です。 style属性は、外部CSSファイルに書くと一括で統一されます。

licky1115
質問者

補足

naokitaさん 回答ありがとうございます。 私の質問文がおかしかったですね。 以前はレイアウトをtableでしていたのですが、先日試行錯誤しながらなんとかCSSレイアウトできました。 そのレイアウトの中にtableで表にして表示したいものがありそこでtableを使用しています。 そのtableは現時点で下記のように外部CSSで設定しています。 .table1 { width: 700px; /* テーブルの横幅 */ border-collapse: collapse; /* 枠線の表示方法 */ border: 1px black solid; /* テーブル全体の枠線(太さ・色・スタイル) */ line-height:140%; //行間の設定 font-size:0.9em; color : white; } .table1 TD { border: 1px black solid; /* セルの枠線(太さ・色・スタイル) */ background-image : url("../img/bg2.gif"); text-align:center; height:30px; } .table1 TH { border: 1px black solid; /* セルの枠線(太さ・色・スタイル) */ background-image : url("../img/bg1.gif"); height:30px; } 上記のように設定しても自動で改行できなくて困っています。 <td>~</td>の中に長い文章を入れてるのでtdの箇所でwidth:500px;などと設定してみたのですが、何も変わらず。 なんとか<br>を使用せず自動で改行する方法がないものかと思い質問しました。 よろしくお願いします。

関連するQ&A

  • テーブル内の左右にだけ余白を設定するには?

    HPビルダー6.3を使っています。 テーブルを使ってリンク集を作っていますが、 表のセルの左右に余白がなく文字が詰まって 読みづらいと思うので右クリックで表の属性の セル内余白を設定してみましたが、上下にも 余白ができて表示が乱れてしまいます。 セルの左右にだけ余白を作りたいのですが、 どういうhtmlを書き込めばいいですか?教えてください。

  • テーブル内で改行を防ぐには

    td要素内に記述したテキストは通常、自動改行されますが、数字の場合自動改行されません。そのため横スクロールする必要があったり、サイトデザインがくずれたりします。 自動改行をされるようにするにはどうしたら良いでしょうか。 例えば、下記のようなソースです。 <table><tr><td> 012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789</td></tr></table>

    • ベストアンサー
    • HTML
  • TABLEセル内で改行させたいのですが・・・

    いつもお世話になっております。 HTML上で、名前とメールアドレスの一覧を作成しました。 すると、テーブルの列幅を指定しているにもかかわらずメールアドレスが、 改行されずに1行で表示されてしまいます。 検索した結果、「word-break : break-all」をCSSで設定したら大丈夫で あることがわかったので、設定しました。 IEでは、問題なく表示されたのですが、FireFoxでは、改行されません。 FireFoxでも、改行されるようにしたいのですが、どこを修正したら 宜しいでしょうか。  ご教授いただけますよう、どうぞ宜しく御願いいたします。 <Sorce> <html> <head> <style type=text/css> p{ maegin:0px; word-break: break-all; } </style> </head> <body> <table border="1px"> <tr> <td width="100px">Name:</td> <td width="100px">takemoto</td> </tr> <tr> <td width="70px">E-Mail:</td> <td width="70px"><p>ytakemoto12345678@abc.ne.jp</p></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • 【HTML5】テーブルデータの空白部分について

    あるテキストで見かけた表の作成方法です。 添付してある画像の一番下の行に空白が2つあります。 このテキストでは空白部分に<br>が使ってあります。 <br>は一般的に改行するときに使用すると他のテキストやサイトに書かれています。 空白の場合はCSSで幅、高さなどの調整するものだと思っていました。 table内に空白のデータがある場合、<br>を入れておくというのは通常現場などでも使われている方法なのですか? 空白のデータは皆さんはどのように処理なされているのでしょうか? 実務経験のない初心者です。まだ勉強中のものです。 よろしくお願いします。 <table> (略) <tfoot> <tr> <th>計</th><td><br></td><td><br></td><td>160</td> </tr> </tfoot> </table>

    • ベストアンサー
    • HTML
  • 改行が変な位置、中途半端な位置にて、不本意な改行がされていますので、そ

    改行が変な位置、中途半端な位置にて、不本意な改行がされていますので、それを防ぐ方法、やり方を教えてください。 まずは添付画像をご覧ください。 ドリームウェーバーCS5を使用してHPを作成しました。その際には、テーブルの中にテキストを入力し、そのテキストには予めCSSにてフォントサイズ・色を設定しています。 テキスト入力時にテーブルの端まで文字を入力する場合には、端の部分に来たところで、シフトキーとエンターキーを同時に押して改行しています。コードを確認すると<br />となっており、ちゃんと改行が出来ているようです。 その後にブラウザーでのプレビューすると、私のPC(windowsXP IE8)からでは、ちゃんと改行が設定どおりにされているのですが(画像上)、しかし、他のPC(windows7 IE8)で見ると改行が無理やり?変な位置で改行されてしまい、見た目が崩れてしまっています(画像下)。 どのようなやり方、方法をすれば、意図した改行、思惑通りの改行が出来て、どのPCから見ても同じように表示させる事が可能なのでしょうか? アドバイス…ご指示をお願い致します。

    • ベストアンサー
    • HTML
  • テーブルのセル間に余白が空いてしまいます

    2行×2列と3行×2列のテーブルを1つずつ作成し、どちらのテーブルも1列目のセルは結合して画像を挿入し、2列目のセルに文字を入力するというスタイルを取りたいです。 しかし、画像と文字の間(1列目と2列目の間)に余分な空白ができてしまいます。 margin、padding、cellspaceなどが必要ではないかと推測していますが、どこに埋め込むのか、自分なりに試しましたがわかりません。 htmlのコードとcssのコードを記しますので、どなたかお詳しい方お力を貸していただけませんでしょうか? また、もう1点困っていることが、テーブルとテーブルの間にスペース開けたいのですが、<br>はできるだけ使いたくありません。 divにmarginを指定して、テーブルタグの上に<div style="margin-top:10px"></div>とすればスペースは空きましたが、他に方法があれば合わせて教えていただけると嬉しいです。 <!-- htmlのコード --> <body> <table width="700" border="0" > <tr> <td><center> <img src="img/top_image.png" /> </center></td> </tr> <table class="table001"> <tr> <td rowspan="2"><img src="img/aaa.bmp" /></td> <td><h2>このサイトのごあんない</h2></td> </tr> <tr> <td><p>このサイトは~~~~~~</p></td> </tr> </table> <div style="margin-top:10px"></div> <table class="table001"> <tr> <td rowspan="3"><img src="img/bbb.bmp" /></td> <td><h2>このサイトのごあんない2</h2></td> </tr> <tr> <td> <p>このサイトは~~~~~~</p> <p>また、このサイトの~~~~~~。</p> </td> </tr> <tr> <td> <p>問い合わせ</p> <p>電話番号 000-000-0000</p> </td> </tr> </table> </body> /* CSSのコード */ body { background-color:#6C6; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; font-size: 0.8em; font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS P Gothic",sans-serif ; } #pageBody { width: 760px ; margin-top: 20px; margin-right: auto; margin-left: auto; background-color: #FFF; } table.table001{ background-color: #E8FECF; width: 700px; margin-left: auto; margin-right: auto; white-space:normal; } h2{ padding-left: 10px; background-color: #009900; width: 180px; color:#FFF; font-size: 1.1em; height: 25px; line-height:25px; }

    • ベストアンサー
    • HTML
  • テーブルレイアウト

    テーブルレイアウトで困っています。 <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> このように1列目のセルに長い文章を入れると、2列目の左のセルの幅が勝手に広がってしまいます。 何が原因で、対処法はないでしょうか? Netscape7.1ではこうならないんですが、IE6では勝手に崩れてしまいます。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブルを左右に並べて表示させたいのですが

    テーブルを左右に分割して、左側にメニュー、右側に静的な文字を表示させています。 <table> <tr><td>メニュー</td> <td>静的な文字</td><tr></table> 左側のメニューをクリックすると子メニューが現れて行数が増えるメニューにしました。 --書籍のJavaScriptを応用したらうまく作れました。 ただ、右側の静的な文字が、(左側親メニューをクリックし子メニューが現れ、左側の行数が増えることによって)下がってしまいます。 <td></td>の間にもうひとつテーブルをいれても、同じです。 CSSか何かで定義できそうな気もしますが、よくわかりません。(CSS使ったことがありません。) ご存知の方おられましたら、よろしくお願いします。

    • ベストアンサー
    • HTML
  • ACCESSでの改行コード

    ACCESSでの改行コードの入力方法を確認させてください。 ACCESSのテーブルにテキスト型のフィールドを用意し、一つのフィールドに改行が入ったデータを入力したいと考えています。 以下の方法を試してみましたが、改行コードが入っていないように思えます。 1.エクセルで一つのセルで、ALT+ENTERで文字列を入力し、テーブルにデータをインポート。 2.上記エクセルのデータをCSVで保存したものをテーブルにインポート。 これら2つのデータをテーブルで確認すると、改行はされていないですし、テーブルのデータをエクスポートしたものも改行はされていませんでした。 フィールドの設定で何か必要なんでしょうか? それとも、テキスト型のフィールドには改行コードを持てないんでしょうか?

  • 文章改行で出来る半角スペースを省く方法ありますか?

    Homepage Builder Ver.9を使ってHPを作っているのですが、 HTML構文を整えようと思い、 タブ以外で、文章でも改行してしまうと半角スペースが1つ出来てしまいます。 本当は、このスペースが要らないのですが、どの様にすればスペース無しで整えられるでしょうか。 例えば、 <TABLE border="2"> <TR><TH>五十音</TH> <TD>あいうえお かきくけこ</TD></TR> </TABLE> としたとしたら、 あいうえお かきくけこ という上記の様に半角スペースが1つ出来てしまいます。 又、 <TD>あいうえお   かきくけこ</TD></TR> としても、 あいうえお かきくけこ といった形で半角スペースが1つ出来てしまいます。 因みに、ここでは全角スペースで揃えました。 本当は半角スペースです。 文章で改行しても、半角スペースが出来ない様にする方法、 もしご存じでありましたら、何方様か教えて頂ければ幸いです。 どうしても、HMTL構文(又、ソース)を見ても横に長すぎて、 文章のある部分で改行をして整えたいのですが、 不要な半角スペースを省く(又は、除く)方法があればと思っております。 宜しくお願い致します。

    • ベストアンサー
    • HTML