テーブルの中にスペースを入れたい

質問

こんにちは。
テーブルについての質問です。
例えば
<TABLE CELLPADDING="0"CELLSPACING="0">
<TR><TD>アートオブライフ</TD><TD>サディスティックデザイア</TR></TR>
<TR><TD>ウィークエンド</TD><TD>スタッブミーインザバック</TR></TR>
<TR><TD>オルガスム</TD><TD>ダリア</TR></TR>
<TR><TD>紅</TD><TD>ブルーブラッド</TR></TR>
<TR><TD>サイレントジェラシー</TD><TD>ラスティネール</TR></TR>
</TABLE>
のようなソースの場合、左列の幅は最長の「サイレントジェラシー」に統一されるのですが「CELLPADDING="0"CELLSPACING="0"」オプションを使用しているため「サイレントジェラシーラスティネール」のように右列の文が、くっついて表示されてしまうのです。
そこでテーブル内にスーペス文字を記述して「サイレントジェラシー」と「ラスティネール」の間に空白を設けようとしたのですが、どうもインターネットエクスプローラでは、それが反映されないようです。
文の中に空白が混じっているのであれば正常に表示されるようですが分の先頭や語尾に空白を記述してもブラウザでは表示されないのです。
しかし何とかして「サイレントジェラシー」と「ラスティネール」の間に空白を入れたいのですが何か良い方法はありますか。

回答No.8

lucino · ベストアンサー

こんばんは。#7です。

> HTMLのネームエンティティに「水平タブ」を表示させるものが存在すれば、かなり使えると思っているのですが、そのようなものはあるのでしょうか。

というわけで、興味があったので調べてみました。
下のURLに、
horizontal tab

というのがあったのですが、どうも対応していないっぽいですね。

&nbsp;含めて、いろんな記号、文字のネームエンティティが存在するのですが、すべてが対応していないし、ブラウザごとに対応が違うようです。
&hearts;とか&spades;とかもIE、ネスケ6なら出ますけど、ネスケ4じゃだめですものね・・・。

やはりテーブル＋&nbsp;ですかね。

参考URL：

http://www.hotwired.co.jp/webmonkey/reference/special_characters/

お礼

ご報告ありがとうございます。
「 」と記述して試してみましたが半角スペース1つ分となってしまうのですね。
ブラウザでは「Tab」は半角スペースなので忠実に再現しているといえば、そうですが・・・。
やっぱり意味ないですね。
せっかく調べていただいたのに残念ですが結局テーブル＋&nbsp;に落ち着くのですね。

回答No.9

kyoujirouY

案1：テーブルの幅を決めてしまう
<TABLE CELLPADDING="0"CELLSPACING="0" width="400px">
セルの幅を指定しない場合は列幅は表の幅を等分します。

案2：セルの幅を決めてしまう
<TR><TD width="200px">サイレントジェラシー</TD><TD>ラスティネール</TD></TR>

案3：スタイルシートでセルの余白を決めてしまう。
<TR><TD STYLE="padding-right:20px">サイレントジェラシー</TD><TD>ラスティネール</TD></TR>

とかどうでしょう？
スタイルシートを使うなら他にも手はあるでしょう。
案1、案2はスタイルシートでも可能ですね。
手元のIE5.5、Netscape7、Opera7ではどの案もOKでしたが。

お礼

ご回答ありがとうございます。
ご提案いただいた3つの案を全て試してみました。
これらの方法は自由にサイズを決められるので、とても柔軟性に富んでいると感じました。
ですので今後あらゆる側面で利用できそうです。
ただし案1および案2はデータ長の更新により緻密な再計算が必要になるので本件には不向きだと思いました。
逆に案3は本件向きで、これを最長データセルに適用すれば問題が解決します。
ただし、これも本件においては既出の「&nbsp;」コマンドに多少の柔軟性が加わるだけのものとなってしまい「&nbsp;」の余白サイズに満足しているのであれば「&nbsp;」を用いた方がスマートですね。
そういうわけで新たなレスを頂きましたが今のところ「&nbsp;」を採用予定です。

回答No.7

lucino

こんばんは。

横方向にスペースを入れるタグとしては、
<spacer type="horizontal" size="10">
なんてものがありますが(10は適当にピクセルです)
ネスケ4までの対応でIEではダメです。

というわけで、みなさんの言われているテーブルと&nbsp;を使う方法になろうかと思います。

デフォルトのプロポーショナルフォントでなく、等幅フォントになってもよいというのであれば次のようなものはどうでしょう。
<tt>アートオブライフ　　　サディスティックデザイア</tt><br>
<tt>ウィークエンド　　　　スタッブミーインザバック</tt><br>
<tt>オルガスム　　　　　　ダリア</tt><br>
<tt>紅　　　　　　　　　　ブルーブラッド</tt><br>
<tt>サイレントジェラシー　ラスティネール</tt>

サイレントジェラシーとラスティネールの間は全角スペースひとつ。
他は、ラスティネールの左端にそろうように全角スペースが入っています。
<tt>等幅にするタグで囲っていますので、1文字が同じ幅になり、2列目は頭がそろいます。

お礼

ご回答ありがとうございます。
うーんIEではダメなんですか。
それは致命的ですね。
<tt>タブについては僕の構想に、きわめて近いものだと思いました。
これを用いれば、わざわざテーブルなんか使わなくても縦に連続でデータを並べられますね。
しかし例えば「紅」の後ろには実に9コもの全角スペースを挿入しないといけないわけで、しかも、さらに長いデータを追加した場合、(データ量xのびた長さ)分の全角スペースが必要になるので、やはり&nbsp;が最有力候補ですね。
またHTMLのネームエンティティに「水平タブ」を表示させるものが存在すれば、かなり使えると思っているのですが、そのようなものはあるのでしょうか。

回答No.6

the845t

cellpadding="2"を利用すれば一番簡単なんですが・・・。
空白を開けるなら後は先述の「&nbsp;」の他には無いですよね。
スタイルシートを使ったところでcellpaddingとなんら変わらないわけですし。

タブでやるのであれば、
<pre></pre>で囲めば良いかと。

お礼

ご回答ありがとうございます。
cellpaddingについてですが、これはできれば0のままにしておきたいのです。
ですので、やっぱり「&nbsp;」を用いる方法が今のところ最もリーズナブルだと思いました。
また<pre>タグを用いる方法もあるのですね。
しかし、これと比較しても「&nbsp;」の方が6バイトお得なので、やはり「&nbsp;」を採用することにしました。

回答No.5

yomo3

>全角スペースでもダメなようです。
>半角の空白、TAB、改行も全部ダメでしたよ。
これはしたり！
IE6がそうなっていたとは……。
ごめんなさい知りませんでした。
あたしてきにはその空白を取り除くのに苦労していたものですから……。
バージョンで動作が異なるのも困りものですね……。

>またバックと同色のスペースイメージとはどういうことでしょうか。
言葉の使い方が悪かったようですが、GIFの透明な四角でももちろん良いのですが、バックグランドカラーと同色の四角のイメージが貼り付けてあるのですよ。セルの間にも行間にも。恐らくブラウザ間の動作の違いを吸収するためなのでしょうが……

お礼

ご回答ありがとうございます。
なるほどスペースイメージとは画像のことでしたか。
それはなかなか凝った方法ですね。
でも、けっこ面倒くさそ。
あとブラウザの設定で画像を表示させなくしている人には通じなそうですね。
バージョンで動作が異なるのはホント僕もイライラします。
ここで質問して回答者の方が自信満々で答えてくれても、こちらには全く意味不明ってことになりかねませんからね。

回答No.4

yomo3

こんにちは。
全角スペースという手もありますし、#3の方の方法でセル幅を指定する方法もあります。
先日見たページでは、バックと同色のスペースイメージを貼り付けていました。（表示に時間がかかるけど）
半角の空白、TAB、改行はソースを見やすくするために、何文字合っても連続しているものは全部半角１文字分のスペースとして表示するようになっています。
ということは、半角１文字分は表示されるはずです。
#3の方の<TD>&nbsp;</TD>は、ですから<TD> </TD>とやっても結果は同じになるはずです。
また、
<TR><TD>
サイレントジェラシー
</TD>
<TD>
ラスティネール
</TD>
などのように、セルごとに改行すれば半角のスペースが挟まるはずです。
あっ。
各行の最後のセルが</TR>で閉じられてる。これか。#2さんが言ってるタグの間違いって……。

お礼

ご回答ありがとうございます。
試してみたのですが全角スペースでもダメなようです。
文の中に空白が混じっているのであれば正常に表示されるようですが分の先頭や語尾に空白を記述してもブラウザでは表示されないのです。
またバックと同色のスペースイメージとはどういうことでしょうか。
スペースは透明なのに、どうやって着色するんだろうと思ってみたり。
ってゆうか半角の空白、TAB、改行も全部ダメでしたよ。
ひょっとして、これってブラウザによって違うってことですかね。
僕のはXPに最初っから付いてたインターネットエクスプローラ6ですが。
それと・・・
うっ、また間違えを指摘されてしまった。
もう気付いているのに、もうこれ以上恥をさらさないでくださいってば。

回答No.3

junijuni

境界線も引きたくないし（BORDER属性を使わない）、
「CELLPADDING="0"CELLSPACING="0"」も必須ということであれば、#1,#2さんのようにスペースを使用するしかないのではないかなぁと。

ただ、サイレントジェラシー&nbsp;などとすると他のものが最長になった場合に対応できないので、
間にもう一つセルを挟むのがいいのでは？
つまり、
<TABLE CELLPADDING="0"CELLSPACING="0">
<TR><TD>アートオブライフ</TD><TD>&nbsp;</TD><TD>サディスティックデザイア</TD></TR>
<TR><TD>ウィークエンド</TD><TD></TD><TD>スタッブミーインザバック</TD></TR>
<TR><TD>オルガスム</TD><TD></TD><TD>ダリア</TD></TR>
<TR><TD>紅</TD><TD></TD><TD>ブルーブラッド</TD></TR>
<TR><TD>サイレントジェラシー</TD><TD></TD><TD>ラスティネール</TD></TR>
</TABLE>

お礼

ご回答ありがとうございます。
うーん必須というわけではないのですが、ひとまず必須ということにしておいてください。
ご指摘いただいたセルを挟む方法は行を追加するごとに9バイトも余分にディスクを消費してしまいますので、やや几帳面な私には向いてないと思いました。
逆に&nbsp;は新しく最長データが追加されても、そこへ移動させるだけでOKですので、お手軽だと思いました。
ところでテーブルを使うというのは今回たまたま思い浮かんだことでホントはデータを縦に連続で並べられれば何でも良かったのです。
ところがブラウザでは各文字の大きさが微妙に異なるのでスペースを駆使しても2列目のデータはキレイに揃いません。
そこで罫線が無く、かつ間隔が0のテーブルの利用を思いついたというわけです。
しかし皆さんのおっしゃるエスケープ文に「水平タブ」を表現するものが存在するのであれば、それを利用することにより小難しいテーブルなど用いなくても私が構想しているページが作れてしまうかも知れないのです。
そこで再度質問でスミマセンがHTMLのエスケープ文に「水平タブ」があれば、その記述のしかたを教えてください。

回答No.2

Seiryo

タグ間違ってますよね？
&nbsp;とか入れたらなんとかなると
思うけど、その解決方法はどうだかね。

お礼

ご返信ありがとうございます。
あらホント5行連続で間違えちゃいました。
ご指摘のとおり&nbsp;であっという間に問題が解決してしまいました。
ところで新たな質問なのですが、このようなエスケープ文に「水平タブ」を表示させるものは存在するのでしょうか。
もし存在するのであれば、わざわざテーブルを用いなくても今私が作ろうとしているページが作れてしまう可能性があります。
ですのでご存知でしたら教えてください。

回答No.1

387

文字列の先頭、または末尾に「 &nbsp 」を記述すると
半角空白 1文字分として処理されますので、それで調整
してみてください。

お礼

ご回答ありがとうございます。
お教えいただいた方法を試したら、あっけなく出来ました。
私が参考にしているウェブページで&ensp;や&emsp;や&thinsp;が紹介されていたのですが、これらはどれもテーブル内でスペースを表示できませんでした。
ですので、あきらめて皆さんに質問しに来たわけですが&nbsp;と記述すればテーブル内でもスペースが表示できるのですね。
ところで、ついでにもう1つお聞きしたいのですが「水平タブ」を上記のようなエスケープ文を用いてブラウザに表示することは出来るのでしょうか。
もし出来る場合は、その記述のしかたを教えていただけますか。