締切済み

HTML？スタイルシートの表センタリングについて

2008/05/23 18:07

以下のSampleでやってみましたが、うまくセンタリングできません。表をPageの真ん中に置いてかつ、表の中のセル内、文字列は左によせるにはどうしたらよいのでしょうか？またこのような作業、確認は皆さんどうやって書いているのですか？ホームページビルダーでしょうか？常に表には苦労しています、今までは<CENTER>を使っていました。キレイなHTMLを勉強しようとしているのですが非常に難しいですね。よい方法ないでしょうか？スタイルシート部分： <style type="text/css"> div.ctable { text-align: center; /* IEでセンタリングさせる方法 */ } div.ctable table { margin: auto; /* 標準のセンタリング方法 */ text-align: left; /* IE用方法の弊害対策用 */ } </style> HTML部分： <div class="ctable"> <table> <tr><th>スタイルシート</th><th>センタリング</th></tr> <tr><td>CSS</td><td>Centering</td></tr> </table> </div>

compito
お礼率35% (5/14)

その他([技術者向] コンピューター)
回答数3
ありがとう数2

みんなの回答 （3）
専門家の回答

みんなの回答

Muller3
ベストアンサー率81% (800/979)

2008/05/23 23:46 回答No.3

bodyタグやheadタグは、省略されたんでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>test</title> <style type="text/css"> body { text-align: center; /* IEでセンタリングさせる方法 */ } .ctable { margin: 0 auto; /* 標準のセンタリング方法 */ text-align: left; /* IE用方法の弊害対策用 */ width:500px; /* 仮の幅 */ background-color:#666666;　/* 範囲がわかりやすいように仮の色 */ } </style> </head> <body> <table class="ctable"> <tr><th>スタイルシート</th><th>センタリング</th></tr> <tr><td>CSS</td><td>Centering</td></tr> </table> </body> </html> 上記はすみませんがXHTMLです。このままindex.htmに貼り付けてみてください。（文字コードはUTF-8になってます。xml宣言入れなくて済むので）表がセンタリング＆表の文字が左寄せになりませんか？外部スタイルシートにするときは、「headタグ内に」linkタグで入れます。そして、 <style type="text/css">　と　</style> は不要です。参考までに、あるサイトのCSSです。 http://www.sixapart.jp/common/styles/movabletype.css ＞このような作業、確認は皆さんどうやって書いているのですか？ソフトは使いません。テキストエディタでやってます。

Muller3
ベストアンサー率81% (800/979)

2008/05/23 20:26 回答No.2

IEのセンタリング対策は普通、 body要素にtext-align: centerですよ。でもってコンテンツ部分のブロック要素に margin: 0 auto; text-align: left; を入れていきます。

質問者

お礼 2008/05/23 21:45

根本的な知識が不足しているようです。まだうまくいっていません。とにかくありがとうございます。もう少し勉強してみます。

ranuwe
ベストアンサー率33% (7/21)

2008/05/23 18:55 回答No.1

質問者

お礼 2008/05/23 21:44

ありがとうございました。しかしうまくいかないのです。アホですか？ 2つのファイルを同じフォルダに置き試したのですが。。 -index.htm------ <title>test</title> <link href="style.css" rel="stylesheet" type="text/css"> <div id="ctable"> <table> <tr><th>スタイルシート</th><th>センタリング</th></tr> <tr><td>CSS</td><td>Centering</td></tr> </table> </div> ---------------- -style.css------ <style type="text/css"> #ctable { text-align:center; } #ctable td{ text-align:left; } #ctable th{ text-align:left; } </style> ----------------