WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:テーブル内の文字位置

きうい [WriteDate : Fri Jul 6 15:14:15 2001]

<TABLE BORDER=1>
<TR>
 <TH>
   項目名(コード)
 </TH>
 <TH>
   値1
 </TH>
 <TH>
   値2
 </TH>
</TR>
<TR>
 <TD>
   <DIV align=left> あいうえお </DIV>
   <DIV align=right> 012345 </DIV>
 </TD>
 <TD>
   0
 </TD>
 <TD>
   0
 </TD>
</TR>

</TABLE>

という表の
 <TD>
   <DIV align=left> あいうえお </DIV>
   <DIV align=right> 012345 </DIV>
 </TD>
の部分で<DIV>を使うと改行されてしまって
意図したように表示されないのです。

これを改行させずに、キレイに左右にテキストを配置したいのですが
なにかイイ方法はありますでしょうっか?

最悪の場合、さらにTABLEで配置とか(汗


andi [WriteDate : Fri Jul 6 15:46:58 2001]

<th colspan="2">
 項目名(コード)
</th>



<td align="left">
 あいうえお
</td>
<td align="right">
 012345
</td>

のように対応するのは如何ですか。


きうい [WriteDate : Fri Jul 6 15:58:21 2001]

できれば
「あいうえお」「012345」の間に何も入れたくないんですよ
その方法だと枠線が入っちゃうので(汗

↓ こんなイメージで
┌────────────┬───┬──┐
│                      │      │    │
├────────────┼───┼──┤
│あいうえお      012345 │      │    │
└────────────┴───┴──┘

↓これはぺけ
┌────────────┬───┬──┐
│                      │      │    │
├──────┬─────┼───┼──┤
│あいうえお  │  012345 │      │    │
└──────┴─────┴───┴──┘

キレイに出るかな?


きうい [WriteDate : Fri Jul 6 15:58:57 2001]

あぁ
やっぱり崩れた(TT


おーなーしぇふ [WriteDate : Sat Jul 7 01:32:37 2001]

スタイルシートを用いる手がありますが……:

■CSS
<STYLE type="text/css">
<!--
table.list {
    border-collapse: collapse;
    border-width: 2px;
    border-style: solid;
    border-color: #000000;
}
table.list th {
    text-align: left;
    border-width: 1px 1px 4px 1px;
    border-style: solid solid double solid;
    border-color: #000000;
    padding: 4px;
}
table.list td {
    border-width: 1px;
    border-style: dashed solid;
    border-color: #000000;
    padding: 4px;
}
table.list td.id {
    border-right-width: 0px;
}
table.list td.code {
    border-left-width: 0px;
}
-->
</STYLE>


■HTML
<table class="list" width="84%" border="0" cellspacing="0">

<tr><th class="id">1</th><th class="code">2</th><th class="value1">3</th><th class="value1">4</th></tr>

<tr><td class="id">1</td><td class="code">2</td><td class="value1">3</td><td class="value1">4</td></tr>

<tr><td class="id">1</td><td class="code">2</td><td class="value1">3</td><td class="value1">4</td></tr>

</table>

Winでチェックすると、IE5.5の場合は問題ないようですが、IE4だとずいぶん感じが変わります(^^;)
※Win版Netscape6およびMacは未チェック。


通りすがりの牛 [WriteDate : Sat Jul 7 09:02:28 2001]

table.list td.code

text-align: right;
を足してねン。


きうい [WriteDate : Sat Jul 7 22:03:31 2001]

おぉ
すごい
ほぼ理想どおりです

ここからいろいろ改造してみます
ありがとうございました

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World