- ベストアンサー
テーブルの枠線の作り方
- テーブルを使った枠に色のついた細い線を作る方法について教えてください
- 最近よく見かけるテーブルの枠線について、Dreamweaverで簡単に作る方法を教えてください
- テーブルの枠に色のついた細い線を作るための簡単な方法を教えてください
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
「枠に色のついた細い線を使ったもの」というのが立体感のない枠線のことでしたら、「入れ子を駆使した」やり方が正攻法です。 外側のテーブルの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">セル１</td><td bgcolor="#999999">セル２</td></tr> <tr><td bgcolor="#999999">セル３</td><td bgcolor="#999999">セル４</td></tr> </table>
その他の回答 (6)
- uduki4
- ベストアンサー率42% (69/163)
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」のテクニックなら教えてあげましょう。 では、いいホームページが出来上がります様に。 以上
お礼
ご丁寧な回答たいへんありがとうございます！ まだ試してはいないのですが、 Dreamweaverでuduki4さんのご講義のとおりやって試してみようと思います。 様々なやり方があるのですねー。 本当にためになります。 ありがとうございます！
- void2000
- ベストアンサー率17% (41/229)
スタイルシートを使うと簡単です。 下のタグを<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 のところにいろいろの数値を入れますと、影のようになって、立体的に見えたりします。 お試しください。 わたしのブラウザはＩＥは５．５でＮＮは６．２２です。両方ともうまくできます。
お礼
ご回答たいへんありがとうございます。 これはとっても簡単そうですねー！ まだ試してはいないので早速やってみようと思います。
- liq
- ベストアンサー率38% (228/595)
No.2につけたし 例の終わりの二行がぬけていました **例はじめ** <table border="0" cellspacing="0" cellpadding="0"> <tr bgcolor="#000000"><td> <table border="0" cellspacing="3" cellpadding="0"> <tr><td bgcolor="#999999">セル１</td><td bgcolor="#999999">セル２</td></tr> <tr><td bgcolor="#999999">セル３</td><td bgcolor="#999999">セル４</td></tr> </table> </td></tr> </table> **例おわり**
テーブル・タグに、以下の属性を記入すれば可能。 bordercolor="color" 枠線の色を指定します。 bordercolordark="color" 立体的な枠線の暗い部分の色を指定します。 bordercolorlight="color" 立体的な枠線の明るい部分の色を指定します。
お礼
ご回答ありがとうございます！ もしかして、 暗い部分と、明るい部分を同じ色にすれば、 立体的に見えないフチ線ができるのかな！？
- Le-Livre
- ベストアンサー率41% (44/105)
私自身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> 分からないことがありましたら、補足してください。
お礼
ご回答ありがとうございました！ 実は私の質問は、立体的ではない、細い線のことを いっていたのですが、これを試してみて おどろきました。 こんなコトも可能なのですねー！ これも使ってみたいです。
- amagurichan
- ベストアンサー率42% (240/560)
スタイルシートを使ってできます。 Dreamweaverは使ったこと無いのでわかりませんが、 スタイルシートの設定はできるはず… 参考URLを見てくださいね。詳しく説明されています。 ソースをコピーして改造するのも手ですよね？
お礼
ご回答たいへんありがとうございます。 参考ＵＲＬ少し拝見しました。 破線の囲み枠なんかも可能なんですねー！ 詳しく読んで試してみようかと思います。 ありがとうございました。
お礼
ご回答ありがとうございます。 「入れ子を駆使」するやりかたもやっぱり、 ”あり”なんですね。 なるほどー。セルスペーシングで線の幅がきまるんですね。 タグの勉強はほとんどしていないので、 これを機会に少し頭にいれてみようと思います。 ご回答ありがとうございました！