HTMLテーブル構造の疑問 - IE8～IE10での表示方法

2014/03/06 16:05

このQ&Aのポイント

HTMLでテーブルを特定の構造にする方法を調べています。IE8～IE10で表示できる方法が特に知りたいです。
カラムの幅を指定せずに、テーブルの左端と右端を揃えたいです。
IE以外のブラウザでも表示できるとなお嬉しいです。

aki04
お礼率76% (30/39)

その他([技術者向] コンピューター)
回答数7
ありがとう数2

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

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

ベストアンサー

久保泰臣（@omi3_）
ベストアンサー率24% (254/1030)

2014/03/06 16:58 回答No.2

うまくない <table border=1 > <tr > <th>見出し１</th><td colspan=3 >○○○○○○</td> <th>見出し２</th><td>○○○</td> </tr> <tr> <th>見出し３</th><td>○○</td> <th colspan=3>少し長い見出し４</th><td>○○○</td> </tr> <tr height=0 > <td>　</td> <td>　</td> <td>　</td> <td>　</td> <td>　</td> <td>　</td> </tr> <tr height=0 > <td>□□</td> <td>□□</td> <td>□□</td> <td>□□</td> <td>□□</td> <td>□□</td> </tr> </table>

質問者

補足 2014/03/06 17:57

ありがとうございます。やっぱりそういう感じになっちゃいますよね！実は投稿した後ふと思いついてダミー行をかますのやってみたのですが、カラムの幅の割当が希望通りにならなかったり（これはまあ調整すればできそうな気もしなくもないのですが）ダミー行がうまく消せなかったりしていまひとつです… ↓ダミー行を非表示にする為に試したcss /* border を消すと喰い合いが解消されてしまうように見える */ tr.test1 td { padding:0; border-width:0; } /* border があれば喰い合ったままに見える。縮んで欲しくないところが縮んでる気がするけど。ただ要らない枠線が残る */ tr.test2 td { padding:0; height:0; } /* 予想通り駄目 */ tr.test3 td { display:hidden; } うう…

ログインすると、全ての回答が全文表示されます。

その他の回答 (6)

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

2014/03/08 09:14 回答No.7

将来性を考慮すると＿＿＿<dl class="name C2"> ＿＿＿＿<dt>氏名</dt> ＿＿＿＿<dd><input type="text" size="10" name="name" value=""></dd> ＿＿＿＿<dt>性別</dt> ＿＿＿＿<dd>男:<input type="radio" name="sex" value="M"> 女:<input type="radio" name="sex" value="F"></dd> ＿＿＿</dl> ＿＿＿<dl class="address C2"> ＿＿＿＿<dt>住所</dt> ＿＿＿＿<dd><input type="text" size="40" name="address" value=""></dd> ＿＿＿</dl> ＿＿＿<dl class="mail C7"> ＿＿＿＿<dt>メールアドレス</dt> ＿＿＿＿<dd><input type="text" size="10" name="e-mail" value=""></dd> ＿＿＿</dl> ＿＿＿<dl class="mail C10"> ＿＿＿＿<dt>メールアドレス(確認)</dt> ＿＿＿＿<dd><input type="text" size="10" name="e-mail2" value=""><strong>コピーペーストしない</strong></dd> ＿＿＿</dl> ＿＿＿<dl class="textarea C4"> ＿＿＿＿<dt>連絡事項</dt> ＿＿＿＿<dd><textarea cols="40" rows="5" name="message"></textarea></dd> ＿＿＿</dl> のようにclass名をつけておいたほうが良いでしょうね。

ログインすると、全ての回答が全文表示されます。

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

2014/03/07 19:11 回答No.6

No.3へのお礼＞項目名と入力欄のセット、を GridLayout したいのです… 　から入力フォームだと判断したサンプルです。　IEにはtableに関してバグがあって、数年前にも　⇒テーブルをスクロールさせるときのスクロールの位置 - HTML - 教えて！goo( http://okwave.jp/qa/q7105490.html ) 　試されたらわかるように、他のブラウザはすべて期待通りに、tableだろうがdlだろうが同じデザインになるはずですが、IEのみ期待通りになりません。　なおclass名の class="textarea C4"の意味はわかると思いますが、項目見出しの文字数をcharacter(C)が4文字と言う意味です。 form.dl dl{/* 略 */position:relative;} ・・・・ form.dl dl.textarea dt{display:block;position:absolute;top:0;left:0;height:100%;} form.dl dl.C4 dd{padding:0 1em;position:relative;top:2px;} form.dl dl.C4 dd{margin-left:6em;} ・・・【中略】・・・ form table tr{/* ・・・*/position:relative;} ・・・ form table tr.textarea th{display:block;position:absolute;top:0;left:0;height:100%;} form table tr.C4 td{padding:0 1em;position:relative;top:2px;} form table tr.C4 td{margin-left:6em;} 　縦ボーダーをこの方法以外では行高さに合わせられないためにabsoluteで参照させています。

ログインすると、全ての回答が全文表示されます。

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

2014/03/07 18:58 回答No.5

tableが必須だとＩＥを使用すれば無理です。説明は次回 <!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"> ＿＿<h2>見出し</h2> ＿＿<form action="./" class="dl"> ＿＿＿<dl> ＿＿＿＿<dt>氏名</dt> ＿＿＿＿<dd><input type="text" size="10" name="name" value=""></dd> ＿＿＿＿<dt>性別</dt> ＿＿＿＿<dd>男:<input type="radio" name="sex" value="M"> 女:<input type="radio" name="sex" value="F"></dd> ＿＿＿</dl> ＿＿＿<dl> ＿＿＿＿<dt>住所</dt> ＿＿＿＿<dd><input type="text" size="40" name="address" value=""></dd> ＿＿＿</dl> ＿＿＿<dl> ＿＿＿＿<dt>メールアドレス</dt> ＿＿＿＿<dd><input type="text" size="10" name="e-mail" value=""></dd> ＿＿＿</dl> ＿＿＿<dl> ＿＿＿＿<dt>メールアドレス(確認)</dt> ＿＿＿＿<dd><input type="text" size="10" name="e-mail2" value=""><strong>コピーペーストしない</strong></dd> ＿＿＿</dl> ＿＿＿<dl class="textarea C4"> ＿＿＿＿<dt>連絡事項</dt> ＿＿＿＿<dd><textarea cols="40" rows="5" name="message"></textarea></dd> ＿＿＿</dl> ＿＿</form> ＿＿<form action="./"> ＿＿＿<table summary="フォーム"> ＿＿＿＿<tbody> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<th>氏名</th> ＿＿＿＿＿＿<td><input type="text" size="10" name="name" value=""></td> ＿＿＿＿＿＿<th>性別</th> ＿＿＿＿＿＿<td>男:<input type="radio" name="sex" value="M"> 女:<input type="radio" name="sex" value="F"></td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<th>住所</th> ＿＿＿＿＿＿<td><input type="text" size="40" name="address" value=""></td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<th>メールアドレス　　　</th> ＿＿＿＿＿＿<td><input type="text" size="10" name="e-mail" value=""></td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr> ＿＿＿＿＿＿<th>メールアドレス(確認)</th> ＿＿＿＿＿＿<td><input type="text" size="10" name="e-mail2" value=""><strong>コピーペーストしない</strong></td> ＿＿＿＿＿</tr> ＿＿＿＿＿<tr class="textarea C4"> ＿＿＿＿＿＿<th>連絡事項</th> ＿＿＿＿＿＿<td><textarea cols="40" rows="5" name="message"></textarea></td> ＿＿＿＿＿</tr> ＿＿＿＿</tbody> ＿＿＿</table> ＿＿</form> ＿</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>

質問者

お礼 2014/03/10 15:39

ありがとうございます。確認してみました。教えて頂いた方法だと↓のようになりますね。（等幅フォントで見ないとずれますが…） ┏━━━━━━┳━━━━━━━┳━━━━┳━━━┓ ┃見出し００１┃○○○○○○○┃見出し２┃○○○┃ ┣━━━┳━━┻┳━━━━━━┻━┳━━┻━━━┫ ┃見出３┃○○○┃少し長い見出し４┃○○○　　　┃ ┗━━━┻━━━┻━━━━━━━━┻━━━━━━┛ 質問の仕方が悪かったですね、すみません;; ↓こういう感じにしたかったのです。 ┏━━━━━━┳━━━━━━━┳━━━━┳━━━┓ ┃見出し００１┃○○○○○○○┃見出し２┃○○○┃ ┣━━━━━━╋━━━┳━━━┻━━━━╋━━━┫ ┃見出３　　　┃○○○┃少し長い見出し４┃○○○┃ ┗━━━━━━┻━━━┻━━━━━━━━┻━━━┛ 基本はセルの端を揃えて、でも指定した箇所だけは侵食させたい(？)みたいな感じなのですが… ちょっと難しそうですね。 # あ、教えていただいた方法も今後使いそうなので # メモさせて頂きます(´人｀) もうしばらく開けて置きますが、しばらくして他に方法がなかったら締めようと思います。

質問者

補足 2014/03/07 20:34

ありがとうございます。ちょっと急ぎ仕事が入ってしまったので週明けの報告になってしまいそうですが、落ち着いたら確認してみます。 (´人`)

ログインすると、全ての回答が全文表示されます。

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

2014/03/06 19:54 回答No.4

No.3です。＞質問の２「カラムの width 等を指定することなく左端や右端を揃えたい」が叶えば　もう少し詳しく・・・widthを指定したくないということは、リキッド--使用環境によってディスプレイ幅が異なるため内容に応じて伸縮の余地を残しておきたいと言うことでしょうか？・tr 　　|--tr 　　|--td 　　|--tr 　　|--td 　tr 　　|--tr 　　|--td 　　|--tr 　　|--td となってますが、ひとつのtr内に必ずふたつ以上ののtr+tdのセットがあると言う事ですか？なぜ、 table 　tr 　　|--tr 　　|--td 　　|--tr 　　|--td table 　tr 　　|--tr 　　|--td 　　|--tr 　　|--td じゃまずいのか？？？定義リストで言うと dl 　dt(定義) 　dd(説明) 　dt(定義) 　dd(説明) dl 　dt(定義) 　dd(説明) 　dt(定義) 　dd(説明) ・・差し支えない範囲で。、もう少し具体的な文書構造を示していただけると良いです。 ★HTMLには、レイアウトは考えずに率直に文書構造だけ記してください。そのほうがデザインは楽ですし、HTMLの改訂もスタイルシートも楽になりますし、環境に依存しませんから・・　私が知りたいのは文書構造と、それをどのようにプレゼンテーションしたいかです。

ログインすると、全ての回答が全文表示されます。

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

2014/03/06 18:48 回答No.3

本当に表ですよね。『ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』のは、最も避けなければならないのです。　見出しがどのような物かわかりませんが、見出し(heading)はそんなに連続する物ではありません。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここからスタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より　ですので、文書構造だけがHTMLでキチンのマークアップされていれば、表よりもはるかに容易に自在にデザインできますし、IE7とか9とかFirefoxとかの視覚ブラウザだけでなく、携帯電話も点字端末も読み上げブラウザ(スクリーンリーダー)も印刷機も・・・そして検索エンジンにも最適なページを作ることが出来ます。 ○○部分がテキストだとして・・・ <dl class="test"> 　<dt>見出し1</dt> 　<dd>記事・・・</dd> 　<dt>見出し2</dt> 　<dd>記事・・・</dd> </dl> <dl class="test"> 　<dt>見出し3</dt> 　<dd>記事・・・</dd> 　<dt>見出し4</dt> 　<dd>記事・・・</dd> </dl> とかのほうが望ましいのじゃないかと。

質問者

お礼 2014/03/06 19:19

# 質問の追記とか補足に追記ってできないんですか… なお、質問にて "見出し" としてしまいましたが正確には "項目名" です。項目名と入力欄のセット、を GridLayout したいのです…

質問者

補足 2014/03/06 19:15

ご明察の通り、実はテーブルレイアウトです… テーブルレイアウトが駄目なのは百も承知なのですが、今回は社内の閉じた環境でのみ使う画面であること、他色々な理由との兼ね合いでテーブルレイアウトを使うことになっています。質問の２「カラムの width 等を指定することなく左端や右端を揃えたい」が叶えばテーブルレイアウトなんか使わなくても良いのですが…

ログインすると、全ての回答が全文表示されます。