【 ＨＰ作成質問箱 】

【ＨＰ作成質問箱/詳細】　一覧 / 詳細

　 No.9973　テーブルによるページ構成

[ＥＳ] [ブラウザ]　 09/06/23 (火) 17:35

たびたびすみません。
フレーム処理だといけないという結論にいたり、
ページ構成を変えようと思います。
すべてをテーブルにして、セルとしてそれぞれ内容を描いていこうとしましたが、また問題が。

セルの一つとして表があるのです。
つまり、テーブルの中にテーブルの記述ができてしまって。
そうすると、おおもとのテーブルにあてはめたい色とかが、
中のテーブルの記述が出てきたところで終わってしまって。
テーブルの中にテーブルというのはできないのでしょうか。

意味通じますでしょうか。説明べたですみません。
アドバイスお願い致します。

▼

▼

▼

　 No.9974　Re:テーブルによるページ構成

[atom] [ブラウザ]　 09/06/23 (火) 18:04

いや、ちょっと意味がわかりません。

テーブルの中のテーブルは何も問題ありませんし、特に指定がなければ、外側の指定がそのまま生きてます。

<table border="1" style="background: #ccffff">
<tr>
<td>

<table border="1">
<tr>
<td>
ちちちち
ととと
</td>
</tr>
</table>

</td>
</tr>
</table>

ちちちち ととと

▼

▼

▼

　 No.9975　Re^2:テーブルによるページ構成

[ＥＳ] [ブラウザ]　 09/06/25 (木) 14:44

> テーブルの中のテーブルは何も問題ありませんし、特に指定がなければ、外側の指定がそのまま生きてます。

すみません、こちらの記述ミスでした。
ミスをなくさないといけませんね。。
ただ、その問題は、記述ミスだったということで解決するのですが、
テーブルですべて囲もうとすると、まわりに余白ができてしまいました。
すべてをborder指定してみたら、そのようになったのです。
あれ、でもこのatomさまお作りのページはそんなことないですね。テーブルだと駄目？！
また間違っているのでしょうか(^_^;)。

とりあえず、質問の内容については
上記のような原因で解決いたしましたので、ご報告させていただきます。

▼

▼

▼

　 No.9976　Re^3:テーブルによるページ構成

[atom] [ブラウザ]　 09/06/25 (木) 15:15

これもまた内容がよくわかりませんが、
初心者に多いのが、妙な所に全角空白が入ってると、テーブルの表示が崩れたりします。

こちらとしては普通に行えることができない時は、言葉だけではわかりません。
実際のページを見せていただくのが一番だと思います。

※追加
ひょっとしてページ周りにある微妙な隙間のことでしょうか？
もしそうなら、スタイルシートで次のようにページマージンを「0」にすることで解決します。

body{ margin: 0; }

▼

▼

▼

　 No.9977　Re^4:テーブルによるページ構成

[ＥＳ] [ブラウザ]　 09/06/26 (金) 16:06

教えていただいたもの正解です。
よくわかりますね。私がボケてるのでしょうか。。

現況を添付します。上がＣＳＳ記述分。後半がhtml記述分です。

今困っていることは、テーブルのなかのテーブルがあるところの大きさです。
ｔｄとしての幅を80ｐｘくらいに、また中のテーブルをもっと右に持っていきたいのですが、動きません（泣）

どこがおかしいのでしょうか。

▼

▼

▼

　 No.9978　Re^5:テーブルによるページ構成

[atom] [ブラウザ]　 09/06/26 (金) 16:50

tableには無条件で隙間を作る設定が入ってます。

cssで設定するなら「table」に「border-collapse: collapse;」を追記してください。

タグで次のように指定したのと同じです。
<table cellspacing="0">

それと、隙間を開けたくないなら、tdに背景色を指定するのではなく、table自体に背景色を設定するという手もあります。

▼

▼

▼

　 No.9979　Re^6:テーブルによるページ構成

[atom] [ブラウザ]　 09/06/26 (金) 17:05

上記（No.9978）の返信はページ全体のテーブルの僅かな隙間もなくす方法でした。

今回の質問。
cssがちょっと込み入ってますね。

できるだけ不要な設定を無くし、シンプルにした方がいいですよ。

tdとしての幅を80pxにしたいということですが、このテーブルは「width:700px」と指定されてます。
セルが6つしかありませんので、ひとつのセル幅は
700px ÷ 6 ＝ 約116px　となり、
セルのwidthを指定しても無視されます。

便利な機能ですが、
tableの幅を指定して、セル幅を自動にするか、
table幅を無指定にして、セル幅を指定するか、
のどちらかにしないと設定がぶつかってしまいます。

それと、tableを右にずらせたいのなら内側のテーブルに「margin-left:200px;」などと指定すればいいでしょう。
margin-rightはありますが、margin-left指定はありません。
margin-rightの指定が単なるミスなら、削除すべきでしょう。
左詰めであればmargin-leftだけで充分でしょう。

▼

▼

▼

　 No.9981　Re^7:テーブルによるページ構成

[ＥＳ] [ブラウザ]　 09/06/29 (月) 15:39

返信遅くなり申し訳ありません。

> できるだけ不要な設定を無くし、シンプルにした方がいいですよ。

そうなのでしょうね。。ただ、何が不要か判断するのが難しいです。

> tdとしての幅を80pxにしたいということですが、このテーブルは「width:700px」と指定されてます。
> セルが6つしかありませんので、ひとつのセル幅は
> 700px ÷ 6 ＝ 約116px　となり、
> セルのwidthを指定しても無視されます。

すみません、ここは”幅”ではなく、”高さ”でした。
中のテーブルの高さは40ｐｘ指定、そのテーブルが入るtdは
80ｐｘに指定したいのですが、どう見ても80ｐｘ以上に
なっている状況です。

> それと、tableを右にずらせたいのなら内側のテーブルに「margin-left:200px;」などと指定すればいいでしょう。
> margin-rightはありますが、margin-left指定はありません。
> margin-rightの指定が単なるミスなら、削除すべきでしょう。
> 左詰めであればmargin-leftだけで充分でしょう。
>
左詰めでなく、右詰めを教えてくださったのですよね。
marginの説明は何度読んでもたまに？なことをしてしまいます。
left指定ですね、わかりました。

▼

▼

▼

　 No.9983　Re^8:テーブルによるページ構成

[atom] [ブラウザ]　 09/06/29 (月) 18:44

何が不要かがわからないなら、ひとつひとつ、削除したり入れたりしていけばいいでしょう？

入れても外しても変わりないのであれば必要ないということです。
タグだけに限らず、細かい設定もひとつひとつチェックしてみればいいだけの事です。


> 中のテーブルの高さは40ｐｘ指定、そのテーブルが入るtdは
> 80ｐｘに指定したいのですが、どう見ても80ｐｘ以上に
> なっている状況です。

それなら「td.top-l2」のcssに「height:80px;」を追加すればいいだけです。


> 左詰めでなく、右詰めを教えてくださったのですよね。

違います。
現在左詰めになってるから「magin-left」は効果があっても「margin-right」は指定しても意味がないでしょう？
って言う意味です。

「margin」とは余白のことでその端からどれだけの余白を作るか？という意味です。
左詰め（左に寄ってる）なのに、その右側にマージン（余白）を指定しても意味がないでしょう？
という意味です。

わからなければ、簡単なサンプルを自分で作り、簡単なcssを設定して確認すればいいのです。
言葉で理解できないなら、ご自分で設定し、体で覚える必要があります。

▼

▼

▼

　 No.9985　Re^9:テーブルによるページ構成

[ＥＳ] [ブラウザ]　 09/06/30 (火) 16:27

> タグだけに限らず、細かい設定もひとつひとつチェックしてみればいいだけの事です。

がんばります！

> > 中のテーブルの高さは40ｐｘ指定、そのテーブルが入るtdは
> > 80ｐｘに指定したいのですが、どう見ても80ｐｘ以上に
> > なっている状況です。
>
> それなら「td.top-l2」のcssに「height:80px;」を追加すればいいだけです。

そのとおりでした。入れてるつもりでしたが、抜けていました(^_^;)


> > 左詰めでなく、右詰めを教えてくださったのですよね。
>
> 違います。
> 現在左詰めになってるから「magin-left」は効果があっても「margin-right」は指定しても意味がないでしょう？
> って言う意味です。
>
> 「margin」とは余白のことでその端からどれだけの余白を作るか？という意味です。
> 左詰め（左に寄ってる）なのに、その右側にマージン（余白）を指定しても意味がないでしょう？
> という意味です。

詳しく書いていただいてありがとうございます。
やっと意味を理解できました。不出来ですみません。

> 言葉で理解できないなら、ご自分で設定し、体で覚える必要があります。

練習あるべし、ですね。
なかなかＨＰ作りに時間を割く余裕がありませんが、
忘れない程度には作っていかないと。

いろいろありがとうございました。
なんとかページ構成はできた模様です。
ここに具体的な内容をどう記述していくか、
また壁にブチあたりながらやっていくことになるでしょう。
質問もさせていただくと思いますが、よろしくお願いいたします。

▼

▼

▼

　一覧 / 詳細