- ベストアンサー
テーブル上部に「見出し（タイトル）」を配置し、その文頭を、テーブル枠左端に合わせたい。
テーブルタグで表を作りまして、 その上に、表のタイトルを付けたいと思っています。 そのタイトルの文頭を、その表の枠左端に合わせたい（左揃え）したいのですが、 どうやったら上手くいきますでしょうか。 なお、表は中央配置してあります。（←ここがネックかと。） どなたかよろしくお願い致します。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
もう必要ないでしょうが#4です. 補足ありがとうございます. #6のORUKA1951様が仰っているとおり, captionにはブロックレベル要素を内包できません. 私のミスです. ああでも, 幅の継承はブラウザの実装によりますし, captionの左マージンが0になることも規定されてないから指定が必要です. これだけじゃなんですから, もうちょっと書きます. #5のお礼欄より > 実際には、 > table.priceList caption{align="top" text-align:left;} > こうすべきなのでしょうか？ こんな感じかな... table.priceList caption { display: table-caption; /* デフォルト値のまま, 省略可能 */ caption-side: top; /* キャプションをテーブルの上方に配置 */ text-align: left; margin-left: 0; padding-left: 0; width: 100%; /* inheritの方が妥当かもしれない */ }
その他の回答 (6)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
間違われたらまずいので補足、 caption要素内にはインライン要素しか入らないので、(hnのようなブロック要素は入らない)、そしてtable幅に追随するので、text-align:leftだけでOK、デフォルトでpaddingを持つブラウザがあるようなら、padding-left:0px;でも書いておけばＯＫ 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから <!ELEMENT CAPTION - - (%inline;)* -- table caption --> ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#edef-CAPTION )］より
お礼
補足をどうもありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞複数箇所で同じスタイルを適用したい場合、 という希望があるなら、tab;eそのもののclassが適切ですから、 <table class="priceList"> <caption>キャプション</caption> として、CSSで、 table.priceList caption{text-align:left;} とするべきです。 captionは、tableにひとつしか存在し得ないので 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから CAPTION要素は、TABLE要素の開始タグ直後にのみ存在し得る。 1つの TABLE要素は、1つのCAPTION要素しか包含できない。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#edef-CAPTION )］より captionにclass属性は不要です。tab;eの種類によってcaptionの配置を決めるので、tableの種類をclassで決めるほうが便利です。 そうすることで、このclassに所属するtableの、thは赤色テキストにするなら table.priceList tbody tr th{ color:red;} /* 詳細度 1+10+1+1+1=14 */ で良いですね。classとかidはできるだけ上の階層につけると、ソースもシンプルになる。 なお、table.priceList caption で詳細度は 1 + 10 + 1 = 12となります。
お礼
＞table.priceList caption{text-align:left;} ＞とするべきです。 ＞captionにclass属性は不要です。 ＞tab;eの種類によってcaptionの配置を決めるので、tableの種類をclassで決めるほうが便利です。 確かに、その通りですね。 その考え方（tableタグにクラス指定する方法）で対処したいと思います。 ただ、 table.priceList caption{text-align:left;} ですと、 キャプション位置を表の左端にはできますが、 「表の上に」という指定が入っていないように思います。 実際には、 table.priceList caption{align="top" text-align:left;} こうすべきなのでしょうか？ ちなみに現在、 <caption align="top" style ="text-align:left;"> ■表のタイトルです。 </caption> の方法で上手くいっています。 これを、外部スタイルシートでの対応にしようとしているところです。 またよろしければ教えてください。
- mazimekko3
- ベストアンサー率38% (74/194)
#1ですが, 解決したようで何より. #1で受けたお礼というか質問ですが... caption内に見出し(h1~h6)があるつもりで書いたんです. captionのdisplay値はデフォルトでtable-captionで, ボックスとして処理されるから左マージンを0にしておくことが必要だと書いたの. そうしないとtext-alignの指定がなんであれサイドマージンはautoになってブロックレベル単位でセンタリング表示されるのが正しい処理だから. (text-alignの指定も必要だけど, それは内にある見出しh1~h6のほうで解決してるものだと勝手に判断してたから.)
お礼
すみません、説明されている内容がよくわかりませんでした。 ＞caption内に見出し(h1~h6)があるつもりで書いたんです. <caption><h1>大見出しです。</h1></caption> という書き方を想定されていた、という事でしょうか。 <h1>～<h6>要素はブロック要素でありますが、 <caption>タグの中に入れても良いのでしょうか？ 回答No.6の方の回答を引用すると、 「caption要素内にはインライン要素しか入らないので」 とあります。 念のため、お知らせしておきます。 （ただ、問題自体は解決しております。） わざわざ補足をして頂き、ありがとうございました。
- write_draw
- ベストアンサー率30% (11/36)
表が１つの場合は <caption style="text-align:left">table title</caption> でいいと思いますが、たくさんある場合は <style type="text/css"> .pos1 {text-align:left;} </style> として <caption class="pos1">table title</caption> とすると良いと思います。
お礼
複数箇所で同じスタイルを適用したい場合、 そのスタイルをclassとしてつくり、 それを全ての箇所で適用すればよい、というアドバイスですね。 どうもありがとうございます。 そうしようと考えています☆
- ORUKA1951
- ベストアンサー率45% (5062/11036)
テーブルのタイトルはキャプションですから、単純にcaptionにtext-align:centerを指定すればよいです。 以下はサンプル(HTML4.01strict-厳密型)です。 【注意】見やすくするためタブを全角スペースで置換してあります。テストするときは全角スペースをタブ(\t)に置換してください。 なお、念のためAnother HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )でチェック済みです。 ☆ウィンドウの70%幅で中央配置にしてあります。 どのような幅のウィンドウで見ても70%で最低でも250pxより小さくならないように指定。 ブラウザウィンドを小さくしてチェックすること ☆キャプションの書式はデフォルトのまま ☆それ以外は、よく見て自由に変更すること。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="MADE" HREF="mailto:hoge@hoge.com"> <style type="text/css"> <!-- table{ width: 70%; min-width: 250px; margin-right: auto; margin-left:auto; border-collapse:collapse; border: 2px solid red; } caption{ text-align:left; } th,td{ border: solid 1px blue; } --> </style> <link rel="START" href="../index.html"> </head> <body> <h1>サンプル</h1> <table summary="表タイトルの表示"> <caption>この表のタイトル</caption> <tbody> <tr> <th abbr="見出し1">見出し</th><th abbr="見出し2">見出し</th><th abbr="見出し3">見出し</th> </tr> <tr> <td>セル</td><td>セル</td><td>セル</td> </tr> <tr> <td>セル</td><td>セル</td><td>セル</td> </tr> <tr> <td>セル</td><td>セル</td><td>セル</td> </tr> </tbody> </table> </body> </html>
お礼
しばらくの間、本回答がこのサイトの検閲対象になっていたため、 確認できずにいましたが、 今、確認し、それをもとに試してみたところ、 キャプションタグに対し「text-align:left」をすることにより、 見事、上手くいきました。（2010/01/14 23:20現在） どうもありがとうございました！ 助かります！
- mazimekko3
- ベストアンサー率38% (74/194)
caption の左マージンを０にしてその中に見出し入れるとか
お礼
回答をありがとうございます。 早速ですが、 <caption align="top" style ="margin-left:0; padding:0;"> ■表のタイトル </caption> のようにやってみましたが、ダメでした。 どこかに間違いはありますでしょうか。 captionタグで、タイトルをテーブル上部に配置する場合、 それを左端に持って行くことは、CSSで可能なのでしょうか。 ちなみに、 教えて頂いた方法は、実際に過去にやられ、 できることが確認済みのものでしょうか。 もし確認済みということであれば、 私のやり方のどこかに間違いがあるということになりますね。
お礼
反応が遅くなり、申し訳ございません。 試して結果をお知らせすることを、ずっとできずにおりました。 で、今、試してみましたところ、 希望のスタイルをCSSで設定することができました。 おかげで助かりました。 また分からないことがありましたら、その時にも色々と教えて下さい。