- ベストアンサー
テーブルの上下右側に文字列を表示したい
ORUKA1951の回答
- 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>
関連するQ&A
- テーブルの上下右側にテーブルの件数を表示したい
添付画像のように、テーブルの上下右側に、データの件数を表示したいと考えています。 テーブルの幅や列数はデータの内容によって変わります。 HTML・CSSをどのように記述すれば上記を実現できるでしょうか。 試行錯誤しているのですがうまくいきません。 どなたかお知恵をお貸しください！
- 締切済み
- HTML
- テーブルの位置について
3列以上のテーブルの位置についてお伺いします。 以下をxhtml,cssで実現するにはどのように指定すればよいのでしょうか？ ・テーブルの最終列は画面上の一番右に寄せる ・最終列以外の列が、画面の中央にくるようにする （各列の幅を吟味して、位置を自動調整させたいです） どうかお願いいたします。
- ベストアンサー
- HTML
- 幅の違うテーブルを作りたい
異なる幅の組み合わさったテーブルを作りたいと思っています。 <例>こんな感じ（イメージできますか？） --------------- | | | ------------------------ | | | ------------------------ | | | ------------------- 試行錯誤で作ってますが、できません。。。 どなたかよろしければ どのように作ればいいのか教えてください。
- ベストアンサー
- HTML
- このテーブルをCSSで書くとどうなりますか？
画像を参照願えますでしょうか。 左側100pxの右側は400pxで合計幅500pxあります。 （右側1行左側3行です。） これをテーブルレイアウトではなく、divとcssで書くとどんなhtmlになりますか？ 現在段組を色々やってますが、自問自答してもこのパターンだけが解決できないので・・・ 同じようにＨＴＭＬに興味ある方や詳しい方がいらっしゃいましたらご教授願います。 お答えの際にはＨＴＭＬソースを希望します。
- ベストアンサー
- HTML
- テーブルで列の幅を指定する
HTMLタグでWEBサイトを作成していますが、テーブルの幅を指定しても実際ページを開けると、同じ数値入れても同じ幅にならなかったり、全ての幅指定してもその通りになりません。またウィンドウを大きくしたり小さくしたりすると、特定の列のみ幅が狭くなったり広くなったりします。どうすれば幅を指定した数値どおりに固定できますでしょうか。
- ベストアンサー
- HTML
- ＳＱＬＳｅｒｖｅｒ２００５の列数
ＳＱＬＳｅｒｖｅｒ２００５の最大列数を調べていたのですが、 ・幅の狭いテーブルごとの列数：１０２４ ・幅の広いテーブルごとの列数：３００００ と、２つの記述がありました。「幅の広い／狭い」と非常に曖昧な表現に思えてわかり難いのですが、どういう違いがあるのでしょうか？
- ベストアンサー
- SQL Server
- CSSでテーブルを表示させるには
CSSでテーブルを表示させたいのですが、やり方が分かりません。教えてください。 現在は、HTMLで以下のように記述しています。 -------------------------------------------------------- <table border="0" width="100%" cellspacing="0" cellpadding="2"> <tr> <td bgcolor="#000000">テキスト</td> </tr> </table> -------------------------------------------------------- 具体的には、クラスを指定して、<div class="table">テキスト</div> と記述したときにテーブルを表示させたいです。 回答よろしくお願いします。
- ベストアンサー
- CSS
- 2つのテーブルを左右に表示したい。
2つのテーブルは列、幅の数が異なります。 ちょうど下記のような感じで表示したいのですが、 どのようにすればよいでしょうか。 単純にテーブルを２つ記述するとくっついてしまいます。 ■■■ ■■ ■■■ ■■ ■■■ レイヤー？とかいうものを使う方法もあるようなのですが、 ちょっと説明をみてもよく分かりませんでした。 ２つを別々のテーブルではなく、１つのテーブルにしてできないかと思ったのですが、枠線が 上のようにならなくて断念しました。 いくつかの画面を作成しているのですが、思ったとおりに表示できなくて悪戦苦闘しています。 アドバイス頂けると助かります。
- ベストアンサー
- HTML
- テーブルをウィンドウのセンターに
700px*400pxぐらいのテーブルを、ウィンドウの大きさにかかわらず上下左右ともにセンターに配置するには、どのようなコードを書けばいいのでしょうか？ 左右はセンター配置になるのですが上下が。。。 できればHTMLでお願いします。m(_ _)m また、テーブルの位置（上下左右センター）をCSSで指定できるのでしょうか？ よろしくお願いしマス。
- ベストアンサー
- HTML
- テーブル内の画像を横並べにしたい
HTMLテーブルの学習中の初心者です、よろしくお願いいたします。 テーブル内に画像を配置すると縦並びになってしまいます。 これを横並びにしたいのですが、（添付画像参照ください） 同じテーブルの上段には既に列を分けてある1行目があります。 問題の2行目、列を分けてそれぞれのセルに画像を当て横幅を指定 という方法ですと上段の横幅に揃ってしまうのか、幅が大きく広がり過ぎてしまいうまくいきません。 テーブル以外にも方法はあるようなのですが 現在テーブルの学習をしているためテーブルでのやり方を調べています。 初心者ですので解りやすいもっともシンプルなやり方ございましたら ぜひご指導お願いいたします。
- 締切済み
- HTML
お礼
>ですね。 ご指摘ありがとうございます。 質問がわかりづらいと思い、安易に閉じてしまいましたが、 思慮が足りなかったようです。 以後気をつけます。