テーブルデザインとは？素人向けに簡潔に教えてください

質問

テーブルデザインとは何でしょうか？
素人向けに説明希望です。

回答No.4

ganmo717

現在はテーブルレイアウトしません。

ウェブ制作を学ぶのであればHTML4.01とCSSを身につけて下さい。

回答No.3

sunwarship

テーブルデザインとは、
tableタグのオンパレードで構築する5～6年以上前の作り方のことです。

Tableというのは本来表を作るためのものです。
それを利用してページ全体をレイアウトして作っちゃう的なものです。

また、テーブルデザイン＝他の意味も込められてるのですが、わかりやすく言うと、

ページに表示されるもの全て一枚のHTMLに突っ込んでしまえ！
といった感じです。（画像もテキストも）

それに対して、CSS（スタイルシート）コーディングというのがあって、
こちらは、文書構造をしっかり考え、HTMLには必要なことだけを記述し、
CSSで見た目のデザイン的なものを整えようという感じです。

たぶんわかりにくいかと思いますが、
一番手っ取り早いのは、Firefoxというブラウザをインストールし、
テーブルデザインのサイト、CSSコーディングのサイトをそれぞれ表示して、
ツールバーの、表示→スタイルシート→スタイルシートを表示しない
を選択すると2つの違いが一目瞭然です。

テーブルの方はスタイルシート切ってもほぼ見た目かわりません。
（表組みが残ります）
CSSの方はテキストがずらーーっと縦に並びます。

Firefoxはこちら
http://mozilla.jp/firefox/

回答No.2

abril

読んで字のごとく、”テーブル”で”デザイン”する＝tableタグを使って全体のレイアウトをする、という事です。

table要素（タグ）が持つ論理的意味は「表」です。なので、本来は「内容が表であるもの（料金表、スペック表、メンバー表、実験データ表…etc.）」に使用する事が前提です。

なのですが、Excelなどの「表」組のイメージを見て頂ければおわかりの通り、「表」は縦横のグリッドに沿ってそれぞれのセルを配置するものですよね。
この”性質”がHTML上での領域の分割（カラム作り）に容易に流用できる為、本来の論理的意味を無視して単にレイアウトをする為にだけに使われる事が非常に多かったのです。これは、HTMLというマークアップ（＝それぞれの要素（タグ）が持つ論理的意味が予め決まっており、それに相応しい内容（テキストや画像）にのみその要素（タグ）を適用する）言語の本来の意味から大きく逸脱する事です。

例えば、こんな風にして全体のレイアウトができます。
↓
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td colspan="3">ヘッダー</td>
</tr>
<tr>
<td colspan="3">メインナビ</td>
</tr>
<tr>
<td>レフトナビ</td>
<td>メインコンテンツ</td>
<td>ライト（サブコンテンツなど）</td>
</tr>
<tr>
<td colspan="3">フッター</td>
</tr>
</table>

--------------------------------------------------
ヘッダー
--------------------------------------------------
メインナビ
--------------------------------------------------
レフトナビ　|メインコンテンツ　　　　　　　　　　|ライト
レフトナビ　|メインコンテンツ　　　　　　　　　　|ライト
レフトナビ　|メインコンテンツ　　　　　　　　　　|ライト
--------------------------------------------------
フッター
--------------------------------------------------

しかし、もう10年以上前ですが登場したのがCSS（スタイルシート）による、HTMLの方には論理的構造のみを記述し、デザイン的要素（カラム、色、大きさ、背景、ボーダー、余白…etc.）は全てCSSで制御する、という方法です。ブラウザ側の実装状況などにより浸透するのに時間がかかりましたがようやくこちらが主流になりつつある様です。

とはいえ、実際問題、tableレイアウトも決して少なくはないですね。個人のサイトのみならず、企業や明らかにプロが作ったサイトでも。主な理由は多分CSSを理解して使いこなすよりtableでレイアウトする方が”表面的には”楽だからだと思いますが。
ただ、いざメンテナンス・リニューアル、となった際にはCSSで適切に構築されたコンテンツの方が圧倒的に手間が省けます。CSSレイアウトであれば、HTML側を全く変えずに、CSSファイルの方だけを変える事で、全てのスタイルを変更する事も可能だからです。例えば、レフト、メイン、ライト、といった3カラムのレイアウトの左右の位置を入れ替える事も。tableレイアウトであればセルの位置を入れ替えしなければならないのでHTML側の修正が必須となりますが。

回答No.1

nori_007

何故テーブルデザインなんですか？
また、何か書籍は読まれましたか？
質問されるのは良いのですが、本やサイトで検索すればヒントがあります。その上で、理解出来ない事を聞いた方がより理解を深めることが出来ること思います。

テーブルデザインとは<table>タグを利用して、レイアウトすることです。
これで解りますか？