• 締切済み

【スタイルシート?】同行内で左寄せと右寄せ

“イベント名             日付” のように一行の中で一部の文字列(イベント名)は左寄せ、一部の文字列(日付)は右寄せ にするにはどのようにすればいいでしょうか。 加えますと、この一行は<TABLE>で書かれた<TD>~</TD>の中のものです。 <TABLE BORDER> <TR><TD>イベント1   日付</TD><TD>なんとか</TD><TD>かんとか</TD> <TR><TD>イベント2   日付</TD><TD>なんとか</TD><TD>かんとか</TD> </TABLE> のようになっています。 区切りの線を入れたくないので一つの<TD></TD>の中に入れたいと思っています。 <TD>内で改行無しに左寄せ&右寄せの方法はありますでしょうか。 最終手段としては中に透明なTABLEを入れて対処しようとは思ってますが、 スタイルシートやALIGNの使い方でいい方法がありましたらご教示願います。 宜しくお願い致します。

  • HTML
  • 回答数3
  • ありがとう数4

みんなの回答

noname#30818
noname#30818
回答No.3

<TABLE BORDER> <TR><TD><div style="float:right;text-align:right;">日付</div>イベント1</div></TD><TD>なんとか</TD><TD>かんとか</TD> <TR><TD><div style="position:absolute">イベント1</div><div style="text-align:right">日付</div></TD><TD>なんとか</TD><TD>かんとか</TD> td{border:solid 1px} .aa{border:solid;border-width:1px 0 1px 1px} .bb{border-width:1px 1px 1px 0;text-align:right;} <TR><TD class="aa">イベント1</td><td class="bb">日付</TD><TD>なんとか</TD><TD>かんとか</TD>

  • shizuku
  • ベストアンサー率33% (25/74)
回答No.2

CSSでは参考ページがありました。 http://allabout.co.jp/internet/hpcreate/closeup/CU20060209A/

参考URL:
http://allabout.co.jp/internet/hpcreate/closeup/CU20060209A/
noname#39970
noname#39970
回答No.1

関連するQ&A

  • <P>を使わずに、右寄せ(左寄せ)。

    <P>を使わずに、右寄せ(左寄せ)。 <p align="right">あああ</p> を<p>や<div>や<table>を使わないで、センタリングの<cetner>のように、右寄せ(左寄せ)をする方法はないでしょうか。 どなたかご存知の方おられましたら、ご教授のほどお願いします。

    • ベストアンサー
    • HTML
  • DataGridViewの文字のスタイル(左寄せなど)について

    お世話になります。VB2005です。 DataGridViewで、列のデータの内容によって、文字の左寄せや右寄せをやりたいと思いますが、 どのようにすればよろしいのでしょうか。 Column1:右寄せ、Column2:左寄せ のようにしたいのです。 よろしくお願いいたします。

  • 表の中の文字配置を右寄せにしたい。

    教えてください。 FC2でブログをしていますが,表を組み入れて,表の中の文字配置を右寄せにしたいのですが,方法はありますでしょか? 具体的には, <table width="200"border=1> <tr><td>年</td><td>月</td><td>日</td></tr> <tr><td>10年</td><td>1月</td><td>15日</td></tr> </table> で表ができると思うのですが,年,月,日,はセンターに, 10年,1月,15日,は右寄せにしたいです。 よろしくおねがいします。

  • 表の中の表にスタイルシートを適用したい

    表の中の1セル内に文字列と表を配置しています。 その中のフォントカラーを統一させたいのですが… <TABLE> <TR><TD class="color"> ←1 ここに色々文字列   <TABLE>   <TR><TD>ここにも文字列</TD></TR> ←2   <TR><TD>ここにも文字列</TD></TR> ←3 この場合、「ここに色々文字列」の方はちゃんと反映されます。 「ここにも文字列」の方が反映されません。(bodyで設定したフォントカラー) これを2や3のTDにclassを入れることなく1のTDで一括して変化させるようにするにはどのように記述したらよいでしょうか?

    • ベストアンサー
    • CSS
  • TDタグをスタイルシートを使って綺麗に簡単に書きたい。

    二つほど質問があります… 以下のようなcssとhtmlを書きました。 ○stylesheet.css body{background-color:#ffffff} a:hover{color:#ff0000;text-decoration:none;background-color:#ffff00} ○XXX.html <html> <head> <meta http-equiv="text/html" contents="Shift_JIS"/> <link rel="stylesheet" href='../css/stylesheet.css' type="text/css"/> </head> <body> <table border> <tr>  <th>&nbsp;</th>  <th>XXXXXX</th>  <th>XXXXXX</th>  <th>XXXXXX</th> </tr> <tr>  <th>XXXXXX</th>  <td align="right"><a href="###.html">100</a></td>  <td align="right"><a href="###.html">525</a></td>  <td align="right"><a href="###.html">300</a></td> </tr> <tr>  <th>XXXXXX</th>  <td align="right"><a href="###.html">10</a></td>  <td align="right"><a href="###.html">150</a></td>  <td align="right"><a href="###.html">300</a></td> </tr> </table> </body> </html> 質問1 <td>は全て数値で、必ず右寄せ(align="right")なのですが、 stylesheet.cssの中に書いてしまいたいのです…でも td{align:right} と記述しても右寄せしてくれません…どう書くのが正しいのでしょうか? 質問2 マウスカーソルをリンクに合わせると文字が反転するようになっているのですが できる事ならtdタグの空白部分も反転したほうが良いと思うのですが td:hover{color:#ff0000;text-decoration:none;background-color:#ffff00} としても駄目で <a href="###.html"><td align="right">100</td></a> とするとリンクが無くなってしまいました… 上手く実行できるようになりますでしょうか? できればJavaScriptを使いたくないんです… わがままな質問ですが、回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • IE8などでCSSでテーブルを中央に、テーブル内のテキストは左寄せにしたい

    お世話になっております。 ・本文・テーブルは中央揃え ・テーブルの内容は左揃え というものをCSSで作りたいのですが、 どのようにしたらいいのでしょうか。 現在のページの一部は <div id="main"> <h1>タイトル</h1>   <table border="1"> <p> 本文 </p> <tr> <td colspan="2"><h2 align="center">○○○</h2></td> </tr> <tr> <td>内容</td> <td>内容</td> </tr> ~行が続きますが省略~ </table> </div> のようになっています。 ちなみに cssのmainは「text-align:center;」を指定しておりますが、 IE8にしたところテーブルが左寄せになってしまいました。 なるべく多くのブラウザで同じような配置になるようにしたいのですが どうしたらよいでしょうか。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 可変長要素を中は左寄せのまま中央寄せ

    widthが可変長の要素があって、その中は左寄せのまま、中央寄せにしたいです。 次のようにテーブルを使えばできたのですが、 テーブルを使わずにやることはできますか?     <style>         .outer{             width:500px;             margin:0 auto;             background:#eee;             text-align:center;         }         .inner{             background:yellow;             margin:0 auto;             text-align:left;         }     </style>     <div class='outer'>         <table class='inner'>             <tr>                 <td>可変長の文字列・・・・・・・・・・</td>             </tr>             <tr>                 <td style='padding:20px 0;'>aaa</td>             </tr>             <tr>                 <td>bbbbbbbbbbbbbb</td>             </tr>         </table>     </div> display:inline-blockを使っても中央寄せにはなりますが、 「行間」の設定が困難でこれではだめでした。 (1行だけならline-heightで設定できるが、複数行になったとき意図したものではなくなる)     <div class='outer' >         <span class='inner' style='display:inline-block'>             <span>可変長の文字列・・・・・・・・・・・・・・</span><br>             <span>「行間」の設定はできないのでだめ</span>         </span>     </div> 宜しくお願いします。

    • ベストアンサー
    • CSS
  • HTMLをスタイルシートなどの手法で簡略化したい。

    次のHTMLでは、二つ目のフレームが1000行を超え、ページがかなり重くなります。それでスタイルシートとかいわれる手法で軽くしたいのですが、この手法は全く素人です。下の事例で、理想的なHTMLに短縮できるのでしたら、教えてください。 一つ目のフレームは1行、二つ目のフレームは1000行を超えます。よろしくお願いします。 ---------------------------------- <html> <head> <title>TEST</title> </head> <body> <center> <table> ・ ・ ・ ・ </table> <table cellspacing=2 width=1000 bgcolor=#cccccc> <tr align=middle bgcolor=#FFFFCC><td width=200 height=40><b>項目1</td><td width=200><b>項目2</td><td width=200><b>項目3</b></td><td width=400 align=left><b>項目4</b></td></tr> <tr align=middle bgcolor=#ffffff><td height=40><b>1行目内容1</b></td><td><b>1行目内容2</b></td><td><b>1行目内容3</b></td><td align=left><b>1行目内容4 </b></td></tr> <tr align=middle bgcolor=#ffffff><td height=40><b>2行目内容1</b></td><td><b>2行目内容2</b></td><td><b>2行目内容3</b></td><td align=left><b>2行目内容4 </b></td></tr> ・ ・ ・ ・ ・ <tr align=middle bgcolor=#ffffff><td height=40><b>1000行目内容1</b></td><td><b>1000行目内容2</b></td><td><b>1000行目内容3</b></td><td align=left><b>1000 行目内容4</b></td></tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • スタイルシートの書き方

    HPの中に以下のようなテーブルを並べて作っているのですが、後からまとめて編集しやすいようにCSSファイルを別に作ろうと思います。 自分であれこれ試してはいるのですが、スマートな(?)スタイルシートの書き方がいまいちわかりません。 どのように指定すればいいでしょうか? 因みに下のタグもかなり自己流な部分があるのではないかと思うので、おかしいところがあれば指摘してください。 よろしくお願いします。 ------------------------------------------------------ <table border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="1" cellpadding="2" width="500"> <tr><td bgcolor="#ffffff" width="150">AAA</td><td>BBB</td></tr> </table> </td> </tr> </table>

    • ベストアンサー
    • CSS
  • HTML?スタイルシートの表センタリングについて

    以下のSampleでやってみましたが、うまくセンタリング できません。 表をPageの真ん中に置いて かつ、表の中のセル内、文字列は左によせるには どうしたらよいのでしょうか? またこのような作業、確認は皆さんどうやって書いているのですか? ホームページビルダーでしょうか? 常に表には苦労しています、今までは<CENTER>を使っていました。キレイなHTMLを勉強しようとしているのですが 非常に難しいですね。よい方法ないでしょうか? スタイルシート部分: <style type="text/css"> div.ctable { text-align: center; /* IEでセンタリングさせる方法 */ } div.ctable table { margin: auto; /* 標準のセンタリング方法 */ text-align: left; /* IE用方法の弊害対策用 */ } </style> HTML部分: <div class="ctable"> <table> <tr><th>スタイルシート</th><th>センタリング</th></tr> <tr><td>CSS</td><td>Centering</td></tr> </table> </div>

専門家に質問してみよう