人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

などです。

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

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


●質問者: ruijio
●カテゴリ:ウェブ制作
✍キーワード:GIF HTML webサイト サイト ソース
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● KaBuKi
●23ポイント

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


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


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


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


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

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


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

◎質問者からの返答

ありがとうございます。

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

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

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


2 ● 牛乳先生(tukihatu)
●23ポイント

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

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


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

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

・colspan、rowspanを極力使わない

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

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

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

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

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

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

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

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

・SEOをちょっと気にする

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


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

◎質問者からの返答

ありがとうございます。

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

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

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

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


3 ● neuromancer_sho
●22ポイント

釈迦に説法かもしれませんが、こうすれば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>
◎質問者からの返答

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

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


4 ● 牛乳先生(tukihatu)
●22ポイント

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

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

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

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

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

極力避ける例としては、

<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なんかで対応したほうが綺麗ですね。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ