スタイルシート

質問

#Area_Login table .tbl {
margin-left: auto;
margin-right: auto;
border: solid 1px #FFFFFF;
background-color: #000000;
}

#Area_Login table .tbl th {
text-align: center;
font-size: 12pt;
background-color: #AFB4DB;
height: 15px;
}

#Area_Login table .tbl td {
text-align: center;
font-size: 11pt;
background-color: #AFB4DB;
border: solid 1px #FFFFFF;
}

<div id="Area_Login">
<table class="tbl">
<tr>
<th><th>
<tr>
<td></td>
</tr>
</table>
</dib>

上記ソースなのですが、テーブルが中央に配置されなくて困っています。

どなたか教えていただけませんか？

回答No.2

ORUKA1951

スタイルシート間違えてました。気がつきにくい部分で、Vaidator通せばすぐ分かったのですが、急がれていたのでチェックせずに回答してしまいました．
W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input )

#LoginForm{
border-collapse:collapse;
width:auto;
margin:0 auto;
color:white;
line-height: 15px;
}
#LoginForm th,#LoginForm td{/* 同じ指定を複数化かないためグループ化 */
text-align: center;
background-color: #AFB4DB;
}
#LoginForm th{font-size:12px;}
#LoginForm td{font-size:11px;}

★font-size:が抜けてました。

回答No.1

ORUKA1951

tableの幅を決めてなきゃどこに置くかわからない。
<table summary="LoginForm" id="LoginForm">
＿＿<tbody>
＿＿＿＿<tr>
＿＿＿＿＿＿<th>ユーザーID<th>
＿＿＿＿＿＿<td><input type="text" size="10" name="username"></td>
＿＿＿＿＿＿<th>パスワード<th>
＿＿＿＿＿＿<td><input type="password" size="10" name="PWD"></td>
＿＿＿＿</tr>
＿＿</tbody>
</table>

#LoginForm{
border-collapse:collapse;
width:auto;
margin:0 auto;
color:white;
line-height: 15px;
}
#LoginForm th,#LoginForm td{
text-align: center;
background-color: #AFB4DB;
}
#LoginForm th{12px;}
#LoginForm td{11px;}

★一箇所しかないので一意セレクタだけでよい。
★結合モデルなのでborder-collapse:collapse;
★tableにはsummary属性は必須
★tableには最低ひとつのtbodyが必須

お礼

ありがとうございました。