- ベストアンサー
テーブルの上下右側に文字列を表示したい
添付画像のように、テーブルの上下右側に、文字列を表示したいと考えています。 テーブルの幅や列数はデータの内容によって変わります。 HTML・CSSをどのように記述すれば上記を実現できるでしょうか。 ※単に右寄せにすると、テーブルの右端ではなく画面の右端になります。 試行錯誤しているのですがうまくいきません。 どなたかお知恵をお貸しください！
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートを少しだけ書き直しておきました。 ★tableをデザインのために使うのは、強く非推奨ですのでスタイルシートで行っています。 ⇒14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) ⇒11.1 表の概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) ★HTML5ではなくなるのが決まっている非推奨属性(align,cellspacing,cellpadding)も使っていません。 ★counterを使用するとデータ量が増減しても、正しく表示してくれます。 <thead></thead>は行数が増えても印刷時に、各ページに印刷されます。 <tbody>とsummary属性はHTML4.01では必須ですから、それを使っています。 使わなくても出来ます。 body{counter-reset: tableline;} table[summary="test"]{ width:70%; margin:0 auto; position:relative;margin-bottom:20px; border-collapse:collapse; line-height:2em; } table[summary="test"] caption{text-align:right;} table[summary="test"] tbody th{＿counter-increment: tableline 1;} table[summary="test"] tbody th+td{text-align:right;} table[summary="test"] td,table[summary="test"] th{ border:solid balack 1px; } table[summary="test"]:after{ ＿content: "データ件数"counter(tableline) "件"; ＿position:absolute;bottom:-30px;right:0; ＿color:red; } table[summary="test"]:before{ ＿content: "データ件数5件"; ＿position:absolute;top:-20px;right:0; ＿color:green; }
補足
回答ありがとうございます。 教えていただいたサイトを確認していますが、 ボリュームが大きいので時間をかけて理解したいと思います。 また、記載頂いたHTMLでテーブルの上下右側に表示が出来ました。 ありがとうございます。 ただ、後出しで申し訳ないのですが、HTMLタグを含んだコンテンツを 表示する方法は有りますでしょうか。 具体的には、<A>タグをつけてそこからリンクできるようにしたいです。 ご回答いただけると嬉しいです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
CSS2.1には、内容の追加:contentとcounterという仕組みが用意されています。 それを使えば、HTMLがちゃんと書かれていれば、データ行数をカウントして記述するとかも出来ます。 ＞もしかして差し替え前の質問、締めきっちゃったのがまずかったですか？ ですね。javascriptも不要です。 ⇒12 生成内容、自動番号付け、およびリスト( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/generate.html ) ⇒9.3 位置決め方式( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visuren.html#positioning-scheme ) ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) で検証済みのHTML4.01strict+CSS2.1 ★タブは＿に置換してあるので戻す。 <!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 name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- body{counter-reset: tableline;} table[summary="test"]{position:relative;margin-bottom:20px;} table[summary="test"] caption{text-align:right;} table[summary="test"] tbody th{＿counter-increment: tableline 1;} table[summary="test"]:after{ ＿content: "データ件数"counter(tableline) "件"; ＿position:absolute;bottom:-20px;right:0; ＿color:red; } table[summary="test"]:before{ ＿content: "データ件数5件"; ＿position:absolute;top:-20px;right:0; ＿color:green; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<table border="1" summary="test" class="データ数5件"> ＿＿＿<caption>キャプション</caption> ＿＿＿<thead> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="param">パラメーター</th><th abbr="price">価格</th><th abbr="説明">説明</th> ＿＿＿＿</tr> ＿＿＿</thead> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="param1">パラメータ</th><td>1,200-</td><td>説明</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="param2">パラメータ</th><td>1,400-</td><td>説明</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="param3">パラメータ</th><td>1,600-</td><td>説明</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="param4">パラメータ</th><td>1,800-</td><td>説明</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="param5">パラメータ</th><td>2,000-</td><td>説明</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
お礼
>ですね。 ご指摘ありがとうございます。 質問がわかりづらいと思い、安易に閉じてしまいましたが、 思慮が足りなかったようです。 以後気をつけます。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
文字列だろうが行数だろうが表示できますよ。
お礼
回答有難うございます。 もしかして差し替え前の質問、締めきっちゃったのがまずかったですか？ 改善していきたいので教えていただけると嬉しいです。
- chie65536（@chie65535）
- ベストアンサー率44% (8840/20040)
全体を「枠線なし、セル囲いなし」のテーブルにして、テーブルを入れ子にします。 外側のテーブルの１行目のセルに「○○件」と表示して、配置を「右揃え」にします。 外側のテーブルの２行目のセルの中に「子テーブル」を記述します。 外側のテーブルの１行目のセルに「○○件」と表示して、配置を「右揃え」にします。 例 <table border=0 cellspacing=0 cellpadding=0> <tr> <td align="right">○○件</td> </tr> <tr> <td> <table border=1 cellspacing=1 cellpadding=3> （略） </table> </td> </tr> <tr> <td align="right">○○件</td> </tr> </table> こういう場合は「見えないテーブル」を作るのが定石です。
お礼
回答有難うございます！ 教えていただいた方法で、無事希望のレイアウトに配置することが出来ました。 ありがとうございました！！
お礼
改めまして、回答ありがとうございました。 無事希望の内容にて実装することが出来ました。 教えていただいたURLは今読み込んでいますが、なかなか奥が深いですね。 font-sizeが120%の中の10pxのテキストは12pxになるとか、理解していないことが色々有りました。
補足
詳しい解説ありがとうございます！ 今確認できる環境にないので、確認後改めてお礼いたします。