tableの横の位置を変えるには？？

<div>
<table>
<tr><td>あ</td><td>い</td></tr>
<tr><td>う</td><td>え</td></tr>
</table>
</div>

が仮にあったとして、これを外部ＣＳＳファイルでどこかのタグに
text-align:center
を適用させ、テーブルの位置を真ん中にさせたい（表のような使い方です）んですが、自分でやってみたら、divとtableにＩＤとclassで両方試して適用させましたができませんでした。

この表の横の位置をブロックとしてとらえて移動させることはできる
でしょうか？？

No.6 ベストアンサー 回答者： himajin100000 回答日時： 2007/08/15 19:21

>全てのブラウザに対応させようとすると

実験はしてないけれど多分ね。
自分は標準準拠モードでしか記述してないからわからないけれども。

>Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、
これによってブロックレベル要素がセンタリングされるのはWindows版のIEのみで、これは同ブラウザのバグです
【(ただし、IE6の標準準拠モードではこのバグは修正されています) 】

スタイルシートWebデザイン
2.2. tutorial of HTML as SGML
http://www.asahi-net.or.jp/~jy3k-sm/css1/2003mak …

文書型宣言の意味
http://www.kanzaki.com/docs/html/doctype.html

DOCTYPE宣言による「解釈」の切り替え
http://www.remus.dti.ne.jp/~a-satomi/bunsyorou/D …

=============================================================
包含ブロック(containing block)
http://msugai.fc2web.com/web/CSS/box.html

# 他の要素では、要素の 'position' プロパティの値が 'relative' か 'static' である場合、
包含ブロックはブロック・レベル／テーブル・セル／インライン・ブロックの
最も近い祖先のボックスの内容辺 (content edge) で形成される。

http://www.w3.org/TR/CSS21/visudet.html#Computin …

10.3 Calculating widths and margins
width(幅)とマージンの算出方法

The values of an element's 'width', 'margin-left', 'margin-right', 'left' and 'right' properties
as used for layout depend on the type of box generated and on each other.

レイアウトに用いられる要素の'width', 'margin-left', 'margin-right', 'left' and 'right'プロパティの値は
その要素のタイプに依り、また、お互いに影響しあっている。

(The value used for layout is sometimes referred to as the used value.)

レイアウトに用いられている値は「used value」として言及されることがある。

In principle, the values used are the same as the computed values, with 'auto' replaced by some suitable value,
and percentages calculated based on the containing block,
but there are exceptions. The following situations need to be distinguished:

原則的に，使用される値はcomputed valuesに等しく，
auto値は適切な値に置き換えられる。

しかし，これらには以下の状況によって異なる例外がある。

(略)

10.3.3 Block-level, non-replaced elements in normal flow
通常フローにおける非置換ブロックレベル要素

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width'
+ 'margin-right' + scrollbar width (if any) = width of containing block

という等式が成り立つ

(略)


If there is exactly one value specified as 'auto', its used value follows from the equality.
これらのうち，autoとなっている値があれば，そのused valueは等式から求められる

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width'
follows from the resulting equality.

【もしwidthがautoならば、その他のauto値は0として扱われ，
等式によりwidthが求められる。】

If both 'margin-left' and 'margin-right' are 'auto', their used values are equal.
This horizontally centers the element with respect to the edges of the containing block.

もし，margin-leftおよび，margin-rightがautoならばそのused valueは等しく，
結果的にその要素は包含ブロックの端から等しく，水平に中央揃えされる。

==========================================
17.5.2 Table width algorithms: the 'table-layout' property
http://www.w3.org/TR/CSS21/tables.html#width-lay …

Note that this section overrides the rules that apply to calculating widths as described in section 10.3.
この章は10.3のwidthの算出方法を上書きする。

In particular, if the margins of a table are set to '0' and the width to 'auto',
特に，tableのmarginを0にし、widthをautoにしても

the table will not automatically size to fill its containing block.
tableの幅は自動的に包含ブロックに収まるようなサイズに調整されることはない。

However, once the calculated value of 'width' for the table is found
(using the algorithms given below
or, when appropriate, some other UA dependant algorithm) then the other parts of section 10.3 do apply.

しかし，ひとたび，以下のアルゴリズム，もしくは，適切なときはUA依存のアルゴリズムによって
tableのwidthの計算値が求まったならば，その他の部分は10.3に従う。

Therefore a table can be centered using left and right 'auto' margins, for instance.

したがって，例えば，
tableはmargin-leftとmargin-rightをautoにすることで
(水平方向の)中央揃えをすることができる。
====================
オマケ:

http://oshiete1.goo.ne.jp/qa3167212.html

この回答へのお礼

回答ありがとうございます。
返事が大変遅くなりまして申し訳ありません。

大変勉強になります。
どうもありがとうございました。

お礼日時：2007/09/12 05:59

No.5 回答者： himajin100000 回答日時： 2007/08/14 10:16

</tr>

</body>　←ミスタイプ。bodyではなくtbody

この回答へのお礼

了解しました。
何度もありがとうございます。

お礼日時：2007/08/14 21:49

No.4 回答者： leap_day 回答日時： 2007/08/13 00:50

こんにちは

text-align:center;はその要素内でのテキストをセンタリングするので<table>の中に付けると<table>内だけに適用されます

<div>に付けるとセンタリングされるはずなのですが・・・
widthやfloat,positionなど使用してますか？
それだときちんとセンタリングされないかと思います

ページ全体でセンタリングするなら
body { text-align:center; }
（これだと他のコンテンツもセンタリングされます）

<div>にwidth指定して<table>だけに使用してるなら
div { margin:auto; }

<div>に何も指定していないなら
table { margin:auto; }

ID( #～ { } )、class( .～ { } )でやってもいいです

外部CSSですから
<link rel="stylesheet" href="./***.css" type="text/css">
でCSSファイルを読み込んでますよね？

この回答への補足

こんにちわ。
いつも回答ありがとうございます。
助かります。
ＣＳＳファイルは仰るとおりに読み込んでおります。

自分の調べたところによると、
全てのブラウザに対応させようとすると

<div style="text-algin:center;">
<table style="margin-right:auto;margin-left:auto;">
<tr style="text-align : left;"><td>あ</td><td>い</td></tr>
<tr style="text-align : left;"><td>う</td><td>え</td></tr>
</table>
</div>

のようにすればいいのかなと思ったんですがいかがでしょうか.
margin-right:auto;margin-left:auto　とする時は width　を指定
しないとダメですかね？？
というかwidthを使うタイミングがよくわからないんですが、、、

あと文字を左寄せするなら<tr style="text-align : left;">で
いいでしょうか？？

補足日時：2007/08/14 21:45

No.3 回答者： himajin100000 回答日時： 2007/08/12 23:24

追記:

http://www.mozilla.gr.jp/standards/webtips0004.h …

熟読すること。

この回答へのお礼

回答ありがとうございます。

この記事は非常に理解が進みました。
どうもありがとうございました。

お礼日時：2007/08/14 21:44

No.2 回答者： himajin100000 回答日時： 2007/08/12 22:20

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>Q3249894 テストケース1</title>
<style type="text/css">
table{
margin:auto;
}
table{
background-color:purple;
}
caption{
background-color:yellow;
width:50%;
margin:auto;
}
th{
text-align:center;
background-color:magenta;
}
td{
text-align:center;
background-color:pink;
}
</style>
</head>
<body>
<table>
<caption>都市の比較</caption>
<thead>
<th>都道府県名</th><th>種別</th>
</thead>
<tbody>
<tr>
<td>東京</td><td>都</td>
</tr>
<tr>
<td>京都</td><td>府</td>
</tr>
</body>
</table>
</body>
</html>

この回答への補足

回答ありがとうございます。

自分の調べたところによると、
全てのブラウザに対応させようとすると

<div style="text-algin:center;">
<table style="margin-right:auto;margin-left:auto;">
<tr style="text-align : left;"><td>あ</td><td>い</td></tr>
<tr style="text-align : left;"><td>う</td><td>え</td></tr>
</table>
</div>

のようにすればいいのかなと思ったんですがいかがでしょうか.
margin-right:auto;margin-left:auto　とする時は width　を指定
しないとダメですかね？？
あと文字を左寄せするなら<tr style="text-align : left;">で
いいでしょうか？？

補足日時：2007/08/14 21:41

No.1 回答者： noname#65286 回答日時： 2007/08/12 22:16

テーブル全体をページの横方向中央に表示するなら

div{text-align : center;}

テーブル全体が左寄せでセルの中身を中央に表示するなら
td{text-align : center;}

classやidでも同様に指定できます

この回答への補足

回答ありがとうございます。

自分の調べたところによると、
全てのブラウザに対応させようとすると

<div style="text-algin:center;">
<table style="margin-right:auto;margin-left:auto;>
<tr style="text-align : center;"><td>あ</td><td>い</td></tr>
<tr style="text-align : center;"><td>う</td><td>え</td></tr>
</table>
</div>

のようにすればいいのかなと思ったんですがいかがでしょうか？？

補足日時：2007/08/14 21:29

この回答へのお礼

あ、すいません。

<tr style="text-align : center;">
ではなく
<tr style="text-align : left;">
じゃないと文字が左寄せになりませんかね。
失礼しました。

お礼日時：2007/08/14 21:40