Webページの作り方について質問です。表を作ります(例えば9列×5000行)


この表の記述で、一番上の行において

<td width="100">(文章)</td><td width="150">(文章)</td>・・・・・・・<td width="20">(文章)</td>

のようにセルの幅を指定して配置しました。しかし、2行目以降に来る(文章)の長さによって、表の幅が異なってしまいます。これを無理やり幅を指定するためには、どうしたらいいでしょうか?


変なレイアウトになってしまって困っています。よろしくお願いします。

回答の条件
  • 1人2回まで
  • 登録:2007/06/05 19:37:51
  • 終了:2007/06/12 19:40:12

回答(3件)

id:kn1967 No.1

kn1967回答回数2915ベストアンサー獲得回数3012007/06/05 19:56:15

ポイント27pt

一番長い(文章)に合わせられてしまいますので

(1)全ての行のタグに幅を指定する
(2)あらかじめ一番長くなる(文章)の行を探しておいて、その行のタグに幅を指定する

のいずれかになります。


しかしながら、いずれの場合もブラウザがレンダリング(HTML文書を画面に出す事)するために膨大な時間を費やす事になりますので、出来れば下記の様に最初に宣言してしまう方法をお勧めします。

この方法だとブラウザはレンダリングの最初の段階で幅等のスタイル設定を済ませてしまいますので、以後の作業を高速で処理してくれます。

<table>
    <caption>表題</caption>
    <colgroup>
        <col style="width=100">
        <col style="width=150">
              ・
              ・
        <col style="width=20">
    </colgroup>
    <thead>
        <th>見出し1</th>
              ・
              ・
        <th>見出しn</th>
    </thead>
    <tbody>
        <td>文章1</td>
              ・
              ・
        <td>文章n</td>
    </tbody>
</table>
id:ReoReo7

なるほど。早速やってみたいと思います。ありがとうございます。

2007/06/05 20:21:42
id:llusall No.2

llusall回答回数505ベストアンサー獲得回数612007/06/05 20:25:54

ポイント27pt

いわゆるカラム落ちというものでしょうか?

こちら参考になりますでしょうか?

長~いURLによるカラム落ち、に対処する - Archiva

id:ReoReo7

ありがとうございます。

2007/06/06 01:09:05
id:Yota No.3

Yota回答回数453ベストアンサー獲得回数282007/06/06 09:52:17

ポイント26pt

スタイルシートで指定すればいいような気がしますが。

<head>

<style type="text/css">

td { width : 150px}

</style>

</head>

  • id:ReoReo7
    失礼しました。(文章)の長さによって異なるのは、表の幅ではなく各セルの幅でした。
  • id:kn1967
    どういった内容のものか存じませんが5000行もの表って見るの辛くないですか?

    ウィンドウに表示される行数が50行だと仮定すれば
    100ページ分もスクロールしなければならない訳ですよね?

    その長大な表の中から必要な情報を絞りだすために、
    どれだけの時間が必要になるかを考えておられますか?

    ブラウザの持っている検索機能を使うのだとしても、
    それならばWEBサーバー側で検索した結果だけを返してあげるほうが
    見る側としての負担が減りますよね。

    表の本来の意味は一覧性ですから一度に大量のデータを一度に表示するのではなくて
    必要な部分に絞り込んで表示するような仕組みを組み込むとか、
    最初から表を分けるという方向で考える事をお勧めしますけど、
    どうしても5000行を一度に表示しなければならないのでしょうか?

    今一度、考え直してみてください。
    (表が小さくなる場合でも回答した内容は有効です)
  • id:ReoReo7
    ありがとうございます。
    実際には1000行程度ですが・・・。それでも長いですね。データベースの知識が無いので、このようなことになってしまいました。

    ちょっと勉強してみる必要がありそうです。
  • id:kn1967
    MySQLやPostgreSQLなど、最近ではWEBでもデータベースは重要な地位を占めてますが、
    絶対にデータベースで無ければならないという訳でもありませんので、
    データベースに関しては後々、時間(予算)があればという事で
    よろしいかと思いますよ。

    それよりも、現実的な策(最初から表を分けるという方向)で考えてみてください。

    実際には1000行という事であれば、とりあえずの対応として100行x10頁にぶった切ってはどうでしょうか?
    ぶった切る方法としては、コード番号や通し番号等で単純に切るのが面倒がなくて良いですが、
    ほかに何か分けられそうな項目があれば、それで分けても良いかと思います。
    その結果として、1頁目は50行だけど2頁目は150行になったということであれば、それはそれで説明付く事だと思います。
  • id:kn1967
    開いていただいて再確認できたのですがスタイル指定の部分は
      width=100
    ではなくて
      width:100
    ですね。申し訳無いです。
  • id:ReoReo7
    kn1967さん

    了解です。

    ただ、一覧性を重視して検索ができるウインドウを置いておこうと思いますので、ぶった切らないほうがいいかな(素直でなくてすみません。)と検討中です。



  • id:kn1967
    今後も情報は増えていく事でしょうから、
    早い段階から対応方法を考えておいたほうがよろしいでしょう。

    ぶった切ってページを振り分けしておけば、
    後になってデータベースに置き換えた時でも、
    WEBサーバーのリダイレクトを使う事によって、
    『表面上は既存のままで中身をデータベースにそっくり入れ替える』なんて事も簡単にできます。

    具体例としては、教官をクリックすれば、その教官の担当科目のページに移動するといった方向ではどうでしょうか?
  • id:ReoReo7
    その案は非常によいですね・・・。
    ただ、当人に残念ながらそこまでの技術がありません。
    また、勉強の上更新していきたいと思います。

    ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません