初心者です、助けてください！

質問

皆様、どうかよろしくお願いします
いま、簡単な表を作りたいのですがうまくいきません

<TABLE BORDER="1">
<TR>
<TD>あいうえお</TD>
<TD>かきくけこ</TD>
<TD>さしすせそ</TD>
</TR>
</TABLE>

いま上記のような単純な表を作っています
このまま、変換してしまうと枠の中が"あいうえお"という感じで
枠一杯に表記されてしまいますよね？
これを" あいうえお　" 　　 " かきくけこ　"

といった感じで枠と文字の間に程よくスペースを入れたいです

単純に<TD>　　あいうえお　　</TD>

とするのかと思いやってみてるんですが、なにかちがう様なのです

見よう見まねでイマ初めてやっているのですが、どうしたら
良いかわからず、頭を抱えています
どなたか、教えてください、お願いします！

また、自由に表や枠を作れるサイト等はないでしょうか？
初心者向けのところが良いのですが知っている方がいれば
あわせて、お願いします！

回答No.5

グイン リアード（@guin_riard） · ベストアンサー

これは例ですが

<table width=100% border="1" >
<tr align="center">
<td width=20%>あいうえお</td>
<td width=20%></td>
<td width=20%>かきくけこ</td>
<td width=20%></td>
<td width=20%>さしすせそ</td>
</tr>
</table>

width=は幅を決めます。この場合は、割合で指定してますが、絶対値でもかまいません。

align="center"は中央に表示します。left、rightにすると、左右に表示位置を変えられます。

<td width=20%></td>は空白だけのセルを作ってみました。別に感覚的に必要なければ入れなくていいです。

後は、widthの割合を変えて、望みの表を作ってください。

参考となるHPを貼っときます。がんばってください。

HTMLリファレンス
http://www.zspc.com/html40/

HTMLクイックリファレンス
http://www.htmq.com/index.htm

他にも役に立つHP(サンプル的)
http://maniakou.s7.xrea.com/

http://www4.osk.3web.ne.jp/~kitayan/

http://www.heo.jp/tag/index.html

補足

guin_riardさま、親切、丁寧な回答ほんとうにありがとうございます

この回答を見て、思わず泣きそうでした（ほろり。。）
道のりはスゴク険しいそうですが参考サイトを見ながら
がんばってみます！

本当に感謝です！！！

回答No.9

saru_1234

ANo.6 お礼の欄
> スペース　－＞　＆ｎｂｓｐ；
> 大なり記号＞　　－＞　＆ｇｔ；
> 小なり記号＜　　－＞　＆ｌｔ；
> &　－＞　＆ａｍｐ；
> の部分がまだまだ私には難解なのですが、

HTML では、いくつかの文字は特殊な機能を与えられているので、
普通に使えないのです。
そのまま書くとその機能の方が働いてしまいます。
ではその文字をどうしても使いたい時にはどうするかというと、
ANo.6さんが書かれたルールの書き方をするわけです。
IE が画面表示する際にそのルールの基、変換表示してくれるのです。

で、その説明の為にと、それをそのまま書いてしまうと画面に出るまでに
変換されてしまうので、
「説明の為には全角文字を使ったが本番では半角文字を使うこと」と
言われてるわけです。

お礼

saru_1234さま、再びアドバイスしていただき
本当にありがとうございます

そうですね、全角と半角ではＨＴＭＬではぜんぜん違った
意味になってしまうんですね（軽くため息。。）

昨日の今日なので、少し頭を休めてから再挑戦してみます
また機会があればぜひよろしくお願いします

感謝です！

回答No.8

naokita

ウェブアクセシビリティにも配慮して
全角スペースの多様は好ましくありません。
テキスト的にも良くありません。

見た目を整えるなら、ＣＳＳが理想なのです。

まずは、初歩の例ですが、
cellpaddingなら上下左右で同スペースが空きますが、
ＣＳＳのpaddingなら上下左右で別々のスペース指定も可能です。

<table border="1">
<tr>
<td style="padding: 0.5em 1.5em;">あいうえお</td>
<td>かきくけこ</td>
<td>かきくけこ</td>
</tr>
</table>

padding: の後の　0.5emは上下0.5文字分スペースを開ける指定。
その後の　1.5emは左右1.5文字分スペースを開ける指定。
px指定、数値等も自由に変更可能。全て半角で。

上記は単純なな方法ですが、
ＣＳＳなら違う方法で簡潔に一括指定も可能なのです。

お礼

naokitaさま、詳しく、親切な回答ありがとうございます

はい、やはり表のようなものって見た目を綺麗にするために
私の場合作ってみてますから、今回の回答は非常にありがたかったです

ＣＳＳですね、一行目の　あいうえお　の前の部分だけ
設定すればよいのですね
ぜひ頑張ってマスターしてみたいです、感謝です！！

回答No.7

mitoneko

＞の部分がまだまだ私には難解なのですが、

　とのことでしたので、補足しておきます。
　といっても、たいして難しいことでもありません。
　ためしに、
　”＆ｌｔ；＆ｎｂｓｐ；＆ｎｂｓｐ；＆ｇｔ；”と半角で、ｈｔｍｌファイルの本文のどこかに書いてみてください。半角で、”＜　　＞”と表示されると思います。＆ｎｂｓｐ；の数を変えたりしてみてください。何が起こるかは、多分すぐにわかると思います。（ＯＫｗｅｂの表示上の都合でここでは、全角で書いてますけど、全部半角で書いてくださいね。念のためもう一度書いておきます。）

お礼

mitonekoさま、追っての回答、ご親切にありがとうございます

いままだ、昨日の今日で頭が一杯の状態で。。。
少し頭を冷やしてから落ち着いてチャレンジしてみたいと
思います

またここに質問する事もあると思いますので
機会がありましたらよろしくお願いします

感謝です！

回答No.6

mitoneko

まずは、なぜ、それで空白がとれないかから、説明しておきます。
　ＨＴＭＬファイルでは、複数の連続した空白文字は１文字にまとめることになっています。というわけで、空白を２つ並べようが３つ並べようが、全部まとめられてしまって一つの空白の扱いになります。
　今回の場合、これでは困ります。

　ところで、ＨＴＭＬファイルで、特殊な文字を書くための方法があります。今の空白もそうですし、他に、半角の”＜”とか、”＞”とかが典型的な例です。半角の大なり小なり記号などは、まともに書いたら、表示がでたらめになります。（理由は簡単。<の後がタグだと認識されるからです。）
　というわけで、有名ないくつかの文字の書き方を示しておきます。

　スペース　－＞　＆ｎｂｓｐ；
大なり記号＞　　－＞　＆ｇｔ；
小なり記号＜　　－＞　＆ｌｔ；
&　－＞　＆ａｍｐ；

　最後の”；”を含めてちゃんと書いてくださいね。また、必ず半角で書いてください。（ここに回答を書くときに、ちゃんと書くとこの記号が翻訳されてしまうのでわざと全角で表記しました。）この方法で書いたスペースはまとめられることがありません。

　これで、書けば、とりあえず、あなたの発想で空白をもうけることができます。

　スマートにするためには、<table>要素の中で、cellpadding属性を利用します。
　<table cellpadding="10"> としてやれば、10ピクセル分の空白が文字の周囲に確保されます。

　また、<colgroup>と<col>要素を利用すれば、各カラムの幅を数値で指定することも可能ですが、少々難しいので、少しなれてから、この要素の使い方を調べてみてください。

お礼

mitonekoさま、詳しい回答、本当にありがとうございます

スペース　－＞　＆ｎｂｓｐ；
大なり記号＞　　－＞　＆ｇｔ；
小なり記号＜　　－＞　＆ｌｔ；
&　－＞　＆ａｍｐ；
の部分がまだまだ私には難解なのですが、

スマートにするためには、<table>要素の中で、cellpadding属性を利用します。
　<table cellpadding="10"> としてやれば、10ピクセル分の空白が文字の周囲に確保されます。

との事なので、ぜひ活用してみたいと思います
本当に感謝です！！！ありがとうございました！

回答No.4

hot100g

<table border="1" cellpadding="5">
<tr>
<td>あいうえお</td>
<td>かきくけこ</td>
<td>さしすせそ</td>
</tr>
</table>

cellpaddingでセル内の余白が設定できます。

参考URL：

http://www.est.hi-ho.ne.jp/gaia/hp/

お礼

hot100gさま、早速の回答、ほんとうにありがとうございます

このサイトも私の様な初心者にはレベルが高そうですが

頑張って挑戦していきたいです

感謝です！！

回答No.3

mak22

こんなの見つけました。
他にもあるかも。。
「テーブル」「自動生成」などのキーワードで探してみてください。

参考URL：

http://www.sys5jp.net/simplest/hyou.php

お礼

mak22さま、早速の回答、ありがとうございます

このサイト、チラッとしかまだ見てませんがなんかよさそうですね！

かゆい所に手が届いた思いです

感謝です！！

回答No.2

saru_1234

ANo.1 です。
昔作ったHTMLを確認してみました。
表中の場合はまたちがうようです。
全角１個→全角１個サイズ
全角３個→全角２個サイズ
全角５個→全角３個サイズ

でした。インターネットエクスプローラ６での表示です。

お礼

saru_1234　さま、早速の回答、ありがとうございます

これから挑戦してみますが、恐らく半角で試していたからかも
しれません

感謝です！！

回答No.1

saru_1234

うろ覚えですみません。
かなり前にHTMLを書いたことがあるのですが...

> 単純に<TD>　　あいうえお　　</TD>

で入れるスペースですが、半角スペースだと画面に現れません。
全角スペースだと、画面には半角サイズで現れます。
このことを踏まえてバランスを調整するといいと思います。