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

質問

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

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

回答No.4

ORUKA1951

スタイルシートを少しだけ書き直しておきました。
★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>タグをつけてそこからリンクできるようにしたいです。
ご回答いただけると嬉しいです。