締切済み

ＨＴＭＬで並べるテーブルに関して

2012/02/21 15:10

いまホームページをつくってるんですがブログみたいに両サイドにメニュー真ん中に主な書き物という形式でテーブルを三つ横に並べて書いたんですが真ん中の書きものが増えるにしたがって、両サイドのメニューの文字列がどんどん移動していきます。どうやったらブログのように両サイドのボックスの位置、そして中の文字の位置を維持できますでしょうか？教えてください＞＜

lapapa_patdzoni
お礼率31% (14/44)

HTML
回答数3
ありがとう数0

回答全件

後の質問が締め切られているようなので、こちらにサンプル書いておきます。…

2012/02/22 19:37

もっとも大事なことですが、「ページレイアウトの目的で表を用いる。 (…

2012/02/21 19:54

ページの前後がどうなっているのかわかりません。ですので一般論ですが、…

2012/02/21 15:43

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

みんなの回答

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

2012/02/22 19:37 回答No.3

後の質問が締め切られているようなので、こちらにサンプル書いておきます。とにかく最初の第一歩は、良い見本を元に、見よう見まねで書いてみることです。そのとき、そのサンプルが良いかそうでないかは ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェックしておくこと。　下記サンプルは、上記で検証済みです。HTML4.01strictですから、将来のHTML5にもそのまま変更できます。tableを含め、非推奨な書き方は一切していません。　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> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="./">Top</a></li> ＿＿＿＿<li><a href="./book">Books</a></li> ＿＿＿＿<li><a href="./profile">Profile</a></li> ＿＿＿＿<li><a href="./contact">Contact</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<div class="news"> ＿＿＿<h2>新着情報</h2> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿＿<h2>本文見出し</h2> ＿＿＿<p>記事</p> ＿＿</div> ＿＿<div class="tableContent"> ＿＿＿<h3>新着情報</h3> ＿＿＿<ol> ＿＿＿＿<li><a href="#top">ページトップへ</a></li> ＿＿＿＿<li><a href="#section1">１章</a></li> ＿＿＿＿<li><a href="#section2">２章</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿</div> </body> </html>

全文を見る

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

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

2012/02/21 19:54 回答No.2

もっとも大事なことですが、「ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」は、「単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」と、繰り返し強く否定されています。　両サイドのメニューの内容がわかりませんが、 <div class="section"> 　<h2>見出し</h2> 　<div class="section"> 　　<h3>見出し</h2> 　　<p>記事</p> 　　<p>記事</p> 　</div> 　<div class="section"> 　　<h3>見出し</h2> 　　<p>記事</p> 　　<p>記事</p> 　</div> 　<div class="section"> 　　<h3>見出し</h2> 　　<p>記事</p> 　　<p>記事</p> 　</div> 　<div class="tableContent"> 　　<ol> 　　　<li></li> 　　</ol> 　</div> 　<div class="siteNews"> 　　<h4>見出し</h4> 　</div> </div> のようにきちんと文書構造をマークアップして、スタイルシートでデザインしましょう。左に置こうが、右に置こうが・・後でデザインできます。　参考にされている参考書？がとても古いようです。tableでのデザインが否定されて12年以上たちます。

全文を見る

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

szk9998
ベストアンサー率45% (1024/2235)

2012/02/21 15:43 回答No.1

ページの前後がどうなっているのかわかりません。ですので一般論ですが、 TDタグの幅の指定は行っていますか？ <td style="width:100px"> ※数値は自分で試してみる。のように幅を3列ともに指定してやれば、それ以上には広がりません。（普通の場合は）ただし、いろいろな事情で上記だけでは幅を維持できない場合も多々発生します。あとは、その場その場で個別に対処していくしかないですね。

全文を見る

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

関連するQ&A

テーブルについて
初歩的だと思いますがわからないので教えてくださいm(__)m 同じ行に画像とメニューを置こうとしてテーブルを横に並べて2個配置しました。それで左のテーブルには画像を右のテーブルにはメニューとならべてメニューは右はじに設置したかったので右に寄せました。で私のPCで確認するとちゃんとなってたのですが、ワイド型のPCで見るとメニューのテーブルが真ん中までしかいってなくて格好がわるくなってました。たぶん、右テーブルのサイズが悪いと思いますがどのPC（ブラウザ）でもメニューが右はじにくるようにしたいです。回答よろしくお願いします。なおホームページビルダーを使って作りました。 --------------------------------------------------------------------- | --------------------------- |---------------------------こっこに | | | | |すきまが | | | | top|できます | -------------------------- ---------------------------|
- ベストアンサー
- HTML
テーブルのレイアウトがうまくいきません
DreamweaverMXで簡単なホームページを作っています。テーブルをつかってレイアウトをしようと思いましたが、思うようになりません。やり方が間違っているのでしょうか？まず大枠で１行３列のテーブルを作り、幅だけ800pに指定。（高さ指定はしていません）両端の列はそれぞれ幅だけ180pに指定。で、そのそれぞれの列の中にまた必要なテーブルを作ってレイアウトしようとしてるのですが一番左の列の中にテーブルが３つ入っていて一番縦長になっています。真ん中と右の列にも必要なテーブルや画像を入れているのですが左の列が長いせいかそれぞれの列の一番上がそろいません。左の列の長さに合わせて一番大外のテーブルの高さが決まってしまってしまいますが、真ん中と右の列の中のテーブルたちは左の列の高さの真ん中に配置されてしまいます。方法がまずいのでこうなってるのだとは思いますが、本を見ながら勉強しつつやっていますが思うようにいかないので質問させてもらいました。　一番上をツライチに合わせるにはどうすればいいのでしょうか？　というか上記の方法の悪いところを指摘していただければと思います。よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
テーブル内a:hoverでちらつく[html]
テーブルにテキストを書き、そのテーブルにマウスが当たったらテキストの文字位置をずらすという方法でホームページを作っているのですが、テーブル内をマウス移動させると、文字がちらついてしまいうまくいきません。ソースは以下です。 <HEAD> <style type="text/css">  </style> </HEAD> <BODY> <table> <tr> <td class="box"><A href="#">テスト1</A></td> </tr> </table> </BODY> 何が間違えているのかわからず困っています。ご回答お待ちしております。お願いします。
- 締切済み
- ホームページ作成ソフト
フレームなどのＨＴＭＬについて
エディタなどを使って、ＨＰを作成しようとしています。自分でいろいろ配置しながらソースを確認してやってるんですが、どうにもうまくいかないので、２つほどアドバイスお願いします。 (1)例えばテーブルを１つ作ったとして、その横に文章を書く時、テーブルの1番下のところにしか文字が書けません。また同じようなことだと思うんですが、テーブルの横に少し間を開けてテーブルを作成しようとしても、元あったテーブルの下へ出来てしまい、横に並べて作ることが出来ません。どうやったら作れるんでしょうか。ソフトは「alphaEDIT+」を使用しています。タグでもいいので教えて頂けると嬉しいです。 (2)ＨＰのベースを作る際、この教えて！gooみたいに、横にメニューを置いて作りたいと思います。その時、ここと同じようにメインの部分をスクロールさせた時、一緒にメニューも動くようにしたいです。(ブログによくある感じで) これがノンフレームってやつなのか＾＾；こういう時は、メニューとメインを別々に作ってタグかなんかでくっつけて表示させるんでしょうか？またもしそうなら、普通のフレームで作ったのと同じように、各ページを表示させる時「target」とかで表示させる場所をメインの部分にしておけば、メニューは自動的に表示されるんでしょうか？初心者なので質問が意味不明かもしれませんｍ(＿＿)ｍまた、こういうＨＴＭＬが分かりやすく書いてあるようなオススメサイトがあれば教えてほしいです。よろしくお願い致します。
- ベストアンサー
- その他（インターネット・Webサービス）
HTMLのテーブルデータの一部を固定しかつ一部をフレキシブルにしたいの
HTMLのテーブルデータの一部を固定しかつ一部をフレキシブルにしたいのですがどのようにしたらいいでしょうか？画像のようにやりたいのですが・・・一番左端は10pxで固定します。 Xのテーブルデータはいれる文字列の長さによってフレキシブルにします。 Yは画像を入れるのですがXの文字列とすぐ隣合うようにしたいのです。その横の140ｐｘと20ｐｘのデータは完全に固定として上から下の行までまっすぐに通したいのですどのようにしたらいいでしょうか？
- ベストアンサー
- HTML
テーブルを並べる方法？？
ホームページビルダーV6.5を使っています。下記のような感じ(わかりやすいようにURLお借りしました) にテーブルを横3列、縦4列に並べたいのですが、どうすればいいでしょうか？よろしくご伝授お願いします。 http://pomo.vis.ne.jp/index.html
- ベストアンサー
- ホームページ作成ソフト
ちょっと複雑なテーブル
テーブルについて質問です。画像の横に2つの列を作りうえに文字を、下には画像と文字を表示させたいと思います。どうすればよろしいのでしょうか？よろしくお願いいたします。
- ベストアンサー
- HTML
ホームページ　テーブル作成について
ホームページにてテーブルを作成していますが、以下の方法をどなたか教えていただけないでしょうか？ (1)テーブル内の文章を好きなところで改行する方法。 (2)上が3つ下が2つのテーブルを作成する方法。 (3)横に1列、その横に2×2のようなテーブルを作成する方法。タグ初心者です。どうぞ、よろしくお願いいたします。
- ベストアンサー
- その他（インターネット・Webサービス）
tableの横の位置を変えるには？？
<div> <table> <tr><td>あ</td><td>い</td></tr> <tr><td>う</td><td>え</td></tr> </table> </div> が仮にあったとして、これを外部ＣＳＳファイルでどこかのタグに text-align:center を適用させ、テーブルの位置を真ん中にさせたい（表のような使い方です）んですが、自分でやってみたら、divとtableにＩＤとclassで両方試して適用させましたができませんでした。この表の横の位置をブロックとしてとらえて移動させることはできるでしょうか？？
- ベストアンサー
- HTML
１つのテーブルに任意の文字を表示させたい
１行１列のテーブル（テキストボックスみたいなもの）を作っておきます。テーブルの横もしくは下にリンクを張った？文字又は画像にマウスが乗ると用意してある任意の文字がテーブルに表示させる事は出来るのでしょうか？多分ＪＡＶＡスクリプトで実現するものだと思うのですが・・・？イメージとしてはリンクさせる文字の上にカーソルが乗るとリンク先の簡単な説明が表示され、クリックで目的ページに飛ぶというようなものです。リンクによって表示される内容が違いますが、表示されるテーブルは同じものを使いたいのです。質問の内容も判りずらく、失礼な質問ですがよろしくお願いします。
- ベストアンサー
- JavaScript