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">はあまりよくない使い方と指摘されてしまいます
よろしくお願いします。
No.2ベストアンサー
- 回答日時:
<style type="text/css">
<!--
.tableley {
text-align: center;
}
.tableley table{
margin-left: auto;
margin-right: auto;
}
.tableley caption{
margin-left: auto;
margin-right: auto;
}
//-->
と記述すれば、table、captionともにセンタリングされます。
余談ですが、
.tableley caption{
margin-left: auto;
margin-right: auto;
font-weight: bold;
}
と記述すれば、
<caption>てすと</caption>
と「style="font-weight: bolder;"」を消してもcaptionが太字になります。
ここら辺は好みですが…
No.1
- 回答日時:
おそらく間違えて覚えちゃったんでしょうね・・・
テーブルをかこうdivにtext-align:centerするのはIEのバグを利用した方法
ですので、あっていますが、マージンをオートにするのは「テーブル」に
対してです。
.tableley {
text-align: center;
}
.tableley table{
margin-left: auto;
margin-right: auto;
}
回答ありがとうございました。
なんとなく上手くは行ったのですが、今度は指示どうりにやると
<caption style="font-weight: bolder;">てすと</caption>
この部分が微妙に真中ではなくなってしまうんですよね
table部分は真中なんでが・・
IEの場合は正常に表示されています
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
HTMLのテーブルでそれぞれの大...
-
divで囲んだ文字が消える
-
Firefoxを使ってるのですがズー...
-
<img>タグにCSSのclass設定可能?
-
Tableタグ内のspan styleが適応...
-
XHTMLに関する質問 順序が逆に...
-
Dreamweaver デザインビューの...
-
Tableタグで作成した表の縮小
-
vbscriptで時計を作りたい
-
文字の行の高さ
-
テーブル内の画像に文章を回り...
-
テーブルタグの横のスペース
-
タグの記述について教えて下さい!
-
td要素内のdiv要素をセンタリン...
-
テーブルタグの中にdivを含めて...
-
テーブルの位置を細かく指定し...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
formのinputなどの幅100%指定
-
divで囲んだ文字が消える
-
td要素内のdiv要素をセンタリン...
-
XHTMLに関する質問 順序が逆に...
-
テーブル内のテーブルの高さを...
-
td width="180" と固定してるの...
-
Tableタグで作成した表の縮小
-
Tableタグ内のspan styleが適応...
-
cssで、テーブルのtdの中の文字...
-
table内の画像を中央寄せ、のせ...
-
<img>タグにCSSのclass設定可能?
-
Firefoxを使ってるのですがズー...
-
表とリスト(ulとtable)の違い...
-
trとtrの間
-
同じwidth=200でもセル内の文字...
-
リストの記号を括弧付きの文字...
おすすめ情報