- ベストアンサー
htmlのtableについて
テーブルの列をウィンドウの幅に合わせて移動させたいのですが 参考になるサイトがありましたら教えて下さい 例 ｜ABCD｜ とあったら ｜AB｜ ｜CD｜ としたいのです
- tsubaki290
- お礼率21% (5/23)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＃1さんのいうようにそれは表ではありませんね。 表ではなく仮に段落としてコーディングしてみました。 説明も、ソースの中にいれますね。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>見本</title> <!--この行から●●おしまい行までをお手持ちの<head></head>内に入れてみてください--> <style type="text/css"> .mihon {width:100%;} .mihon p{/*class="mihon"内のpタグへデザインします*/ float:left;/*出てきた順番に左に、左に浮かせて寄せます*/ margin:5px;/*pの外側上下左右を5pxづつ空けます*/ padding:5px;/*pの内側上下左右を5pxづつ空けます*/ width:150px;/*pの幅は150px*/ height:150px;/*pの高さは150px*/ background:#cccccc;/*背景色の指定無くてもいいです*/ border:1px solid #000000;/*罫線の指定無くてもいいです*/ } .mihon:after{/*class="mihon"が終わった後をデザインします。*/ content: ""; display: block; clear: left;} </style> <!--●●おしまい行--> </head> <body> <div class="mihon"><!--class="mihon"の中のpを並べます。--> <p>横に並べたり、罫線を引いたり、背景を付けることはテーブル以外でもできます</p> <p>#1のいう列や行が固定で表としての表は表です。</p> <p>が、並べるなどレイアウト目的に表を使うことは推奨されません。</p> <p>ここでは、ｐタグを並べる例を出しました。</p> <p>本番に使われるのがｐ（段落）でなければ、適したタグに変えてください。</p> <p>head内の.mihon pを.mihon liや.mihon divに変更されれば、</p> <p>箇条書きul liのタグや、現行のタグでは当てはまらないが</p> <p>ブロック要素のdivなどに、対応できます。</p> <p>また、class=も、mihonではなく、そこだけを特別に変える理由に</p> <p>変更するのがベストです。</p> <p>ブラウザを、広げたり</p> <p>縮めたりしてみてください。</p> </div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
#2でDrFellさんが良い例を示されています。 ＞これをdivにかえてやれるか試してみたいと・・・ divは、他に適切なタグがないときに、文書構造を示すために使うもので、デザインのためにdivで括れば良いというものではありません。 たとえば、作成されている部分が、商品リストやアルバムでしたら、リストでマークアップしたほうが良いでしょう。その上で、ひとつの単位でしたら [例] <div class="section" id="album"> <h2>我が家のワンコ<h2> <ul> <li>一日の始まり <ol> <li><img src=***** alt="寝起きで犬の癖に寝ぼけている"></li> <li>朝、起きたばかりで少し寝ぼけている</li> <li>・・・・</li> </li> とか・・・ 大事なことは、HTMLはデザインためのものじゃなく、あくまで文書がどういう構成要素で成り立っているかをマークアップしていくものだということです。 スタイルシートは、その文書構造にしたがってデザインをしていくのです。 この区別さえできていれば、将来まったくデザインを変えるときも、HTMLの制約も受けません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
tableは、そんなことされたら意味がありません。 tableの目的は、列と行にそれぞれ、同じ種類の値を並べるためのものです。 たとえば、 2000年 2001年 2002年 2003年 男 42人 38人 45人 40人 女 38人 46人 28人 38人 と言う風に、これが 2000年 2001年 2002年 2003年 男 42人 38人 45人 40人 女 38人 46人 28人 38人 となったら困ります。それがtableの長所であり欠点なのです。すなわち、レイアウトのために用いてはならない理由でもあるのです。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 さらに、見た目のために表が用いられると、その表が大きなディスプレイのあるシステムで作られた場合、表を見るために水平スクロールを強いられることがある。 こうした問題を最小限に押さえるため、著者は文書の整形には表ではなくスタイルシートを用いるべきである。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より 「ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」と名指しで批判される理由です。 そのものすばり、そのようにずれないからtableの価値がありのですから、決してずれて表示させることは出来ませんし、たとえ出来たとしても(方法はあります)、それは、本来表であるとマークアップされているものを変更するのですから、誤りです。 もしそうする必要があるのでしたら、それは表ではありえないのですから、きちんと文書構造にしたがってマークアップして、スタイルシートでデザインしましょう。
お礼
表とレイアウトの違いをうまく理解できてなかったみたいです ご指摘ありがとうございます
補足
なるほど ではセルをボックスに見立ててスタイルシートで整えてあげれば大丈夫でしょうか？
お礼
回答と具体的なソースありがとうございます これをdivにかえてやれるか試してみたいと思います