テーブルの枠線の作り方
- テーブルを使った枠に色のついた細い線を作る方法について教えてください
- 最近よく見かけるテーブルの枠線について、Dreamweaverで簡単に作る方法を教えてください
- テーブルの枠に色のついた細い線を作るための簡単な方法を教えてください
- ベストアンサー
テーブルをふちどる線
ホームページ制作初心者のものです。 Dreamweaver４でＨＰを作ろうと思い、様々なページを見ながら勉強中の者です。 最近よく見かけるのですが、テーブルで組んだと思われる枠に色のついた細い線を使ったものが多くみられるのですが、あれはどのようにしているのでしょうか？？ テーブルの枠線といったら、あのグレーの物しかできないものと思っていたのですが．．．。 自分なりに考えて、テーブルの入れ子を駆使しして作ることはできたのですが、どうやら違ったやり方があるような気がします。 もしかして、とっても簡単なことなのかもしれませんが、ご存知の方、どうかお教えください。 Dreamweaverでできるのでしょうか？
- omiyage
- お礼率84% (155/184)
- CSS
- 回答数7
- ありがとう数9
- みんなの回答 （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を見てくださいね。詳しく説明されています。 ソースをコピーして改造するのも手ですよね？
お礼
ご回答たいへんありがとうございます。 参考ＵＲＬ少し拝見しました。 破線の囲み枠なんかも可能なんですねー！ 詳しく読んで試してみようかと思います。 ありがとうございました。
関連するQ&A
- テーブルの中にテーブルをつくるの利点は？
現在、ホームページ制作を勉強中なのですが、 人のページのソースを見るとよくテーブルの中に テーブルをたくさん入れているのを見かけます。 普通にセルで制作するのに比べて テーブルで入れ子上にする利点は何でしょうか？ よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
- DREAMWEAVERでテーブルに枠線
DREAMWEAVER MXでテーブルに枠線を付けたいのですが、テーブルを入れ子にする以外の方法はあるのでしょうか？ 1つ1つのセルにではなく、テーブル全体の外側にだけ付けたいのです。 ボーダーですとセルの1つ1つに付いてしまいます…。 HTMLの知識がほとんどないのですが、これはHTMLで何かしないとだめなのでしょうか？ ご教授下さい。
- ベストアンサー
- CSS
- テーブルの設置方法
ＨＰのトップページに、お知らせなどをテーブル内に書き込みたいのですが、いろんな素材サイトを参考にしても上手くいきません。 ちゃんとソースをコピーして、ソースに貼り付けてるのですが、枠が表示されなかったりします。 単純に枠だけでいいんですが、色を変えたくても、どこが枠の色、文字色なのかもわかりません、、、 枠のみを自分の好きな大きさ、色で作る方法がありましたらよろしくお願いします。 ホームページビルダー５で、WINDOWS XPで作ってます。 初心者なので、言葉足らずかもしれませんが、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- Dreamweaverでテーブルを作ると
Dreamweaver初心者なので初歩的な質問だとは思うのですが、よろしくお願いします。 ページを作成するときにテンプレートとしてテーブルを中央上に固定し、幅を700ピクセル、真ん中のセルを入れ子にして編集可能領域にしたいのですが。そこで問題があります。 〔1〕どうしてもテーブルの上と左に空白ができてしまいます。 〔2〕なにか微妙に縦の線（セルの幅）がずれているようです。 ■なにかよいページの設定やＣＳＳ、テーブルの設定方法があるのでしょうか？ ■理想としては http://www.nikkansports.com/ のような感じにしたいのです。 ■上のページのようにテーブルの横に影のような背景をつけたいのですがどのようにすればよいでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- テーブルにスクロールできますか？
dreamweaverMXでHPを作成しています。 全体をテーブルで入れ子にして作っています。 一応商用サイトなのでお客さんの要望があって、 よく新着情報などをスクロールがついているテーブル？のようなもので作られていますよね。 それの作り方がわかりません。 ネットで検索したりcssにチャレンジもしたのですがやっぱりdreamweaverではテーブルにスクロールは付けられないのでしょうか？ 初心者のため自分でいろいろやったのですが難しくてわかりません。 出来ればテーブルで、テーブルが無理でも何かしら方法を教えて欲しいです。 よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- cssでテーブルで細い線
スタイルシートを使って 1ピクセルの細い線にしようと、 サンプルのように以下のようにしてみましたが 中の線（td？）が二重になってしまいます 一線にするのにどのようにすればイイですか？ ―――――――― .table2 { width: 400px; /* テーブルの横幅 */ border-collapse: collapse; /* 枠線の表示方法 */ border: 1px #1C79C6 solid; /* テーブル全体の枠線（太さ・色・スタイル） */ background-color: #FFFFFF; /* 背景色 */ } .table2 TD { border: 1px #1C79C6 collapse; /* セルの枠線（太さ・色・スタイル） */ } ―――――――――――――― <TABLE CLASS="table2"> <TR> <TD>WebデザインA</TD> <TD>WebデザインB</TD> </TR> <TR> <TD>WebデザインC</TD> <TD>WebデザインD</TD> </TR> </TABLE>
- ベストアンサー
- CSS
- スタイルシートの細ーい線
スタイルシートで細い線にするには、どうすれば よいのでしょうか。 過去ログをいくつか参照させていただたいたのですが (http://www.okweb.ne.jp/kotaeru.php3?q=325031 等) これだと、となりあったセル同士だと互いの枠線が 重なって２本の線になってしまいます。 テーブルの入れ子以外で、いわゆる「一本線」で スマートに表現する方法はないでしょうか。 以前見たことがあるのですが。
- ベストアンサー
- CSS
- テーブル入れ子にしたらNNではダメ？
赤い背景画像を使ったHTMLにテーブルを3個入れ子で載せました。 下のテーブルのセルに白色、中のテーブルのセル色にグレー、一番上のテーブルのセルに白色を指定しました。 そこへラジオボタンをつけたのですが、本来、枠がない丸いボタンのところに赤の枠ができてしまいます。 IEでは問題ないのですが、NN4.7で確認したらこうなっていました。 デザインを変えずに回避する方法があったら教えてください。 また、NN6.*～だったらOKということはありますか？
- ベストアンサー
- HTML
- テーブル枠と文字
DreamWeaverでＨＰ作成中です。 たびたび質問させていただいていますが、テーブルの大きさがどうしても合いません。 【Ａ】<table width="100%" height="100%">という大きなテーブルの中に ３つ入れ子しています。 <tr><td> 【１】<table width="710" height="55"> 【２】<table width="710" height="15"> 【３】<table width="710" height="400"> </td></tr></table> これをベースに、【１】【２】のテーブルにはボタンを入れ、各ページにリンクさせています。 【３】のテーブルにインラインフレームを入れて、各ページ枠組と背景は同じのものを作っています。 【３】のインラインフレームを外しFlashファイルをはめこんだりすると、他のページと枠の大きさが変わってくるのですが、理由がわかりません。 もしかして、テーブルの枠自体に高さや幅があるのでしょうか。 例えば<table border="0">としていても、少し高さがあったりするために、全体の大きさが微妙に変わってしまう等。 もしくは、<td height="5">と設定しているのに、文字の大きさがそれ以上の高さを持っているため等。 文字の大きさはブラウザの設定等にも依存するのでしょうが、大体高さはどのくらいに設定すればよいのでしょうか。 それから、例えば【３】<table height="400">の中が<table height="380">と<table height="15">の２つだとするとまた大きさが変わってしまうのでしょうか。 とんちんかんなことを言っていますが、教えてくださいー。
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます。 「入れ子を駆使」するやりかたもやっぱり、 ”あり”なんですね。 なるほどー。セルスペーシングで線の幅がきまるんですね。 タグの勉強はほとんどしていないので、 これを機会に少し頭にいれてみようと思います。 ご回答ありがとうございました！