テーブルタグで、文字を寄せたいです

ＯＳはビスタでフラウザはＦｉｒｅｆｏｘ８です
それで、自分のブログにテーブルタグで表の様な物を作り
解説を載せたいんですが、セルの中に解説文字等を入れ
それを常に中央に持って行きたいんです

尚、最初に語らせて頂くと
下記に書いてる●はセルの角だと思って下さい
本当はセルのラインを－で表示しようと思ったんですが
作るのに時間が掛かる過ぎる為
角の部分に目印の●だけ付けました
従って●と●との間には見えない－が入ってると思って下さい

それと、タグの中にサイズやカラーのタグが入ってます
これは本来なら必要無いと思ったんですが
もし、これらが何かのトラヴルの原因だった為と思い
一応入れました

ちなみにブログはＦＣ２ブログです

ただ、その場合だけなら

<table width="数字" border=1>
<tr>
<td Bgcolor="#FFcc33" align="center">
文字
</td>
</tr>
</table>

で反映してます

ところが、解説をセル内に収めるのに
文字数の関係で２行に分かれる時が出て来ます

その場合でも、バランス良くと考え
手動(？)で任意の場所に<br>を入れて改行しました

すると当然ですが、この様に反映するんですが


●　　　　　　●
　文字文字文字
　　文字文字
●　　　　　　●


バランスを考えると、この様に反映させたいんです


●　　　　　　●●　　　　　　●
　文字文字文字　　文字文字
　文字文字　　　　文字文字文字
●　　　　　　●●　　　　　　●

　
それで、私の知識では
テーブルの中にテーブルを入れる…
つまり外側のテーブルに中央に寄せるタグを入れ
中のテーブルに左に寄せるタグを入れようと
この様にタグを設定しました


<table width="数字" border=1>
<tr>
<td Bgcolor="#FFcc33" align="center">
<table align="left" border=0>
<td>
名前
<br>
名前
</td>
</table>
</td>
</tr>
</table>

しかし、これで設定すると
ブログ内の「本文の編集」では反映しても
公開で見ると反映しなかったり
「本文の編集」でも反映したり、しなかったりなんです

この方法ではダメなんでしょうか？
もしダメだとしたら、どう設定すれば良いでしょうか？
ちなみに、ブラウザがＦｉｒｅｆｏｘだから
反映が見えない訳では無いです

最後に、この様な設定の場合
よく使用される物として、スタイルシートも知ってますが
もし可能だとしてもスタイルシートではなく
タグで御願いします

その理由なんですが、覚えるのが大変な事…
勿論、覚えるのを面倒がっててはダメなのは分かってるんですが
例え教えて貰って設定しても
滅多に使用しないスタイルシートだと、設定した事も忘れたり
再設定する可能性が考えられる為

そうすると、それが原因で何かのトラヴルが発生しても
以前に設定したスタイルシートの場所や
記号等も忘れる危険が高いからです

No.3 ベストアンサー 回答者： naokita 回答日時： 2012/03/03 00:16

NO.1.2回答者です（お礼拝見済み）

まず、真ん中の画像、
<table width="400" border=1>
<tr>
<td style="padding: 6px 100px; background:#FC3;">
名前<br />名前名前名前
</td>
</tr>
</table>
NO.1に書いた通りのまんまですか？
　１、width="400"を指定しているから幅が大きくなるだけ。
　２、padding: 6px 100px;　の100pxは左右100pxの余白があるという事
“数値は好きなように要調整。”
と書いたじゃないか！！！！！！
こっちでは貴方環境が不明だからの事。そのまま使わずに変更して試せ！って事

つまり、上の図の様に貴方環境のtdに指定するとすると、
<td>内のtableを一旦削除して、空にしてから、

<td style="padding-left: 10px; background:#FC3;">
名前<br />名前名前名前
</td>

たった、これだけの事。tableをごちゃごちゃ書くより簡潔。
paddingってのは隙間を作るって事。その-leftだから、左に隙間。
:10px; だから　隙間＆左＆10px　つまり左に10px開ける指定。
好きなように数値を変更して左スペースを作れば良いでしょう。

適当に変更してもデザイン的にダメなのかな？
それともCSSがNGなのかな？　別に覚える必要はないけど。
HTMLのtableのみで作るなら、

改行したり、改行しなかったり、ソースが改行されてたり、されてなかったりで
どっちの改行環境なのか意味不明ですが・・・
下段の画像も同じで、
水色のところがセルが該当箇所だから、
　１、まずは文章の途中で改行する事。改行がなければ分からないから。
　２、水色を削除（水色は単なる見易くしている為）
　３、セルが２列なのだから、前者同様に、width="500"を変更

というか、全部書くと、
<table width="500" border=1>
<tr><th colspan="6">1</th></tr>
<tr><th>2-1</th><th>2-2</th><th>2-3</th><th>2-4</th><th>2-5</th><th>2-6</th></tr>
<tr align="center"><td Bgcolor="#FFcc33"><table><tr><td>3-1<br>★文字文字</td></tr></table></td><td>3-2</td><td Bgcolor="#FFcc33">3-3</td><td>3-4</td><td Bgcolor="#FFcc33"><table><tr><td>3-5<br>★文字文字</td></tr></table></td><td>3-6</td></tr>
<tr align="center"><td Bgcolor="#FFcc33"><table><tr><td>4-1<br>★文字文字</td></tr></table></td><td>4-2</td><td Bgcolor="#FFcc33"><table><tr><td>4-3<br>★文字文字</td></tr></table></td><td>4-4</td><td Bgcolor="#FFcc33">4-5</td><td>4-6</td></tr>
<tr align="center"><td Bgcolor="#FFcc33">5-1</td><td>5-2</td><td Bgcolor="#FFcc33">5-3</td><td>5-4</td><td Bgcolor="#FFcc33">5-5</td><td>5-6</td></tr>
<tr align="center"><td Bgcolor="#FFcc33"><table><tr><td>6-1<br>★文字文字</td></tr></table></td><td>6-2</td><td Bgcolor="#FFcc33">6-3</td><td colspan="3">6-3,6-4,6-5</td></tr>
</table>

これがやりたい事ではないでしょうか？
（改行とかここで反映するか不明ですが<tr>毎に８行あります。）

但し、センター配置というのは、
スペースがあるからセンターに寄りに成るのであって、
文字数が多くなったり、テーブル自体のwidthが狭かったり、
セルが多かったり、セルが狭かったり、
スペースが無ければ、センターも何もならないです・・・

これで、わからなければ、当方はお手上げですｗ
---------------------
初手から書いた通り、テーブルは表なので、
テーブルにテーブルを入れる事など本来は考えられないです。
更に、デザイン部分はCSSで指定するのがW3Cの方向性。
なので、残念ながらこういうテーブルを汚いHTMLといいます。

この回答へのお礼

回答有難う御座います
コンディション不良でレスが遅れて申し訳ありません

まず今回の件ですが、結論から言うと
御蔭さまで解決しました

ただ
““数値は好きなように要調整。”と書いたじゃないか！！！！！！”
に関してなんですが
真ん中に持って来れれば良かっただけで
両サイドのスペースの幅迄は考えて無かった為…
今１つ理解出来てませんでしたし
その事に関しては、前回のレスで書き忘れてました

でも、今回の解説を簡単に考えると
私はＨＰの解説通りに作っただけでしたから
<td>の中にalign="center"を入れる事しか分かりませんでしたが
<tr>の中にalign="center"を入れて<tr align="center">に変更すれば
その行内では全てのセルに反映されたんですね？
この<tr>って、そういう効果でしょうか？
本来なら、こういうタグも意味を調べられれば良いんですが
それを解説してるＨＰは中々存在しないんで…

しかし、前回も触れられてたと思いましたが
テーブルが表だと言うのは分かるんですが
テーブルにテーブルを入れるのが考えられないのは
どうしてでしょうか？

つまり今回の様に、セルの中に文字を入れるけど
２段に分けて中心に持って生きたい
そんな場合、本来なら、どういう方法で反映させるんでしょうか？
最後に、ＣＳＳの事ですが
前回私が書いたタグの覚え方みたいな方法は無いですか？

お礼日時：2012/03/15 21:52

No.2 回答者： naokita 回答日時： 2012/02/28 18:18

前回答者です（お礼拝見済み）

---------
意図しない表示になる理由は２つ考えられますが、
１、ソースの改行設定（ブログではEnterで改行される）
２、HTML利用方法の理解不足です
---------
tableの次に（子要素）trが無いね・・・
table→tr→td

まず、以下の実質４行のソースをコピペで"そのまま"ブログで表示してみたら理解出来るでしょう。
（本来はCSS推薦ですがNGという事なので、以下は不自然なHTML/文章構造と非奨励属性ですよ・・・）

<table width="500" border=1><tr><td colspan="2" align="center">文字
</td></tr><tr><th>brあり<br>brあり</th><th>brなし
brなし</th></tr><tr align="center"><td Bgcolor="#FFcc33"><table border=0 Bgcolor="#00FFFF"><tr><td>★文字
★文字文字文字</td></tr></table></td><td>文字<br>文字文字文字</td></tr></table>


表示できたら、自分のソースと比較しましょう。
・何故改行するのか、何処で改行するのか。
・<br>でも良いのか
・trの必要性
・alignの動作
・tdの収縮
Bgcolor="#00FFFF"は表示範囲を仮に確認する為の仮設定なので削除


＞サイズが、とんでも無い大きさに変わりました
サイズとは？
文字・テーブル・セル・行・列・高さ・幅・
色々ありますよね・・・
サイズが勝手に大きくなる事は無いから、恐らく高さの事かな？
ブログでは、
テキストを[Enter]で改行するとプログラムで自動<br>が挿入される。
なので、HTMLソース自体をも改行すると、
当然<br>がソース内の不適切な部分に挿入されてソースがグダグダになる・・・
ブログにHTMLソースを書きたいなら改行しないで書く事。
もしくは、ブログの管理設定で自動改行<br>の設定を解除する事。
どっちの仕様を使うかはユーザー次第。

---------------

CSSの利便性を知るなら以下を。
（興味無いなら余計なお世話なので読まない方が良いですが）

HTML属性でのデザインは進化していないので限界がある。
自由なデザインを利用したいのであれば、CSSの勉強をお勧めします。

＞何を何処に設定したかを忘れたり
HTMLタグは忘れないのかな？　CSSも同じです。
メモすれば済む事だし、スタイルシート内にもメモ出来る。
例；
/* 赤色 class="caution" */
.caution{ color: red;}

HTMLで、↓↓↓
<p class="caution">ここが赤くなる</p>

＞それとも…いちいち(？)覚えなくても大丈夫なんでしょうか？
使いようによっては、
複雑なCSSを覚える必要はなく、一旦設定すれば、
class="～～～"の～～～部分を名前を覚えておくか、CSSファイルを確認する程度で良い。
どうやって覚えるか、どうやって再利用するかは利用者次第。

CSSなら全記事内の class="caution"を一瞬で青にできるが、
HTMLだけなら全部書き換えしなければいけない・・・
同様にレイアウトの統一デザインをも一瞬で変更できるので便利って事。
つまり、
CSSを使う人は思った通りのデザイン変更を気軽に行えるので、当然意図通りに綺麗に仕上がっていくが、CSSを利用できなければ、デザインの変更＝大掛かりなリニューアルを意味するので、古臭いデザインのまま妥協している場合が多いでしょう・・・

知らない＝利用しない＝損な事は世の中に沢山あるでしょ？

この回答へのお礼

回答有難う御座います

“表示できたら、自分のソースと比較しましょう。”

ハイ、確かに私自身、タグはテーブル含めて
一部しか知りませんし
普段はブログ機能のタグを利用してます

ただ…これは推測だったんですが
“・trの必要性”に関しては
段の改行に必要なタグと判断しており…
つまり、<td>文字</td><td>文字</td>の場合は
セルが横に並びますが
<td>文字</td></tr><tr><td>文字</td>の場合は
縦に並ぶ…そうすると文字を１つの枠で囲みたい場合は
<tr>を付ける必要が無いから
<table border=1><td>画像</td></table>
これで良い…と勝手に判断してた訳です

ただ…貴方から御指摘頂いてるテーブルの事も
実は頭の中では考えてました
例えば、trの必要性、alignの動作、tdの収縮の部分です

と言うのが、余談ですが
最近、強調したい文字に対しては
アンダーラインのタグを使用する回数が増えました
これは、通常なら<u>文字</u>で良いんですが
これだと文字の黒に対してラインも黒です

そうすると、特に強調…の場合で赤いラインを使用と考えると
<span style="border-bottom: solid 1px red;">文字</span>
と変わる訳ですが、同じラインなのに
赤と黒と言うだけで、どうしてタグが全く変わるんだろう？…と
これが、文字に色を付けるだけなら
<span style="カラーのタグ">文字</span>ですから
このカラーのタグ部分を変えれば良いだけなのに…

と疑問にも思ってました

“メモすれば済む事だし、スタイルシート内にもメモ出来る。”

この事なんですが、確かに正解ですし
今迄タグに関しては、その様に作りました
ただ…問題なのは文字で解説した場合の限界です

つまり、折角メモしても
滅多に使用しないタグの場合
どんな反映だったかを忘れてしまう
まして、これが文字に色を付ける場合なら尚更

例えば青とメモしても、どんな青なのか？
薄いのか濃いのか？…
薄い…又は濃いと書いても、どの程度だったのか？…
それが分からないと意味が無くなる訳で

但しタグに関しては、最近ですが
新たな対策として、メモ帳に記入した後
タグの記号部分に特殊文字を入れ
保存する時に、拡張子を「html」で保存に変更しました

こうすれば、ファイルを開くと自動でブラウザが開きますから
ネットでタグの説明を公開してるＨＰに
アクセスしてるのと同じ感覚でタグの種類と反映を見れる…

但し、まだ知識不足の為
レイアウトが上手く出来ませんから
最小限度のタグのみメモしてる状態です
ですから、ＣＳＳも覚えて損する事じゃないのは分かってますから
これと同じ方法で出来るなら検討出来るんですが…

ただ…予め書かせて頂くと
該当しなければ余計な事を書きましたが
だったら文章でタグを作って反映した結果を画像で作れば？
…と言われるかも知れません
この場合、私の推測では恐らくですが
ワードなら文章も作れるし反映を画像でも貼れるからと
言われるかも知れません

もし、この様なアドバイスだとしたら
実は私のパソコンにはワードやエクセルは入っておらず
その代わりにオープンオフィスは入ってますが
ハッキリ言って、これに保存した場合
起動するのにも結構時間が掛かるんです
大体…ですが最初にファイルをクリックすると
１０秒位でしょうか…

ですから普段はワードは使用せずに
メモ帳に全て保存してる訳なんです

“興味無いなら余計なお世話なので読まない方が良いですが”

いえ…余計だとは思ってません
ハッキリ言って、私の知識不足なだけで
もっとＣＳＳを使用出来れば有難いとは思ってます
但し、上記の様な理由で
現時点では、難しいかな…と言う感じなんです


“＞サイズが、とんでも無い大きさに変わりました”

これは、やはり反映した物を見ないと分からないですよね？
そこで今回画像を見せようと思い、アップしました
このＵＲＬが、その画像です
http://firestorage.jp/download/f33bb573ad1292f31 …

一番上が、投稿時に書いた
テーブルの中にテーブルを入れた物で
赤丸の部分が反映させたい文字です
文字は左に揃ってますが、セルの中でも中央に配列されず
左に寄ってる状態なのが分かると思います

そして、その下が２回目に教えて頂いたタグでの反映
これは、私の書き方が分からなかったんだと思いますが
内容としては目的通りに反映してるんです
しかし、セル自体とんでも無い大きさなのが分かると思います

そして一番下が、今回教えて頂いたタグですが
いずれも本来の目的とは違ってるのが分かると思います

と言う訳で、今回のレスで内容は把握出来たでしょうか？
宜しく御願いします

お礼日時：2012/03/02 17:37

No.1 回答者： naokita 回答日時： 2012/02/27 19:58

<table width="400" border=1>

<tr>
<td style="background: #FC3; text-align:center;">
<table style="width: 200px; margin:0 auto; text-align:left;">
<tr><td>
名前<br />名前名前名前
</td></tr>
</table>
</td>
</tr>
</table>

例の●の配置が、ずれているので意味不明ですが、
たぶん、考えている事は上記かな？

tableは表なので、table内にtableを入れるのはナンセンス・・・

文章を自分環境内での<br>で強制改行は、
Firefoxの「表示→ズーム」で文字サイズのみを変更して拡大すると、
意図しない変なところで改行される・・・　そんな環境で見ている人もいますよ。

CSSは、style属性としてHTMLに直接記述できるので、
非奨励な属性を利用するよりはマシだし簡単

<table width="400" border=1>
<tr>
<td style="padding: 6px 100px; background:#FC3;">
名前<br />名前名前名前
</td>
</tr>
</table>

padding: 6px 100px;の100pxが左右の余白が100pxって事なので、
親要素がセンター配置と同じ意味。数値は好きなように要調整。

テーブルなんか利用せずに、以下ではダメなのかな？
<p style="width:192px; padding: 6px 100px; background:#FC3; border:4px ridge white;">名前<br />名前名前名前</p>
（pではなくdivでも良い）

とりあえず、３種類提示したので、自分のお好きな様に
一番簡素化されたのがどれなのか考えた方が良いでしょう。
ちなみに、
外部スタイルシートを利用すれば、もっと簡単になるし使い回しも可能。
その為（毎回同じレイアウトが使える為）にCSSがあるといっても過言では無いです。

この回答へのお礼

回答有難う御座います

“もっと簡単になるし使い回しも可能。”

ハイ、ですから
それは投稿時にも書いた様に
何を何処に設定したかを忘れたり

更には、そのスタイルシートに
どんなタグを併用すれば良いのかも忘れたら
全く意味が無い為に使用してないんです

それとも…いちいち(？)覚えなくても大丈夫なんでしょうか？

それと、今回教えて頂いたタグなんですが
一応反映したんですが、私の書き方も悪かった様で
サイズが、とんでも無い大きさに変わりました

そこで…長いタグですが
正確さを伝える為、実際のテーブルに近い物を全て載せました
下記のテーブル内で、★文字と書いてる部分が
該当する所です


<table width="500" border=1><tr><td colspan="6" align="center">文字</td></tr><tr><th align="center">文字</th><th align="center">文字</th><th>文字</th><th>文字</th><th>文字</th><th>文字</th></tr><tr><td Bgcolor="#FFcc33" align="left"><table align="center" border=0><td>★文字<br>★文字</td></table></td><td align="center">文字</td><td Bgcolor="#FFcc33" align="center">★文字<br>★文字</td><td align="center">文字</td><td Bgcolor="#FFcc33" align="left"><table border=0><td>★文字<br>★文字</td></table></td><td align="center">文字</td></tr><tr><td Bgcolor="#FFcc33" align="left">★文字<br>★文字</td><td align="center">★文字<br>★文字</td><td Bgcolor="#FFcc33" align="left">★文字<br>★文字</td><td align="center">文字</td><td Bgcolor="#FFcc33" align="center">文字</td><td align="center">文字</td></tr></table>

お礼日時：2012/02/27 23:36