xhtmlでのtableのセル(td)等について

2023/09/06 00:49

このQ&Aのポイント

xhtmlでのtableのセル(td)等についての質問です。tableの表示が正しくできないため、アドバイスをお願いします。
html4.01からxhtmlに更新しようとしていますが、tableの表示に問題があります。予約のスケジュール一覧を表示する際に、隙間ができてしまいます。
xhtml1.0に変更する際に、tdにborderの記述が必要になるのか疑問です。また、cellspacingとcellpaddingをゼロに設定しても、両端に隙間ができてしまいます。DOCTYPEの宣言も変更が必要なのか迷っています。アドバイスをお願いします。

ベストアンサー

xhtmlでのtableのセル(td)等について

2014/07/18 12:34

お世話になります、 cgiアプリでシステムを構築しているものです。 html4.01 からxhtmlに更新しようと、画面のプロトタイプをリメークしているのですが tableの表示のところが理解不足のようで、どうしても隙間ができてしまい、正しく表示することができません。アドバイスをお願いいたします！ tableの用途も悪いのでしょうが、他の方法が考えつかなかったため他の方法で実現できるのであれば、変更しても良いかとも思っています。表示内容は、（想定としまして）部屋などの分単位の予約のスケジュール一覧です。 1分単位で予約されている内容を例えば5部屋分を1週間分、表示します。 html4.01では table(border有り)の1行を、1440ピクセル（60分×24時間）の幅のtdと想定し、（先頭tdで日にちなど表示）予約が120分であれば、colspanを120に、予約がなければ、colspanを1440にしたりして、それぞれ予約毎に、tdの背景色を設定して、一週間分の予約一覧を表示しています。これをxhtml1.0に変更しようとしているのですが、まず、 tabelタグに記述のborder＝2を　styleに変更しました。、、、ということは　tdにもborderを記述しなければならなくなりますね？さらに htmlでは、tableタグで、cellspacing、 cellpaddingをゼロにしていたのですが xhtmlで同じようにしているのですが、どうしても一日分の幅の両端に隙間が出てしまいます。（背景色で色をつけているので、両端は白くなってしまいます） htmlでは飲み込んでくれていた（！）border付きのtdの幅なども xhtmlではborderの幅の分も加算しなければならない？　というようなサイトもありましたので増やしてみたのですが、表示は変わりませんでした。多分、間違っているんだと思うのですが。。。 xhtmlだと　直接borderを記述するのでなく、styleとして記述しなければならないのですよね？他に予定一覧などのサンプルサイトがあればマネもしたいところです。最悪、このページだけはhtml4.01のままいくしかないのかなと思ったりしてます。何日も躓いてる状態ですが、そもそも根本的な問題として DOCTYPEの宣言はhtml4.01のままでは、ダメでしょうか？できれば、なるべく最新の状態に変更したいと思っているのですが変更しなくても、いいのでは、、、と思うようになっています。（うまくいってないので ^^;）どなたかアドバイスをお願いいたします。

jg1wjz
お礼率91% (148/162)

HTML
回答数5
ありがとう数14

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/07/23 19:06 回答No.5

HTMLにするか、XHTMLにするか・・　つい数年前までは、W3CもHTMLは4.01で終了し、今後はXHTMLに移行すると宣言し、 HTML4.01 　そのままXML構文にあわせた　　XHTML1.0 strict、XHTML1.0 transitional、XHTML1.0 frameset 　そして、予告どおりstrict以外を廃止した　　XHTML1.1 　そして、XHTML2.0の策定を進めていましたが、W3Cの方向性に反対するWHATWGが独自にHTML5の策定を進め始めた。世界はXHTMLを支持せず、HTML5に向かい始めた。そのためW3Cは前言を翻して、XHTML2.0の策定を中止して、一緒にHTML5に進み始めた。詳しくは、 ★HTML5が持つ本当の意味－＠IT( http://www.atmarkit.co.jp/news/200801/25/html.html ) ---「難しい技術は広く使われない」---- 以下は、"HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html )"より【問題1】Webブラウザ間の互換性が低い【問題2】文書内に埋め込まれた「意味」が不明確　　これは、HTML4.01のときにすでに『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』とされていたはずなのに無視されてきた。【問題3】Webアプリの機能が制限されているその反省から、HTML5は作られてきました。私が示したサンプルは、HTML5の新しい要素をclass名などに取り入れた形になっている。　将来を考えると現状ではHTML5を念頭において、HTML4.01strictが一番簡単でしょう。＞１分単位なので1440個のＴＤになってしまいます。　それでしたら、table、特にtdは使いません。tableの描画は時間がかかります。 <div class="schedule"> 　<h2>週間予定</h2> 　<dl> 　　<dt>月</th> 　　<dd> 　　　<span class="noneOrder S0630 H0230 E0900">101</span> 　　　<span class="ordered S0900 H0100 E1000"> </span> 　　　<span class="noneOrder S1000 H0150 E1050">102</span> 　　　<span class="ordered S1050 H0300 E1350"> </span> 　　　　・・・とかのほうが楽でしょうね。・・classの中身は適当(後々使うかもしれないので)・・　　</dd> ☆HTMLの仕様では、idには・先頭がアルファベットで始ま。・2文字目以降にはアルファベット、数字、ハイフン(-)、アンダースコア(_)、ピリオン(.)、コロン(:) 　class名には制限はないのですが、スタイルシートで使う場合はclass名にも・一文字目はアルファベット、アンダースコア(_) ・二文字以降はアルファベット、数字、ハイフン(-)、アンダースコア(_) 　と言う制限が加わります。

質問者

お礼 2014/07/24 10:39

ORUKA1951 様大変わかりやすく詳細に教えていただき、とても参考になります。どのDOCTYPEを選べばいいのか、周りに聞く人もいないし、ネットで情報を調べても判断がつきませんでした。思えば、html4.01tran..で動いていて、マイグレ提案に伴い、上からIEのバージョンアップに耐えられるよね？との質問を受けました。システムは5年以上使われることが多く、今後のweb関連の仕様がどのように進化するのかわからないのに、その全てに対応できるはずもないな－、と思ったし、非推奨もあるしxhtmlのほうが良さげ？！...程度の判断でのリメークでした。期間的にまだ間に合うと思いますので、 html4.01strictでいきたいと思います。 dl,dt,ddはまだ使ったことが無いので tableに変えて使ってみたいと思います。すんなりいけるといいのですが。ご回答有難うございました！

その他の回答 (4)

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/07/18 20:06 回答No.4

XHTMLでしたら、そのまま初めの部分を <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> とすれば良いです。 XHTMLはHTML4.01をそのままXML構文で書き直したものですから、本質的な差はありません。まあ・要素名　属性は小文字で書くこと・属性はかならずattribute="[値]"と書くこと・閉じタグを省略しないこと　内容のない要素は />で閉じること＞これをxhtml1.0に変更しようとしているのですが、だけが異なるだけです。それによって描画が変わる事はありません。￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣　原因は別にある。No.1の回答 XHTML1.1は、strictしかないので、このままでよいが<head></head>内が多少変わる。

質問者

お礼 2014/07/23 16:22

ORUKA1951様サンプルに基づき、いろいろ試してみました。で、原因がわかりました！ html4.01Tran...ではtable内のボーダーは幅に含まれないようですが、 xhtml1.0では、幅にボーダー分がプラスされていました。 doｃument．getElementById（str）．offsetWidtｈ；で、取得された値を表示してみてわかりました。で、原因といいますか、テーブルの見出し部分の0-23の時間帯にwidthを指定していたのが原因のようでした。このwidthをはずしたら、正しく表示できました。 tableタグに全体のwidthを指定し、スケジュールの詳細用の<td>にはwidthは指定せず、colspanだけでうまく表示されました。 DOCTYPEは、元の <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> です。こんな訂正でxhtml1.0の構文的によいのでしょうか？（構文チェックはまだしていませんが） DOCTYPE宣言は、html4.01のstrictにしたほうが良いと思われますか？ベストアンサーにしようと思いましたが、アドバイスをお願いしたいので、今はこのままにしておきます。よろしくお願いいたします。

質問者

補足 2014/07/23 16:34

お礼の補足になります。m(__)m もしかしたら、これはブラウザによるものなのでしょうか？？？不安になってきました。テスト環境のブラウザはIE8です。 IE7で使いたいというエンドユーザもいるようですが、システムとしてIE8以上を推奨予定です。 (「以上」はあまり言いたくないのですが) 他のブラウザは使用禁止です。^^;

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/07/18 19:52 回答No.3

スタイルシートのみ ★印刷やガラケー(フィーチャーホン)にも対応 <style type="text/css">  </style> <style type="text/css" media="screen">  </style>

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/07/18 19:49 回答No.2

HTML4.01strictのサンプル。 Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済み ★タブは＿に置換してあるので戻す。 ★スタイルシートは次回 <!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">  </style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<table summary="weekly schedule" border="1"> ＿＿＿<thead> ＿＿＿＿<tr> ＿＿＿＿＿<td></td> ＿＿＿＿＿<th abbr="0">0</th><th abbr="1">1</th><th abbr="2">2</th> ＿＿＿＿＿<th abbr="3">3</th><th abbr="4">4</th><th abbr="5">5</th> ＿＿＿＿＿<th abbr="6">6</th><th abbr="7">7</th><th abbr="8">8</th> ＿＿＿＿＿<th abbr="9">9</th><th abbr="10">10</th><th abbr="11">11</th> ＿＿＿＿＿<th abbr="12">12</th><th abbr="13">13</th><th abbr="14">14</th> ＿＿＿＿＿<th abbr="15">15</th><th abbr="16">16</th><th abbr="17">17</th> ＿＿＿＿＿<th abbr="18">18</th><th abbr="19">19</th><th abbr="20">20</th> ＿＿＿＿＿<th abbr="21">21</th><th abbr="22">22</th><th abbr="23">23</th> ＿＿＿＿</tr> ＿＿＿</thead> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="金曜日">7月26日(金)</th> ＿＿＿＿＿<td></td><td></td><td></td><td></td><td></td><td></td> ＿＿＿＿＿<td></td><td></td><td></td><td></td><td></td><td></td> ＿＿＿＿＿<td class="ordered 8h">○</td> ＿＿＿＿＿<td class="ordered 8h">○</td> ＿＿＿＿＿<td class="ordered 8h">○</td> ＿＿＿＿＿<td class="ordered 8h">○</td> ＿＿＿＿＿<td class="ordered 8h">○</td> ＿＿＿＿＿<td class="ordered 8h">○</td> ＿＿＿＿＿<td class="ordered 8h">○</td> ＿＿＿＿＿<td class="ordered 8h">○</td> ＿＿＿＿＿<td></td><td></td><td></td><td></td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="土曜日">7月27日(土)</th> ＿＿＿＿＿<td></td><td></td><td></td><td></td><td></td><td></td> ＿＿＿＿＿<td class="ordered 12h">○</td> ＿＿＿＿＿<td class="ordered 12h">○</td> ＿＿＿＿＿<td class="ordered 12h">○</td> ＿＿＿＿＿<td class="ordered 12h">○</td> ＿＿＿＿＿<td class="ordered 12h">○</td> ＿＿＿＿＿<td class="ordered 12h">○</td> ＿＿＿＿＿<td class="ordered 12h">○</td> ＿＿＿＿＿<td class="ordered 12h">○</td> ＿＿＿＿＿<td class="ordered 12h">○</td> ＿＿＿＿＿<td class="ordered 12h">○</td> ＿＿＿＿＿<td class="ordered 12h">○</td> ＿＿＿＿＿<td class="ordered 12h">○</td> ＿＿＿＿＿<td></td><td></td><td></td><td></td><td></td><td></td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="日曜日">7月28日(日)</th> ＿＿＿＿＿<td></td><td></td><td></td><td></td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td class="ordered 18h">○</td> ＿＿＿＿＿<td></td><td></td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="月曜日">7月29日(月)</th> ＿＿＿＿＿<td></td><td></td><td></td><td></td><td></td><td></td> ＿＿＿＿＿<td></td><td></td><td></td><td></td><td></td><td></td> ＿＿＿＿＿<td></td><td></td><td></td><td></td><td></td><td></td> ＿＿＿＿＿<td class="ordered 6h">○</td> ＿＿＿＿＿<td class="ordered 6h">○</td> ＿＿＿＿＿<td class="ordered 6h">○</td> ＿＿＿＿＿<td class="ordered 6h">○</td> ＿＿＿＿＿<td class="ordered 6h">○</td> ＿＿＿＿＿<td class="ordered 6h">○</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/07/18 17:45 回答No.1

HTML4.01であるものを、いまさらXHTMLにしなければならないのか不明です。 XHTMLは、他のアプリケーションとの連携などの目的がない場合、今後廃れる。どうせならXMLで作成して、XSLTでHTMLに直すとしない限り面倒くさいXHTMLにする必要はない。　いずれHTML5が主流になる状況で、他のアプリケーションとの整合を問わなければHTMLで良いでしょう。　いささか古い2008年の記事ですが・・　⇒HTML5が持つ本当の意味－＠IT( http://www.atmarkit.co.jp/news/200801/25/html.html ) 　なお、表示差は、ブラウザの互換モードによる物じゃないですか？　HTML4.01strictで、きちんとDOCTYPE宣言が書かれていれば標準モードで動作するはずです。　￣￣￣￣￣￣￣￣￣さすがにtransitinalやframesetは使ってないでしょうが・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 　になります。DOCTYPEをこう記述して、CGIから出力されるHTMLを Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) 　のDATA入力(右上ボタン)などでチェックすると早いです。 HTML4.01strictでしたら　tabelには、後方互換でborder＝"1",summary="" だけを記述・borderはtable,th,tdは別に扱われますから、ここに指定する・cellspacing、 cellpaddingは使用できません。スタイルシートで指定します。 DOCTYPEの宣言はhtml4.01のままでは、ダメでしょうか？　だめです。XHTMLは、HTML以前にXMLですからできれば、なるべく最新の状態に変更したいと思っているのですが　ならHTML4.01strictでしょう。HTML5でも良いですが、まだまだlast-collだけど勧告じゃない。チョコチョコ変更もあるし、対応していないブラウザもある。 <table summary="weekly schedule" border="1"> 　<tbody> 　　<tr abbr="月曜日">月</th> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td class="ordered" colspan="15">abcd</td> 　　</tr> ・・・・が出力としては楽でしょうね。 <table summary="weekly schedule" border="1"> 　<tbody> 　　<tr abbr="月曜日">月</th> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td></td> 　　　<td class="ordered 15h">○</td> 　　　<td class="ordered 15h">○</td> 　　　<td class="ordered 15h">○</td> ・・・　　　<td class="ordered 15h">○</td> 　　</tr> のほうが、良いかも。あとはスタイルシートで table[summary="weekly schedule"]{ border:2px solid gray; border-collapse:collapse; line-height:2em; position:relative; width:auto; } table[summary="weekly schedule"] th,table[summary="weekly schedule"] td{ border;solid 1px gray; width:4%; } table[summary="weekly schedule"] td{ border-width: 1pz 0; padding:0; text-align:center; } table[summary="weekly schedule"] td.ordered{ background-color:aqua; } 下のHTMLの場合は table[summary="weekly schedule"]{ border:2px solid gray; border-collapse:collapse; line-height:2em; position:relative; width:auto; } table[summary="weekly schedule"] th,table[summary="weekly schedule"] td{ border;solid 1px gray; width:4%; } table[summary="weekly schedule"] td{ border-width: 1pz 0; padding:0; overflow:hidden;/* 変更 */ text-indent:-10em;/* 追加 */ } table[summary="weekly schedule"] td.ordered{ background-color:aqua; } ★画像に書かれている数字[555]の意味が不明なため

質問者

お礼 2014/07/23 10:26

ORUKA1951様、ありがとうございます。 iframeを使用していたので（理由、あってますか？）今まではhtml4.01のtransitinalでした。でも今回、iframeをなくして１枚（！）のページで出力しようと思って手直し中です。 ※今までは本体のonloadでiframe内に情報を表示させていました。（環境によってonloadには泣かされっぱなしでした）サンプルまで有難うございます。因みに「555」は予約の名称みたいなもんです。今から試してみます。で、追加で教えてください。 ●予約の表示ですが、＜td＞＜／td＞のほうがcolspanより、いいのでしょうか？１分単位なので1440個のＴＤになってしまいます。最低２分（システムの条件）なので、その半分ですが。全部埋まることもあるので、MAXで考えるとかなりの文字数になりますが、影響ないでしょうか。。。 weekly表示ですと、７日分×最大２０部屋の表示が1ページになります。 ●回答NO4を踏まえさせていただき、 xhtml1.0のstrictにして、 BODY内はxml構文として記載していただいたものだけ訂正する。これがいいのかな？　またはこのページだけhtml4.01 のstrictにする？今はプログラムに組み込むためのプロトタイプ作成中で、出来上がったらプログラムに組み込みます。いつも、最終的にはcgi出力したページを全部「Another HTML Lint」でチェックしています。今はhtml4.01Transitionalです。 xhtmlにするか、html4.01のstrictにするか今だ悩み中です。どちらがハードル（手直し？）が高いでしょうか？重ね重ね、よろしくお願いいたします。 ※今からサンプル版で試してみます。

xhtmlでのtableのセル(td)等について

xhtmlでのtableのセル(td)等について