テーブルの中央配置についての質問
- 質問者がテーブルの内容を中央揃えにしたいが、CSSの記述方法が正しくなくテーブルが揃わない状況にある。
- 質問者がテーブルの中央配置に関してCSSを使って記述しているが、正しく中央揃えされずにいる。
- 質問者がテーブルの中央配置について質問しており、CSSの記述方法が正しくないためテーブルが揃っていない。
- ベストアンサー
テーブルの中央配置
内容を中央揃えにしたく、以下のようにCSSで記述してみたのですが、テーブルが揃いません。どうすればよいのでしょうか？ <head> <style type="text/css" media="screen"><!-- body { background-color: #cecece; text-align: center; } --></style> </head> <html> <body> aaa <table width="64" border="1" cellspacing="2" cellpadding="0"> <tr> <td>bbb</td> </tr> </table> </body> </html>
- rootster
- お礼率75% (180/239)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
非常によく見かける質問ですね・・・ テーブルはインラインタイプのオブジェクトではないのでtext-alignでは センタリングされません。IE6などでセンタリングされるのはバグです。 テーブルをセンタリングするときにはwidthを指定して、marginを autoにするとよいでしょう。 <head> <style> body { background-color: #cecece; text-align: center; } table{ border:1px solid #000000; width:64px; margin:auto; } </style> </head> <body> aaa <table> <tr> <td>bbb</td> </tr> </table> </body>
関連するQ&A
- テーブルが二つ横に並んでしまう
タイトルの通りりです。 どうして横にならんでしまうのか、いまいち よくわかりません。 どなたか教えて頂けないでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML LANG="JA"> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="text/css"> <TITLE></TITLE> </HEAD> <STYLE TYPE="text/css"> <!-- BASEFONT { font-size: x-small; } BODY { background-image: url( top/back_line.gif ); background-repeat: repeat-y; margin-left: 30px; } --> </STYLE> <BODY BGCOLOR="#9900CC" TEXT="#FFCCFF" LINK="#FF66CC" ALINK="#66CCFF" VLINK="#000066"> <BASEFONT FACE="Verdana, ＭＳ Ｐゴシック, Osaka"> <!-- ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ --> <TABLE BORDER="3" CELLSPACING="3" CELLPADDING="3" ALIGN="LEFT" WIDTH="550"> <TR> <TD>aaa</TD><TD>bbb</TD> </TR> <TR> <TD>eed</TD><TD>sss</TD> </TR> </TABLE> <BR> <TABLE BORDER="3" CELLSPACING="3" CELLPADDING="3" ALIGN="LEFT" WIDTH="550"> <TR> <TD>aaa</TD><TD>bbb</TD> </TR> <TR> <TD>eed</TD><TD>sss</TD> </TR> </TABLE> <!-- ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ --> </BODY> </HTML>
- ベストアンサー
- HTML
- 入れ子にしたテーブルをheight100%にする
お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブルの一つのtdタグだけ、文字を小さく
テーブルの一つのtdタグだけ、文字を小さくしたい場合は、 この方法でいいのでしょうか？ <html> <head> <title></title> <STYLE type="text/css"> <!-- p { font-size: 20%; } '--> </STYLE> </head> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>普通</td><td>普通</td></tr> <tr><td>普通</td><td><p>test</p></td></tr> </table> </body> </html>
- ベストアンサー
- CSS
- スタイルシートでの中央揃え
<html> <head> <title>文書のタイトル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style> body{text-align: center;} </style> </head> <body> <table> <tr> <td> テーブルの内容 </td> </tr> <table> テーブル外の内容 </body> </html> のように、スタイルシートで、 body{text-align: center;} を指定したのですが、IE6ではtableが中央揃えされましたが、NN7.1やFirefox 1.5.0.7ではtableが中央揃えされませんでした。 centerタグを使えば問題ありませんでしたが、非推奨なのであまり使いたくありません。 スタイルシートを用いてIE6と同様にNNやFirefoxでtableを中央揃えするようにするにはどうすればいいでしょうか。
- ベストアンサー
- HTML
- コンテナ内で文字を中央に表示したい
<div> <table border=0 cellspacing=0 cellpadding=0 style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> Hello! </td> </tr> </table> </div> のように、テーブルを使わずに（できればCSSなどで）divタグ内のテキストを中央に表示したいのですが、できますか？ よろしくお願いします。
- ベストアンサー
- HTML
- CSSでテーブルを中央にする方法
CSSでテーブルを中央にする方法を教えてください いろいろなサイトで見た通りにしたのですが、どうしてもFirefoxではテーブルが中央によりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="description" content=""> <meta name="keywords" content=""> <title>テーブル</title> <style type="text/css"> <!-- .tableley { margin-left: auto; margin-right: auto; text-align: center; } //--> </style> </head> <body> <div class="tableley"> <table cellpadding="0" cellspacing="0" summary="テスト" border="1"> <caption style="font-weight: bolder;">てすと</caption> <tbody> <tr> <td>てすと1</td> <td>てすと2</td> <td>てすと3</td> <td>てすと4</td> </tr> <tr> <td>てすと5</td> </tr> </tbody> </table> </div> </body> </html> 何が悪いのでしょうか？ <div align="center">にするしか方法がないのでしょうか？ 文法検証すると<div align="center">はあまりよくない使い方と指摘されてしまいます よろしくお願いします。
- ベストアンサー
- HTML
- 文字を右寄りにしつつ、背景を赤にするには
css初心者です。 一番左のセルのみ、文字を右寄りにしつつ、背景を赤にしたいのですが、 全ての背景に色がついてしまいます。 １と１００のセルのみ、文字を右寄りにしつつ、背景を赤にするにはどうすればいいですか？ <html> <head> <title>test</title> <style type="text/css"> td.table_moji_right { text-align: right; } td { background-color: red; } </style> </head> <body> <table border=1 cellspacing=1> <tr><td class="table_moji_right">1</td><td>aaa</td></tr> <tr><td class="table_moji_right">100</td><td>iii</td></tr> </table> </body> </html>
- ベストアンサー
- HTML
- ●tableをCSSで書き直すには(HTMLソース付き)
いつも勉強させていただいております。 今回は質問をさせていただけないでしょうか。 上の表の枠のように少し立体感があるようにしたいと思います。 これを、CSSにしたいのですが、border-styleをいろいろ試しても同じようになりません。 どのようにすれば良いでしょうか？ <html> <STYLE TYPE="text/css"> <!-- .TTT { border-style:ridge; padding:0px; border-width:1px; } --> </STYLE> <body bgcolor="#FF88FF"> <table width="270" border="1" cellpadding="0" cellspacing="0" > <tr> <td>こんな感じにしたいです。</td> <td>BBB</td> </tr> </table> <br> <table style="width:270px;" class="TTT"> <tr class="TTT"> <td class="TTT">なぜか、こんな感じになってしまいます。</td> <td class="TTT">DDD</td> </tr> </table> <br> </body> </html>
- 締切済み
- HTML
- 一気に「テーブルの2列目のtdタグを右詰にする
<html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで 右側の2列目のtdタグを右詰にしたいのですが、 一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。
- ベストアンサー
- HTML
- cssでテーブルを中央配置にするには？
よろしくお願いします。 テーブルを中央配置にしたいのですが、 <center>、<div align="center">は、W3Cの非推奨タグであるため、代替方法として、<div style="text-align:center">を使用してみたのですが、うまくいきません。 <body> <div style="text-align:center"> <table> <tr> <td>あいうえお</td> </tr> </table> </div> </body> としたとき、WinXP IE6.xではテーブルが中央に配置されるのですが、WinXP Netscape 7.x では中央に配置されませんでした。どなたか解決策をご存知でしたらご教授願います。よろしくお願いします。
- ベストアンサー
- HTML
お礼
そうなんですね。うまく調べられなかったもので、失礼しました。ありがとうございました。