- ベストアンサー
xhtmlでのtableのセル(td)等について
- xhtmlでのtableのセル(td)等についての質問です。tableの表示が正しくできないため、アドバイスをお願いします。
- html4.01からxhtmlに更新しようとしていますが、tableの表示に問題があります。予約のスケジュール一覧を表示する際に、隙間ができてしまいます。
- xhtml1.0に変更する際に、tdにborderの記述が必要になるのか疑問です。また、cellspacingとcellpaddingをゼロに設定しても、両端に隙間ができてしまいます。DOCTYPEの宣言も変更が必要なのか迷っています。アドバイスをお願いします。
- みんなの回答 （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名にも ・一文字目はアルファベット、アンダースコア(_) ・二文字以降はアルファベット、数字、ハイフン(-)、アンダースコア(_) と言う制限が加わります。
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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>内が多少変わる。
お礼
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にしたほうが良いと思われますか？ ベストアンサーにしようと思いましたが、 アドバイスをお願いしたいので、今はこのままにしておきます。 よろしくお願いいたします。
補足
お礼の補足になります。m(__)m もしかしたら、これはブラウザによるものなのでしょうか？？？ 不安になってきました。 テスト環境のブラウザはIE8です。 IE7で使いたいというエンドユーザもいるようですが、 システムとしてIE8以上を推奨予定です。 (「以上」はあまり言いたくないのですが) 他のブラウザは使用禁止です。^^;
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートのみ ★印刷やガラケー(フィーチャーホン)にも対応 <style type="text/css"> <!-- table[summary="weekly schedule"]{ border:2px solid gray; border-collapse:collapse; line-height:2em; padding:0; } table[summary="weekly schedule"] tbody th{white-space:pre;} table[summary="weekly schedule"] thead th{font-size:0.7em;text-align:left;font-weight:normal} table[summary="weekly schedule"] th,table[summary="weekly schedule"] td{ border;solid 1px gray; } table[summary="weekly schedule"] td{ padding:0; width:2em; text-align:center; } --> </style> <style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} table[summary="weekly schedule"] td{ width:1.6em; border-width: 1px 0; overflow:hidden; text-indent:-10em; } table[summary="weekly schedule"] td.ordered{ background-color:aqua; } th[abbr="日曜日"]{background-color:fuchsia;} --> </style>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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)
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]の意味が不明なため
お礼
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にするか 今だ悩み中です。 どちらがハードル（手直し？）が高いでしょうか？ 重ね重ね、よろしくお願いいたします。 ※今からサンプル版で試してみます。
お礼
ORUKA1951 様 大変わかりやすく詳細に教えていただき、とても参考になります。 どのDOCTYPEを選べばいいのか、周りに聞く人もいないし、ネットで情報を調べても判断がつきませんでした。 思えば、html4.01tran..で動いていて、マイグレ提案に伴い、上からIEのバージョンアップに耐えられるよね？との質問を受けました。 システムは5年以上使われることが多く、今後のweb関連の仕様がどのように進化するのかわからないのに、その全てに対応できるはずもないな－、と思ったし、 非推奨もあるしxhtmlのほうが良さげ？！...程度の判断でのリメークでした。 期間的にまだ間に合うと思いますので、 html4.01strictでいきたいと思います。 dl,dt,ddはまだ使ったことが無いので tableに変えて使ってみたいと思います。 すんなりいけるといいのですが。 ご回答有難うございました！