【 ＨＰ作成質問箱 】

【ＨＰ作成質問箱/詳細】　一覧 / 詳細

　 No.9311　テーブルをページの中心に置くには…？

[ダレイオス] [ブラウザ]　 07/06/03 (日) 15:47

初めまして。
テーブルをページの中心に置くにはどうすればよいのでしょうか？
今は左に寄ってしまっています。
タグは
http://heo.jp/tag/table/table_template.html
上のサイトのYahoo!JAPAN型を借りました。

▼

▼

▼

　 No.9312　Re:テーブルをページの中心に置くには…？

[atom] [ブラウザ]　 07/06/03 (日) 16:14

大きく2種類あると思います。
１つはテーブル自身を中央寄せで括ること。
もうひとつはテーブル自身の「align="center"」を使用すること。
です。

【サンプル1】
<div style="text-align: center;">
<table border="1" style="width: 200px; height: 100px;">
<tr><td>　</td></tr>
</table>
</div>

【サンプル2】
<table align="center" border="1" style="width: 200px; height: 100px;">
<tr><td>　</td></tr>
</table>


【サンプル1】

【サンプル2】

▼

▼

▼

　 No.9313　Re:テーブルをページの中心に置くには…？

[やままる] [ブラウザ]　 07/06/03 (日) 17:05

上のサンプル1では、テーブルは中央に配置されません。ブラウザによっては中央に配置してしまうものもあるようですが、text-align は、ブロック要素内のインライン要素の配置を決めるものですから、セルに入れた文字が中央寄せになることはあっても、テーブルそのものは中央寄せになりません。

参考となるURLをあげておきました。

▼

▼

▼

　 No.9314　Re^2:テーブルをページの中心に置くには…？

[やままる] [ブラウザ]　 07/06/03 (日) 17:11

追記です。

結局のところ、ブラウザによって解釈が異る（本当は、IEのバグ）ため、どのブラウザでも中央寄せにさせるためには、次のように書くといいでしょう。
<div style="text-align:center">
<table style="margin-left:auto;margin-right:auto">
<tr>
<td></td>
</tr>
</table>
</div>

▼

▼

▼

　 No.9315　Re:テーブルをページの中心に置くには…？

[ダレイオス] [ブラウザ]　 07/06/03 (日) 17:25

＞atom様、やままる様
ご丁寧にありがとうございますm(__)m
指示されたとおりにやってみたところ、無事に解決に至りました。
迅速な対応、ご丁寧な指示、本当にありがとうございました！m(__)m

▼

▼

▼

　 No.9316　Re^2:テーブルをページの中心に置くには…？

[atom] [ブラウザ]　 07/06/03 (日) 19:15

確かに、firefoxでは効果がありませんでした。(>_<)
指定の通り記述してサンプルを作っておきます。
ありがとうございました。

<div style="text-align:center">
<table style="margin-left:auto;margin-right:auto;width: 200px; height: 100px;background-color: #ccccff">
<tr>
<td>　</td>
</tr>
</table>
</div>

【表示サンプル】

▼

▼

▼

　一覧 / 詳細