• 締切済み

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

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

みんなの回答

  • 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

専門家に質問してみよう