• ベストアンサー

表の考えかた

ホームページビルダーを使っています。 どうも表については、いまいち理解しづらいのですが・・・ 次の考え方は合っていますか?(pixelで指定してます) [表の幅]は・・・ [罫線の幅] + [セル内の余白] + [枠の幅] + [セルの幅] ----------------------------- たとえば、2列の表の場合 [罫線の幅] =2 [セル内の余白] =3 [枠の幅] =2 [セルの幅] =100 ・・・と指定したとき、実際の幅は [罫線の幅]   =2 → 2×2=4 [セル内の余白] =3 → 3×4=12 [枠の幅]    =2 → 2×2=4 [セルの幅]   =100→ 100×2=200 以上合計すると[表の幅]は 4 + 12 + 4 + 200 = 220 ・・・ということになりますか?

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

  • ベストアンサー
  • mat-21
  • ベストアンサー率56% (91/162)
回答No.5

#4です。お返事が遅くなりました。 >逆に言うと、HTMLでの記述はいい加減になってしまうのでしょうか? いえいえ、考え方としては間違ってはいないかとおもます。「手段としてCSSもありますよ」って感じだと思います。実際にW3CではCSSの導入を推奨していますし、サイト全体をデザインするのであれば、CSSは不可欠なものといえるでしょう。 もし、インストラクターとしてお考えならば、そもそもHTMLの理論から入らなければならないかと思います。<h?>タグは見出し、<p>タグは段落、<table>は表という意味で...。基本的に段落の後に見出しは来ないし、デザイン上でのレイアウトのために<table>を使用することは、理論的に間違っています。では、どうすれば?となりますが、そのためにCSSが必要となります。タグは、基本的な構造をつとめ、デザイン(レイアウト)はCSSがつとめる。といった考え方になります。よって、<font~>や<center>や<~align=~>など、サイズや位置指定などは、デザインと考えられるので、CSSで設定します。また、それらのタグは、やはりW3Cでは、非推奨要素もしくは非推奨属性となっています。さらにこれからは、XHTMLでの作成を推奨することも予想されます。どうぞ、ご参考までに...。

wataruseken
質問者

お礼

お礼が遅くなりまして申し訳ありませんでした。 初心者向けのセミナーでは、あまり難しい部分に触れることはできないため、「こんな感じで・・・」と紹介だけしようとしたのですが、実際自分でやってみると不可解な部分が多く、理解していないとまずいなと思い確認しようと思いました。 できれば、CSSが使えればよいのですが、なにぶん初心者向けのコースなので時間もなく、結局、大体こんな計算でということで、やってしまいました。 現状が確認できとても参考になりました。

その他の回答 (4)

  • mat-21
  • ベストアンサー率56% (91/162)
回答No.4

もし正確なサイズ(ピクセル値)でTableを指定したいのであれば、CSSを使用されてはいかがでしょう。 具体的に記述しますと、以下の感じになります。 <head>~</head>の間に <style type="text/css"> <!-- .tableA{ width:200px; border-top:2px solid #000000; border-left:2px solid #000000; } .tdA{ width:100px; border-right:2px solid #000000; border-bottom:2px solid #000000; padding:3px; } --> </style> と設定しておき、その設定をclass指定でタグに入れます。 <table border="0" cellpadding="0" cellspacing="0" class="tableA"> <tr> <td class="tdA">セル左</td> <td class="tdA">セル右</td> </tr> </table> こうすることによって、指定したいサイズで表のサイズが固定できます。(と思うのですが....。)

wataruseken
質問者

補足

ご回答ありがとうございます。 CCSでの方法は正確にやるには便利ということがわかりました。 逆に言うと、HTMLでの記述はいい加減になってしまうのでしょうか? インストラクターとして教えるときに 「ビルダーの設定は、正しくは、計算して数値を入力してください」と、言えるようにしたいのですが・・・いろいろあって無理なのでしょうか?

回答No.3

テーブルの幅については参考URLの通りですが、実際は(開発者の見解の相違から)ブラウザによって見え方が異なります。

参考URL:
http://wakabano.cool.ne.jp/dream/layout/table/manual/man_01.html
wataruseken
質問者

お礼

お礼が遅くなりまして、すいませんでした。 リンク先はとても参考になりました。 セミナーでも紹介できそうです。 本当にありがとうございました。

wataruseken
質問者

補足

リンク先、とても参考になりました。 ブラウザによっても解釈が違うのですね

回答No.2

#1の補足に対する回答。 セル幅の設定については、先にインターネットを開き、文字のサイズを最大にしておいてからHPビルダを立ち上げ、大きな文字に合わせてセル幅を目分量で設定されるといいでしょう。 高齢者は大きな文字で閲覧する傾向があるので、私は横幅に関しては常に最大の文字サイズ環境でHPを設計しています。 若い人は中くらいの文字がお好みのようですが、隙間が空くのは辛抱してもらいます。セル内に複数行をべた書きする場合は、逆に最小の文字サイズ環境でセル設定すればいいでしょう。この方法だと、閲覧者が最大文字を設定しても、セルはちゃんと上下に伸縮してくれますからね。

wataruseken
質問者

お礼

お礼が遅くなりました。 ありがとうございます。 自分の場合は、文字サイズ「中」で「大」にした場合は崩れてもしょうがないと思っていたのですが、いろいろ考え方があるのですね。

回答No.1

1)寸法を指定せず2×2の表を作ってみます。 2)表が表示されたら、スクリーンコピーを行ないます。   (PrintScreenキーによります) 3)ペイントを開いてペーストします。 4)周囲の余計な部分をカットします。 5)画面を最大の8倍にズームし、グリッドを表示させます。   ([表示]→[拡大]→[グリッドを表示]) 以上の操作で納得が行くように調べられます。

wataruseken
質問者

お礼

答えをいただいて、もう1ヶ月もたってしまい、すいませんでした。 とても参考になるやり方です。使えますね。 ありがとうございました。

wataruseken
質問者

補足

なるほど! やってみます。 表の設定の考え方は、これでいいのでしょうか? 最後にセルの幅を設定するとき、やはり何ピクセルにするのがいいのか悩んでいます。 結構いい加減でも、それなりに見えるのですが、細かくレイアウトをしていこうとするときは、正確にやっていかないとずれたりしますよね! (ビルダーはスライスが使えない?・・ので・・)

関連するQ&A

  • 表の罫線。

    HPビルダーで表の罫線の幅を1ピクセルにして、 余白を2ピクセル、枠の表示を0ピクセルにして 罫線を黒にするにはやっぱり表の背景を黒にしますよね? それからセルの背景を白にすると黒い罫線の表が出来るんですが、 それだと背景が表のセルの中に透けて見えないんです。 そのセルの背景にページの背景を透かして(?)見せたいんです。 黒い罫線はそのまま残したいのですが・・・。 背景の固定をするスタイルシートは出来ています。 どうしたらよいですか?

  • 表の線が重なるところ

    表(5X5)を作ったのですが 外側の枠は1ピクセルなに 内側の線が重なる部分が2ピクセル(多分)になってしまいます。 表の線を全て1ピクセルにするにはどうしたらよいのでしょうか? 罫線の幅、セル内余白、枠表示(OFF)はすべて”0”になっています。 よろしくお願いします。

  • 表の列幅を設定できません。

    表の列幅を設定できません。 5行×4列の表を挿入します。 各セルに文字列を入力します。 その後に、「属性」ダイアログの「表」タブで、「表の幅」を650ピクセルにします。 そして「枠表示を1ピクセルにし、「セル内の余白」を5ピクセルにします。 また、「表の列」タブで、1列目:120ピクセル、2列目:120ピクセル、3列目:150ピクセルに設定します。 この設定で、1列目と2列目の幅が違います。 2列目が狭く、約半分ぐらいしかありません。 この理由は何が考えられるでしょうか。 どこか確認するところはあるでしょうか。 尚、モニターの解像度は、1024×768ピクセルにしています。 よろしくお願いします。

  • ホームページビルダー14で作成しています。表(セル)が固定できなくて困

    ホームページビルダー14で作成しています。表(セル)が固定できなくて困っています。 過去ログ等で確認したことことはすべて行ったつもりなのですがどうにもうまくできません。 新規作成から2X2の表を作りました。 (1)(2) (3)(4)と表記します。 (1)はwidth=200,height=70の指定、(2)はW=700,H=70、(3)はw=200,h=20、(4)はW=700,h=20です。 枠は表示としました。更に上記表の下に1X2の表を作ります。(5)(6) (5)は(3)と同じ、(6)は(4)と同じです。 画像をファイルから(1)に貼り付けます。(1)のセルよりも画像が大きいので一度表の外に貼り付け後 リサイズしてから(いきなり(1)に貼り付けるとセルが大きくなってしまうため)貼り付けます。 次に(3)に別の画像を同じ手順で入れます。 この時に上(2x2)の表のサイズが下(1x2)の表のサイズと変わってしまいます。 ソースを確認してもWとhの記述は最初と変わりありません。IEで確認すると枠がずれています。 また、セルの幅が200pixcel、枠1pの時、合計で200pなのですか?202pなのでしょうか 同様に200pと700pの幅の時の全体の長さは900p、903pどちらなのでしょうか? 属性やスタイルをいじってみたのですが良くわかりません。 列2つを囲んで指定し、そのwidthと各のセルのwの合計は同じにするのですか? もし枠幅が別の場合、上記では長さが合わないですよね? 表の中に表を作成するときに参考にしたいと思っています。

  • こんな表はつくれますか?

    こんにちは。 HPビルダー8でHPを作成している者です。実はこの表の正しい作り方が分かる方どうしたらいいのかアドバイスもらえないでしょうか?属性の変更でセルの幅を下記のように設定してもその表の中に文字などを入れるとすぐ変わってしまいます。現在はセルの幅しか設定していませんが、高さも設定すればセルが動かず安定するのでしょうか?? 本当に困っています!何方かヘルプお願いします! 表(横3×縦2) 左上225ピクセル 真ん中上350ピクセル 右上225ピクセル 左下144ピクセル 真ん中下512ピクセル 右下144ピクセル

  • ホームページビルダー14で挿入した表の幅を揃えたい

    まず、ホームページビルダー14で、表を挿入するため、左にあるツールから「表の挿入」をクリックします。 例えば、カレンダーだとすると、列が7、行が5になります。 その後、幅を均一に揃えようとして、挿入した表内の任意の位置で右クリック後、「表の属性」などから幅や高さなどをピクセルで揃えようとしても、均一にならないのです。 ホームページビルダー14で、幅を均一に揃えることについて詳しい方がいましたら、よろしくお願い致します。

  • 表の各セルの高さの設定について

    ホームページビルダーV9を使っています。 表を作成してそれぞれのセルに画像を入れようと思っているのですが、 セルの高さ設定が、よくわかりません。 まず、下記の「3列」の表を作り、 ■は空欄、「あいうえおか」に画像を入れました。 ■あい  うえお ■か■ 次に、表の幅、高さを設定。 一番左側列を縦に3セルとも「結合」しました。 一番右側列の「え」は、上のセルだけ残して、下のセルと「結合」しました。 そこで、 左の列、1セル「う」は、100%の高さ。 真中の列、3セル「あ」「え」「か」は、各33%づつ統一の高さ 右の列、2セルは、上のセル「い」20%、下のセル「お」80%の高さ にしたいのですが、編集画面も、プレビュー画面も、うまくいきません。 右の列がどうしても真中の33%に合ってしまい、 プレビューでみると、右列一番上セル「い」33%、下セル「お」66%の高さに見えてしまいます。 高さの設定数値を、「%」でなく「数字」で指定しても、うまく反映されません。 教えてください!

  • ホームページビルダーでのセル幅の調整

    ホームページビルダーで写真を掲載するため2行の表を挿入して1行目を2列にして、それぞれの列に写真を挿入します。 次に、2行目に3枚の写真を入れるため、1つのセルを横に分割してセルを3つ作り、3枚で1行目の2枚と同じ幅になるように、写真幅を縮小して挿入します。 この時にセルの幅が写真の幅より大きくなって、セルに大きな余白ができ、表自体の全幅も広がってしまい、セル幅を写真幅に合わせようとしてもまったくセル幅の調整ができません。 このような時にどうしたらセル幅が写真幅に調整できますか教えて下さい。

  • ビルダー8を使っています。表が崩れます。

    こんにちは。 今ホームページを作っているのですが、 表を使うとどうしてもうまくいきません。 標準モードで作っています。 表の列の幅を固定したいのですが、 それがうまくいきません。 今やってるのは、セルの幅の欄にピクセル数を入力しています。 何も入力していない状態でしたら、うまくその幅を表示してくれるのですが、 長い文字列や大きい画像を入れるとだめです。 画像は切れたままでいいのですが・・・。 ちょっと詳しい友人が、表を入れ子にすればうまくいく、と教えてもらったんですが、 入れ子にしてもできませんでした。 何重にも入れ子にしないといけないのでしょうか? よろしくお願いいたします。

  • ビルダー8の表

    表を作って、中を白にして罫線の幅を1ピクセルにしました。 1行目は、列は1列のみですが、2行目は分割して3列です。その最後の3列目に文章を打ち込みました。 そして、エクスプローラで見てみると、右端の罫線が表示されません。 ちなみに1行目の右端の罫線は表示されています。 意味が伝わっているか不安ですが、教えてください。

専門家に質問してみよう