プロが教えるわが家の防犯対策術！

テーブルの上下右側に文字列を表示したい

解決済

  • 質問者：darter
  • 質問日時：
  • 回答数：5件

添付画像のように、テーブルの上下右側に、文字列を表示したいと考えています。
テーブルの幅や列数はデータの内容によって変わります。
HTML・CSSをどのように記述すれば上記を実現できるでしょうか。

※単に右寄せにすると、テーブルの右端ではなく画面の右端になります。
試行錯誤しているのですがうまくいきません。
どなたかお知恵をお貸しください！

「テーブルの上下右側に文字列を表示したい」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.1

  • 回答者： chie65535
  • 回答日時：

全体を「枠線なし、セル囲いなし」のテーブルにして、テーブルを入れ子にします。



外側のテーブルの１行目のセルに「○○件」と表示して、配置を「右揃え」にします。

外側のテーブルの２行目のセルの中に「子テーブル」を記述します。

外側のテーブルの１行目のセルに「○○件」と表示して、配置を「右揃え」にします。

例

<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>

こういう場合は「見えないテーブル」を作るのが定石です。
    • good
    • 0
    • 件
通報する
この回答へのお礼

回答有難うございます！

教えていただいた方法で、無事希望のレイアウトに配置することが出来ました。
ありがとうございました！！

通報する
お礼日時：2013/10/02 13:08

No.2

  • 回答者： ORUKA1951
  • 回答日時：

文字列だろうが行数だろうが表示できますよ。

    • good
    • 0
    • 件
通報する
この回答へのお礼

回答有難うございます。

もしかして差し替え前の質問、締めきっちゃったのがまずかったですか？
改善していきたいので教えていただけると嬉しいです。

通報する
お礼日時：2013/10/02 13:11

No.3

  • 回答者： ORUKA1951
  • 回答日時：

CSS2.1には、内容の追加:contentとcounterという仕組みが用意されています。


それを使えば、HTMLがちゃんと書かれていれば、データ行数をカウントして記述するとかも出来ます。
＞もしかして差し替え前の質問、締めきっちゃったのがまずかったですか？
　ですね。javascriptも不要です。
　⇒12 生成内容、自動番号付け、およびリスト( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　⇒9.3 位置決め方式( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

★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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

>ですね。
ご指摘ありがとうございます。
質問がわかりづらいと思い、安易に閉じてしまいましたが、
思慮が足りなかったようです。
以後気をつけます。

通報する
お礼日時：2013/10/02 17:06

No.4

  • 回答者： ORUKA1951
  • 回答日時：

スタイルシートを少しだけ書き直しておきました。


★tableをデザインのために使うのは、強く非推奨ですのでスタイルシートで行っています。
　⇒14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　⇒11.1 表の概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★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>タグをつけてそこからリンクできるようにしたいです。
ご回答いただけると嬉しいです。

補足日時：2013/10/02 17:22
通報する
    • good
    • 0
    • 件
通報する

No.5ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞後出しで申し訳ないのですが、HTMLタグを含んだコンテンツを表示する方法は有りますでしょうか。


＞具体的には、<A>タグをつけてそこからリンクできるようにしたいです。
の二つは異なりますよ。
【説明】
　　contentは内容の追加をするプロパティです。
　{用語説明]
　　　<h1>見出し</h1>
　　　　<h1>～</h1>までを要素(Element)と言います。heading(見出し(レベル１))要素です。
　　　　"見出し"が内容です。
　　　　<img src="" width="" height="" alt="">要素には内容がありませんからcontentは使えません。

　このことから、リンクを表示したい場合は、すでにリンク（href属性をもつ）A要素がないと方法がありません。逆に言うと、それがあると可能です。

table要素には、
必須のtbodyと
thead,tfoot,caption要素を持つことが出来ます。前例のようにcaption要素を使用するのも良いですがcaptionには条件があります。
　tableの開始要素の直後でなければならない!ことと一つしか書けない。
『CAPTION要素は、TABLE要素の開始タグ直後にのみ存在し得る。 1つの TABLE要素は、1つのCAPTION要素しか包含できない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

　この制約から、カウンターの増加処理後に内容を追加することは出来ません。
　　多くのブラウザは、captionがtbodyのあとなど、他の場所に現れても処理はしてくれます。---バグと言うより、エラーを吸収する---
　　のですが、これに期待するのは好ましくないので、ここはthead,tfoot要素を使うのが最善でしょう。
　　　仕様上は(注)tfoot(theadも)本来はtbodyより前に書くべきです。が、すべての標準ブラウザは前に表示してくれます。

1) 必ずtbodyの前後に表示される。
2) 行数が増えて、印刷時に複数にまたがる場合も、何もしなくても各ページに表示される。
　と言う利点があります。
　　　行数を大きく増やして確認してください。印刷プレビューも面白いです。

★HTML\lintだとtheadの位置について指摘が入りますが、それ以外はＯＫです。
★行数が増えても、カウントして表示してくれるはずです。
★HTMLは、メンテナンスを考慮して極力シンプルにしてあります。
★スタイルシートは、セレクタの書き方やカスケーディングは、最も重要な部分ですから自習してください。
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　プロパティなんかより、はるかに重要な部分です。これをマスターしないと下記ソースは意味不明かもしれません。

<!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: tableline2;}
table[summary="test2"]{
width:70%;
position:relative;
margin:20px auto;
border-collapse:collapse;
line-height:2em;
border:none;
}
table[summary="test2"] tbody th,table[summary="test2"] tbody td{
padding:0.5em 1em;
}
table[summary="test2"] thead td,
table[summary="test2"] tfoot td{border:none;}
table[summary="test2"] thead tr+tr th{
border:solid 1px black;
text-align:center;
}
table[summary="test2"] tbody td,
table[summary="test2"] tbody th{
border:solid 1px black;
}

table[summary="test2"] thead td,
table[summary="test2"] tfoot td{
text-align:right;
}
table[summary="test2"] tbody tr{counter-increment: tableline2 1;}
table[summary="test2"] thead td a:after,
table[summary="test2"] tfoot td a:after{
content:counter(tableline2) "件";
}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<table border="1" summary="test2">
＿＿＿<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="param4">パラメータ</th><td>1,800-</td><td>説明</td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="param5">パラメータ</th><td>2,000-</td><td>説明</td>
＿＿＿＿</tr>
＿＿＿</tbody>
＿＿＿<tfoot>
＿＿＿＿<tr>
＿＿＿＿＿<td colspan="3"><a href="./">表示件数</a></td>
＿＿＿＿</tr>
＿＿＿</tfoot>
＿＿＿<thead>
＿＿＿＿<tr>
＿＿＿＿＿<td colspan="3"><a href="./">表示件数</a></td>
＿＿＿＿</tr>
＿＿＿＿<tr>
＿＿＿＿＿<th abbr="param">パラメーター</th><th abbr="price">価格</th><th abbr="説明">説明</th>
＿＿＿＿</tr>
＿＿＿</thead>
＿＿</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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

この回答への補足

詳しい解説ありがとうございます！
今確認できる環境にないので、確認後改めてお礼いたします。

補足日時：2013/10/02 22:10
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

改めまして、回答ありがとうございました。

無事希望の内容にて実装することが出来ました。

教えていただいたURLは今読み込んでいますが、なかなか奥が深いですね。
font-sizeが120%の中の10pxのテキストは12pxになるとか、理解していないことが色々有りました。

通報する
お礼日時：2013/10/03 15:22

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報