テーブルレイアウトをするにあたって、見本となるようなWEBサイト、もしくはノウハウを書いているサイト(もしくはノウハウそのもの)を教えてください。


例えば、
・スペーサーGifは使った(使わない)ほうがいい。
・tdのwidthは細かく設定した(しない)ほうがいい。

などです。

普通に目的のデザインをテーブルレイアウトで表現できますが、HTMLのソースもできれば見やすくきれいに作りたいと思ってます。

よろしくお願いいたします。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:2008/08/01 10:55:03
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答4件)

id:KaBuKi No.1

回答回数7ベストアンサー獲得回数0

ポイント23pt

テーブルレイアウトの光と影


今やテーブルレイアウトというものの多くは、コーディングの時間を省くため「やっつけ」で行われる作業のため、PhotoshopやFireworks等のツールによって書き出されるHTMLがある意味確実なものとなります。


ツールで一括して書き出してしまう以上、ソースを読むこと自体を前提としていないためソースの整然さは期待できませんが、逆に行ってしまえばツール側で完全に管理でき読む必要が無くなるため、ソースそのものの整然さを求める必要が無くなります。


スペーサー使用や細かい幅指定などは「せざるを得ない」ため使われているため、どちらかと言うなら「やらない方が良い」ということになります。


私見となりますが、テーブルレイアウトで出来ることはCSSでも一通りできますし、文書構造も正しくなります。

その点テーブルレイアウトはディスプレイの表示を優先しHTMLとしての正しい構造・整然さを切り捨てているもののため、そこにソースの整然さを求めるのは矛盾しています。


HTMLコードとしての見易さを追求されたいのなら、CSSレイアウトをお勧めします。

id:ruijio

ありがとうございます。

CSSならばある程度は組めるのですが、今回は諸事情でテーブルでやるしかないのです。

レイアウトでTableタグを使う時点で、正しいHTMLから離れているので、中身はどうでもいいようにも個人的に思うのですが、テーブルレイアウトでも「○○さんが書くテーブルレイアウトはとても読みやすく綺麗だ」というようなことがあるようなので、私も出来るだけ、可読性が高く綺麗なテーブルレイアウトのサイトを作りたいと思ったのです。

言葉足らずですみません。

2008/07/25 11:36:44
id:tukihatu No.2

回答回数180ベストアンサー獲得回数32

ポイント23pt

テーブルレイアウトであっても、綺麗だ、とかちゃんとしてる、とか言われるソースはあります。

その条件はいろいろあると思いますが、個人的には以下のものです。


・二重、三重テーブルを極力避ける(二重テーブル=テーブルの中にテーブル)

(今は少ないですが、昔の携帯ブラウザは二重テーブルが読めませんでした)

・colspan、rowspanを極力使わない

使わないとかは無理なのであくまでも極力。

・th、tdをきちんと使用する。tableの存在意義にあった作り方を心がける

thはヘッダの見出しとしてちゃんと使う、とか。

・ガチガチに横幅縦幅を固定する場合以外はspacerを使わない

・border、width、height、padding、margin、文字中央揃え、文字右揃えはcss指定で

width、heightはclassにするとぐちゃぐちゃになる可能性があるので直接でもよいかな…

・trにクラスは適応しない

ブラウザ互換があるので。

・SEOをちょっと気にする

http://m10.rounin.biz/archives/14


こんなところでしょうかねぇ…

id:ruijio

ありがとうございます。

このような回答を求めてました。

ただ、いくつか疑問なのですが、二重三重は極力避けるということは、1重のみでレイアウトということですよね。

1重だと、レイアウトの変更があったときに、下手したら作り直しという事態になりそうなのですが、もし1重で作っているサイト(特に企業サイト)をご存知でしたらURLを教えていただけないでしょうか?

やはり、スペーサーはあまり良くないのですね。参考になります。ありがとうございました。(もし、テーブルレイアウトできれいなサイトがあれば教えていただければさらにうれしいです、わがまま言ってすみません)

2008/07/29 12:43:34
id:neuromancer_sho No.3

回答回数28ベストアンサー獲得回数3

ポイント22pt

釈迦に説法かもしれませんが、こうすればclass=mainのテーブル内のtdタグだけにwidthを設定出来たりします。 http://dummy/


<style type="text/css">
.main td{width:100;}
.sub td{color:red}
</style>

<table class=main>
<tr>
<td>main</td>
<td>main</td>
<td>main</td>
</tr>
<tr>
<td>main</td>
<td>main</td>
<td>main</td>
</tr>
<tr>
<td>main</td>
<td>main</td>
<td>main</td>
</tr>
</table>
<table class=sub>
<tr>
<td>sub</td>
<td>sub</td>
<td>sub</td>
<td>sub</td>
<td>sub</td>
</tr>
</table>
id:ruijio

回答ありがとうございます。

ただ、残念ながら、私が求めていたのはukihatuさんのような回答なのです、すみません。

2008/07/29 12:44:29
id:tukihatu No.4

回答回数180ベストアンサー獲得回数32

ポイント22pt

コメントに書こうと思ったけどあいてないのでこちらに^^;

>・二重、三重テーブルを極力避ける

これは、心構えみたいなものです。

実際にテーブルレイアウトで、一つのテーブルで作ったら改変が大変だしすごいことになるのはご指摘どおりです。

「本当は、二重三重のテーブルはよくない」ということを覚えておいてもらえればよいかと。

極力避ける例としては、

<table>
<tr>
<td><table>
<tr>
<td>header</td>
</tr>
</table></td>
</tr>
<tr>
<td><table>
<tr>
<td>body</td>
</tr>
</table></td>
</tr>
</table>

↓

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

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

こんなイメージ?

テーブルレイアウトでは、どうしても二重にはなるので、そこから先、なるべく使わないように頑張ろう!という意識で望んでください。という心構え。

デザイン上、仕方ない部分もありますしね。


>スペーサーはあまり良くない

見栄え的によくないですよね。

ただブラウザバグで、cssからwidthを指定しているんだけどそれ通りにならない場合があったりします。

これはpaddingとか英文字とかいろいろな条件があるんですが、widthが細かい表などは注意ですね。

大枠にスペーサーを入れるのはナンセンスですね。widthでも同じ効果が得られるのでそっちを使いましょう。

あと、tdが空だとborder線が表示されないからスペーサーを入れる、というのも無しです。空白文字& nbsp;を入れたほうがまだいいかと。


>企業ページ

http://shop.alc.co.jp/top/?xp=740&xm=707&xr=1&rfcd=SA_c_home_sho...

綺麗という話ではないですが、こことかはハイブリットタイプですね。(table+css)

全部テーブルで組むなら、divの部分をtableに、というイメージでしょうか。

真ん中あたりの、一押し教材の部分。こういった二重テーブルは極力避けて、paddingなんかで対応したほうが綺麗ですね。

ただ綺麗するほど、基本的に修正するとき大変になるので、臨機応変に対応すればいいかと。

  • id:tukihatu
    コメントあいたのでさらに補足。
    >綺麗という話ではないですが
    自分から見ると、まあ綺麗だと思います。このサイト。
    テーブルでW3Cとか気にするのは難しいので、あくまでも程ほどに。

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

トラックバック

  • 2008年7月25日(金) クライアントサイド技術 MOONGIFT: &#187; JavaScriptで実現するMVCフレームワーク「JavaScriptMVC」:オープンソースを毎日紹介 JavaScript 点数制限なしで切り替え対応させるにはどう
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

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

回答リクエストを送信したユーザーはいません