- ベストアンサー
HTML初心者のためのテーブル作成方法
- HTML初心者の方向けに、テーブルの作成方法について解説します。
- テーブルを作成する際に、文字数に関係なく上下の枠を同じ幅にする方法について説明します。
- テーブルの幅を固定するためには、特定の属性を指定する必要があります。具体的な方法について解説します。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＞ネットオークションによく使われる商品説明に使用したく質問致しました。 その場合は、HTMLの制限でスタイルシートが使えないことがあります。 根本的に見直さないとなりません。 原則、HTMLと属性だけで指定することになります。 <table width="90%" border="1"> <tbody> <tr> <th width="80">サイズ</th> <td>なんたらかんたら</td> とかにならざるを得ません。サイズ指定は一行目だけで良いです。 私は <table border="0" width="100%"> <tbody> <tr> <td width="10%"></td> <th width="80%">商品説明</th> <td></td> </tr> <tr> <td> <table border="1"> <tbody> <tr> <th width="6">商品名</th><!--もっとも長い見出し項目 --> <td colspan="3">なんたらかんたら・・</td> </tr> <tr> <th>機種・型番</th> <td>機種名・・</td> <th>メーカーサイト</th> <td><a href="[URL]">なんとか</td> </tr> ・・・・・・以下省略 </tbody> </table> </td> </tr> </tbody> </tabel> とかをテンプレートにしています。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞この記述ですと、枠の中の文章が長くなると左右の幅が文字に合わせて長くなったり短くなったりします。 そうならなければまずいのです。表は、行と列にデータを整理するものです。また内容の増減によって伸縮して極力すべてのデータを表示することが求められます。表ですからね。 最後にサンプルをあげて置きますが、印刷プレビューではスタイルは適用されていません。また検索エンジンは無論、携帯電話や読み上げソフト、点字出力でも問題ないはずです。 そして、なによりもHTMLはとても簡単ですから、後から追加や修正もらくです。デザインはスタイルシートで指定してあるので、そちらで自由自在に(HTMLは触らずに)変更できます。 とにかく楽ですし、ウェブ標準ですし・・ 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より サンプル [HTML4.01strict] strictで製作しているのは、 『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』だからです。 ★サンプル中、タブは＿に置換してあります。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^タブに戻すこと。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# )でHTML4.01strict ★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )にてCSS3で検証 <!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" media="screen"> <!-- table{ width:60%;/* デフォルトの幅 */ min-width:600px;max-width:800px;/* 最大と最小の幅 */ margin:0 auto;/* 真ん中に置く */ border:solid 2px blue;/* 枠の色 */ border-collapse:collapse;/* コマの間隔はなし */ } caption{ font-weight:bold;font-size:1.6em;/* 表の表題の指定 */ } th,td{ border:aqua 1px solid;/* コマの罫線は水色 */ padding:0.5em 1em;/* コマ内側の余白は上下0.5文字幅、左右１文字幅 */ } th{ border-bottom:double 3px;/* thの下は二重線 */ } td{ text-align:center;min-width:6em;/* 最小でも６文字分確保 */ } td+td{ text-align:left;min-width:15em;/* 二つ目以降のセルは最低15文字 */ } tr:nth-child(2n) td{border-bottom-width:2px;background-color:rgb(220,255,255);} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<table border="1" summary="クラスのメンバーに簡単なメッセージを書いてもらいました。"> ＿＿＿<caption>メッセージ一覧</caption> ＿＿＿<thead> ＿＿＿＿<tr> ＿＿＿＿＿<th abbr="氏名">氏名</th><th abbr="メッセージ">メッセージ</th> ＿＿＿＿</tr> ＿＿＿</thead> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<td>伊藤太郎</td><td>今年は頑張ってレギュラーになりたい。</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>上田賢太郎</td><td>忘れ物をしないこと。予習復習をきちんとすること。</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>江口美子</td><td>すこし痩せなくっちゃ</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>緒方恭子</td><td>早寝早起きをして、朝食をきちんと食べるように</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>加藤健二</td><td>苦手な科目の克服</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
補足
勉強になります。ありがとうございます。初心者なのでちょっと専門用語が多くて最初は大変かもしれませんが、地道に頑張ります。 最初に書けばよかったのですが、今回の表（枠？）はネットオークションによく使われる商品説明に使用したく質問致しました。なので左右の幅が大きくなりすぎても見にくいかと思い気にしていました。上記サンプルも前回のサンプルもある程度文字を入力したら枠内で改行というか、折り返し１段下へ移動してくれたので、これを活用しようと思います。ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<center>やnowrapは典型的非推奨要素なので使わないように。<br>も通常は使う機会はないでしょう。 とても古い参考書をご覧になっているようです。 ★単純に、ひとつの表内に記述するしかありません。 ？入力とは、formの<input>要素のことですか？ そうでなければ（そうであっても）、表でしたら <table border="1" summary="入力フォーム"> <thead> <tr> <th colspan="2" abbr="送信内容">見出し</th> </tr> </thead> </tbody> <tr> <td>入力1_1</td><td width="400">入力1_2</td> </tr> <tr> <td>入力2_1</td><td>入力2_2</td> </tr> <tr> <td>入力3_1</td><td>入力3_2</td> </tr> <tr> <td>入力4_1</td><td>入力4_2</td> </tr> <tr> <td>入力5_1</td><td>入力5_2</td> </tr> <tr> <td>入力6_1</td><td>入力6_2</td> </tr> </tbody> </table> 以上は書く必要がありません。これで長い表でも印刷すると各ページに見出しは印刷される。 後はスタイルシートでデザインしましょう。
お礼
早速のご回答ありがとうございます。 古い記述方式だったようですね。 まずはいろいろやってみます。 ありがとうございました。
補足
勉強になりました。ありがとうございました。この記述ですと、枠の中の文章が長くなると左右の幅が文字に合わせて長くなったり短くなったりします。 また線でくくられた２つの表の上の”見出し”表も作成してみましたが、文字数により左右の幅が広がったりちじんだりしてしまいます。表の左右の幅をある程度、もしくはしっかり固定したいのですがそれはできませんでした。 ちなみに印刷はしませんので”見出し”という箇所は常に印刷されなくてもかまいません。
補足
ご回答ありがとうございます。上記の記述ですと３文字で改行され縦長の表示になってしまいます。 当初質問にもありますが、２つの枠（表？）の左右の幅が文字数により減ったり増えたりしないで、常時同じ幅にするにはどこを直せばいいのでしょうか？という質問でした。できればそのあたりをご教授して頂けないでしょうか？