WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:テーブルについて

ひさ[MAIL][URL][WriteDate : Mon Sep 11 00:03:14 2000]

HP作成についていろいろ勉強して、テーブルをレイアウトに
使うのはマズイと言うことを知りました。でも現在僕のHPの
TOPページは無理やりテーブルを使ってレイアウトしているんです。
テーブルを使わずに現在のレイアウトを維持する方法は
あるのでしょうか?


Qz[MAIL][URL][WriteDate :Mon Sep 11 03:04:59 2000]

気にすることはないと思います。
まずいとか、いろいろおっしゃってる方は多いですが、
そういう考え方もあると思う程度にしとくのでいいと思います。
ほんとうに、まずいなら、アクセス数の多いような大きなサイト(Yahooとか)が、
テーブルのレイアウトを使用しなくなるでしょう(笑)



カヅサツ[MAIL][URL][WriteDate :Mon Sep 11 09:55:24 2000]

ひさ 様

> テーブルを使わずに現在のレイアウトを維持する方法は 
> あるのでしょうか? 

そのためのスタイルシートです。

具体的な方法はケースバイケースなので、
そうですね、例えばテーブルでレイアウトを組んだ例を挙げて、
これを(正しい HTML と) スタイルシートで行うにはどうすれば?
みたいな質問に変えられると答えやすいかもしれません。

なると[MAIL][URL][WriteDate :Mon Sep 11 13:51:21 2000]

うるおぼえですが、CSSで正確な位置に画像や文字を配置できるように
なった事で、テーブルでレイアウトする事は控えるような流れがあったようです。
ただ、未対応のブラウザの事も考慮して、テーブルでレイアウトをする事が多いようですヨ。


カヅサツ[MAIL][URL][WriteDate :Mon Sep 11 17:20:20 2000]

なると 様

> 未対応のブラウザの事も考慮して、
> テーブルでレイアウトをする事が多いようですヨ。 

テーブル未対応 WWW ブラウザはどうしましょうか?

テーブルをレイアウトに使うべきでない、
という論調があるとして(ボクはこれに与しませんが)、
その最大の理由は、
「テーブルは「表」のための要素だから」
だと思います。

つまり、「BLOCKQUOTE は引用ブロックを表す要素であって
左右インデントのためのものではない」とか、
「EM は強調を表す要素であって斜体にするためのものではない」
と同じことだと思います。

ちなみにボクは「テーブルは「表」のための要素で
レイアウトに用いるためのものではない」
とイロイロ発言していますが、
「だからそんなことをしてはいけない」
とまでは言わないようにしていますハイ。


ひさ[MAIL][URL][WriteDate :Mon Sep 11 17:48:20 2000]

Qzさん、カヅサツさん、なるとさん。
いろいろな答えをありがとうございました。

カヅサツさんの返事に対して自分のHPで使っている
テーブルのHTMLを簡単な例をのせますのでカヅサツさん
ご指導のほうおねがいします。

<table width="300" height="200" border="2">
<tr>
<td width="20" bgcolor="#ff8800">左端</td>
<td width="160">
<table width="160" border="1">
<tr height="40"><td>TITLE</td></tr>
<tr height="20"><td>abc</td></tr>
<tr height="140"><td>efg</td></tr>
</table>
</td>
<td width="80">右から2番目</td>
<td width="20" bgcolor="#ff8800">右端</td>
</tr>
</body>

カヅサツ[MAIL][URL][WriteDate :Tue Sep 12 10:16:23 2000]

一応、完成しました。

<html lang="ja">
<head>
<title>TABLE TEST</title>
<style type="text/css"><!--
.main{
font-size: 16px;
border-style: outset;
border-sidth: 2px;
border-color: #FFF;
width: 300px;
height: 200px;
}
.1, .2, .3, .4{
border-style: ridge;
border-width: 2px;
height: 200px;
float: left;
}
.1, .4{
background-color: #F80;
width: 25px;
}
.2{
width: 165px;
}
.1 p, .3 p, .4 p{
padding: 70px 0 0 0;
}
.3{
width: 77px;
}
.2 p{
border-style: ridge;
border-width: 1px;
margin: 0;
}
#title{
padding: 10px 0 0 0;
height: 40px;
}
#abc{
height: 20px;
}
#efg{
padding: 50px 0 0 0;
height: 136px;
}
--></style>
</head>
<body>
<div class="main">
 <div class="1">
  <p>左端</p>
 </div>
 <div class="2">
  <p id="title">TITLE</p>
  <p id="abc">abc</p>
  <p id="efg">efg</p>
 </div>
 <div class="3">
  <p>右から二番目</p>
 </div>
 <div class="4">
  <p>右端</p>
 </div>
</div>
</body> 

コメントは別に投稿。


カヅサツ[MAIL][URL][WriteDate :Tue Sep 12 11:05:01 2000]

まず、HTML 要素は DIV と P しか使ってないので、
文書構造によって別の要素をお使いください。
例えば、p id="title" は h3 id="title" の方が
ふさわしいかもしれません。

CSS 未対応ブラウザでも確認してください。
左から順に表示されることになりますが、
テキスト的にその順番で良いのかどうか判断できなかったので。

例えば「左端」「右端」がただの飾りであった場合、
もっと別の手段になるでしょう。

boder の形状は適当なモノがなかったので別ので代用しました。

いずれにせよ、ここまで細かくレイアウトを指定するのは
オススメできません。閲覧者の環境によって、
ある程度の「ゆらぎ」を持たせた方が良いでしょう。


ひさ[MAIL][URL][WriteDate :Tue Sep 12 23:07:42 2000]

カヅサツさん本当に丁寧にありがとうございました。
これからも何かあったときはお願いします。
回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]