-PR-

解決済みの質問

質問No.325031
困ってます
困ってます
お気に入り投稿に追加する (1人が追加しました)
回答数7
閲覧数713
テーブルをふちどる線
ホームページ制作初心者のものです。
Dreamweaver4でHPを作ろうと思い、様々なページを見ながら勉強中の者です。
最近よく見かけるのですが、テーブルで組んだと思われる枠に色のついた細い線を使ったものが多くみられるのですが、あれはどのようにしているのでしょうか??
テーブルの枠線といったら、あのグレーの物しかできないものと思っていたのですが...。
自分なりに考えて、テーブルの入れ子を駆使しして作ることはできたのですが、どうやら違ったやり方があるような気がします。
もしかして、とっても簡単なことなのかもしれませんが、ご存知の方、どうかお教えください。
Dreamweaverでできるのでしょうか?
投稿日時 - 2002-07-29 21:09:11

質問者が選んだベストアンサー

回答No.4
「枠に色のついた細い線を使ったもの」というのが立体感のない枠線のことでしたら、「入れ子を駆使した」やり方が正攻法です。

外側のテーブルのbgcolorを枠線にしたい色にし、内側のテーブルでcellspacingで枠線の太さ、セルの背景色は<td>でbgcolorを指定します。bgcolordで色をつけないと背景が透けてみえるtableの性質を利用し、枠線は下の色を見せているわけです。

**例**
<table border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#000000"><td>
<table border="0" cellspacing="5" cellpadding="0">
<tr><td bgcolor="#999999">セル1</td><td bgcolor="#999999">セル2</td></tr>
<tr><td bgcolor="#999999">セル3</td><td bgcolor="#999999">セル4</td></tr>
</table>
投稿日時 - 2002-07-29 22:44:24
この回答を支持する
(現在0人が支持しています)
お礼
ご回答ありがとうございます。
「入れ子を駆使」するやりかたもやっぱり、
”あり”なんですね。
なるほどー。セルスペーシングで線の幅がきまるんですね。
タグの勉強はほとんどしていないので、
これを機会に少し頭にいれてみようと思います。
ご回答ありがとうございました!
投稿日時 - 2002-07-30 21:04:31

ベストアンサー以外の回答 (6)

回答No.6
スタイルシートを使うと簡単です。
下のタグを<head>の直後あたりに入れておきます。

<STYLE TYPPE="text/css">
<!--
td{border-style:solid; border-width:1pt 1pt 1pt 1pt;border-color: #ff0000;}
-->
</STYLE>

そのあと普通にtableを使って、border=0 にしておけば細い赤線で枠ができます。
1pt 1pt 1pt 1pt のところにいろいろの数値を入れますと、影のようになって、立体的に見えたりします。

お試しください。

わたしのブラウザはIEは5.5でNNは6.22です。両方ともうまくできます。
投稿日時 - 2002-07-30 00:28:28
この回答を支持する
(現在1人が支持しています)
お礼
ご回答たいへんありがとうございます。
これはとっても簡単そうですねー!
まだ試してはいないので早速やってみようと思います。
投稿日時 - 2002-07-30 21:09:54
回答No.7
Dreamweaverで出来ます。
まずは見本を見てください。
と言っても、HTML文章を書くだけですが、

<html>
<head>
<title>無題ドキュメント</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

</head>

<body bgcolor="#FFFFFF" text="#000000" >

<table width="400" border="5" cellspacing="0" cellpadding="0" height="400" bordercolor="#000000">
<tr>
<td>
<table width="400" border="1" cellspacing="0" cellpadding="0" height="400" bordercolor="#FF0000">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
 </td>
</tr>
</table>
</body>
</html>

上に書いたものが「Dreamweaver」で簡単なテーブルを作ってしたものです。
上にあるものを「Dreamweaver」上で開いてみてください。
それでは解説を。

解説

1). まず、テーブルを作ります。「オブジェクトウィンドウ」→「一般」→「テーブルの挿入」をクリックして、テーブルを作ります。

2). 次に、テーブルの設定をします。「行数」(縦の枠数)と「列数」(横の枠数)を決め、「セル内余白」と「セル内間隔」は「0」にして、「幅」を、設定します。その後、「ボーダー」と有りますが、これがテーブルの枠線の元です。それを、決めた後、「OK」をクリックします。

3). 次に、そのテーブルが選ばれた状態にします。普通、2).の状態からそのまま来た場合は、そのままで、別の場所をクリックしてはなれたら、テーブルの縁の部分をクリックしてから「プロパティウィンドウ」で、「テーブル」となっているはずですから、空白になっている高さを入れます。(これは後ででも出来ます。)
それから、「プロパティウィンドウ」の下の方に「ボーダーカラー」と言うのが有りますから、その横の白い箱になっている(左下の方に黒い▼がついている)部分をクリックして、「ボーダーカラー」を選びます。
そうすると、縁になりました。

ちなみに、上のものをHTMLで表示すると分りますが、外側にあるテーブルが、黒で、内側にあるテーブルが赤となっています。

それぞれに、「ボーダー」の幅を変えて見ましたが、どうですか。

まだ分らない事があれば、補足でもいいですから書いてください。
私の知っている「Dreamweaver」のテクニックなら教えてあげましょう。

では、いいホームページが出来上がります様に。
以上
投稿日時 - 2002-07-30 15:19:23
この回答を支持する
(現在0人が支持しています)
お礼
ご丁寧な回答たいへんありがとうございます!
まだ試してはいないのですが、
Dreamweaverでuduki4さんのご講義のとおりやって試してみようと思います。
様々なやり方があるのですねー。
本当にためになります。
ありがとうございます!
投稿日時 - 2002-07-30 21:15:46
回答No.5
No.2につけたし
例の終わりの二行がぬけていました

**例はじめ**

<table border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#000000"><td>
<table border="0" cellspacing="3" cellpadding="0">
<tr><td bgcolor="#999999">セル1</td><td bgcolor="#999999">セル2</td></tr>
<tr><td bgcolor="#999999">セル3</td><td bgcolor="#999999">セル4</td></tr>
</table>
</td></tr>
</table>

**例おわり**
投稿日時 - 2002-07-29 22:54:27
この回答を支持する
(現在0人が支持しています)
回答No.3
テーブル・タグに、以下の属性を記入すれば可能。

bordercolor="color"枠線の色を指定します。
bordercolordark="color"立体的な枠線の暗い部分の色を指定します。
bordercolorlight="color"立体的な枠線の明るい部分の色を指定します。
投稿日時 - 2002-07-29 22:17:09
この回答を支持する
(現在0人が支持しています)
お礼
ご回答ありがとうございます!
もしかして、
暗い部分と、明るい部分を同じ色にすれば、
立体的に見えないフチ線ができるのかな!?
投稿日時 - 2002-07-30 20:59:40
回答No.2
私自身Dreamweaverは持っていないのですが、おそらく、作ったページのソースをみたり、そこに直接書き込んだりすることが出来ると思います。(できなかったら、ごめんなさい)

ソースを出したら、はじめの方に
<BODY></BODY>
というタグがあるはずです。その中で、テーブルを作りたいところに<TABLE>タグを挿入します。
下の見本は青を貴重とした陰影のあるものになっています。
「BORDER」のところでテーブルの枠線の太さを
「CELLPADDING」のところでテーブル内のスペースを
「BORDERCOLORLIGHT」のところで左と上の枠の色を
「BORDERCOLORDARK」のところで右と下の枠の色を
指定することができます。

<HTML>

<HEAD>
<TITLE>○○○</TITLE>

</HEAD>


<BODY>
○○○○…

<TABLE BORDER=5 CELLPADDING=5 BORDERCOLORLIGHT="deepskyblue" BORDERCOLORDARK="dodgerblue">
<TR><TH><NOBR>○○名</NOBR></TH><TH>◆◆日時</TH><TH>△△時間</TH><TH>◎◎項目</TH><TH>□□の方法</TH>
<TR>
<TD>○○○</TD>
<TD>◆◆◆</TD>
<TD>△△△</TD>
<TD>◎◎◎</TD>
<TD>□□□</TD>

</TABLE>

○○○○…

</BODY>
</HTML>

分からないことがありましたら、補足してください。
投稿日時 - 2002-07-29 21:37:25
この回答を支持する
(現在0人が支持しています)
お礼
ご回答ありがとうございました!
実は私の質問は、立体的ではない、細い線のことを
いっていたのですが、これを試してみて
おどろきました。
こんなコトも可能なのですねー!
これも使ってみたいです。
投稿日時 - 2002-07-30 20:42:04
6件中 1~5件目を表示
この質問は役に立ちましたか?
3人が「このQ&Aが役に立った」と投票しています
もっと聞いてみる

関連するQ&A

この他の関連するQ&Aをキーワードで探す

回答募集中

同じカテゴリの人気Q&Aランキング

カテゴリ
Webデザイン・CSS
-PR-
-PR-

特集

誰かに自慢したくなる生物学の問題集!

お城、ボート、ツリーハウス、ユニークな物件満載!

発見や気づきのある調査結果をお届け!

OKDreamsにあなたの「夢」を投稿して!
抽選で30組60名様に試写会ご招待!

このQ&Aの関連キーワード

同じカテゴリの人気Q&Aランキング

カテゴリ
Webデザイン・CSS
-PR-

ピックアップ

-PR-