- ベストアンサー
テーブルの線について
下記のようなＨＰをつくっています。 一番大きなテーブルの上下の線を消すにはどこをどのようにすればいいのでしょうか？ ご回答いただけると嬉しいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="100%" cellspacing="1" cellpadding="1" width="730" align="center" bgcolor="#c0c0c0" border="0"> <tr> <td bgcolor="#ffffff" colspan="2"> </td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" height="120" background="sozai/title_back.gif"> <p align="center"><img height="50" alt="" src="sozai/title.gif" width="369" border="0"></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" valign="top" align="left"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｔｏｐ</font></td> </tr> <tr> <td><a class="menu" href="">Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</font></a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Ｓｈｏｐｐｉｎｇ</a></td> </tr> <tr> <td><a class="menu" href="">お友達サイト</a></td> </tr> </table> <p align="center"> <img src="http://counter1.fc2.com/counter_img.php?id=47426"><br> </p></td></tr></table> <table cellspacing="1" bgcolor="#c0c0c0" border="0" cellpadding="20" width="565" align="left"> <tr> <td bgcolor="#ffffff" ><br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> </td> </tr> </table> </td></tr> <tr> <td bgcolor="#ffffff" colspan="2"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2"><br> </td> </tr> </table> </body></html>
- mituru1986
- お礼率42% (632/1491)
- HTML
- 回答数10
- ありがとう数9
- みんなの回答 （10）
- 専門家の回答
質問者が選んだベストアンサー
ひきつづき・・・ えーと左右は残すってことですね？ ではこんな感じで。 ようは上下左右を引くクラスと、上や下を消すクラスを指定すれば 良いわけです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } table#mainTable{ border-collapse:collapse; } td.borderAll,td.borderNoTop,td.borderNoBottom{ border:solid 1px #c0c0c0; } td.borderNoTop{ border-top:0px; } td.borderNoBottom{ border-bottom:0px; } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="100%" width="730" align="center" id="mainTable"> <tr> <td colspan="2" class="borderNoTop"> </td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"> <p align="center"><img height="50" alt="" src="sozai/title.gif" width="369" border="0"></p></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｔｏｐ</font></td> </tr> <tr> <td><a class="menu" href="">Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</font></a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Ｓｈｏｐｐｉｎｇ</a></td> </tr> <tr> <td><a class="menu" href="">お友達サイト</a></td> </tr> </table> <p align="center"> <img src="?http://counter1.fc2.com/counter_img.php?id=47426"><br>?? </p></td></tr></table> <table cellspacing="1" bgcolor="#c0c0c0" border="0" cellpadding="20" width="565" align="left"> <tr> <td bgcolor="#ffffff" ><br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> </td> </tr> </table> </td></tr> <tr> <td class="borderAll" colspan="2"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td colspan="2" class="borderNoBottom"><br> </td> </tr> </table> </body></html>
その他の回答 (9)
- yambejp
- ベストアンサー率51% (3827/7415)
#2です。 わたしの説明では理解しづらかったようなので以下サンプルを書きます。 ホントはもっときれいな書き方をすべきなのでしょうけど とりあえず言われたところだけ元ソースを修正してあります <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } table#mainTable{ border-collapse:collapse; } td.borderAll{ border:solid 1px #c0c0c0; } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="100%" width="730" align="center" id="mainTable"> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2" height="120" class="borderAll" background="sozai/title_back.gif"> <p align="center"><img height="50" alt="" src="sozai/title.gif" width="369" border="0"></p></td> </tr> <tr> <td class="borderAll" colspan="2" valign="top" align="left"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Ｔｏｐ</font></td> </tr> <tr> <td><a class="menu" href="">Ｎｅｗｓ</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</font></a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Ｓｈｏｐｐｉｎｇ</a></td> </tr> <tr> <td><a class="menu" href="">お友達サイト</a></td> </tr> </table> <p align="center"> <img src="http://counter1.fc2.com/counter_img.php?id=47426"><br>? </p></td></tr></table> <table cellspacing="1" bgcolor="#c0c0c0" border="0" cellpadding="20" width="565" align="left"> <tr> <td bgcolor="#ffffff" ><br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> </td> </tr> </table> </td></tr> <tr> <td class="borderAll" colspan="2"> <p align="center"> <font color="#808080">Copyright © 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td colspan="2"><br> </td> </tr> </table> </body></html>
お礼
回答ありがとうございます。 非常にわかりやすくて感謝します（T＿T） このソースをコピペしてブラウザで表示させたのですが、これだと上下のセルが消えただけになりませんか？ たぶん、私の説明が下手で伝わっていなかったと思うのですが 上記の質問のソースの状態で、一番外側のテーブルの"上下の線だけ"を消したいのです。 もし、それを踏まえて再度回答いただけると嬉しいです。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは ＞ＨＰ作成初心者なもので回答が難しくて理解できなくて・・・。 ふむふむ 上下の線を消すというのは横線を全部消すということですかね？ それでしたら一番初めの<table>のbgcolor=#c0c0c0"を削除してかわりにid="id"を付けてください <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="100%" cellspacing="1" cellpadding="1" width="730" align="center" border="0" id="id"> /←この部分です <tr> <td bgcolor="#ffffff" colspan="2"> </td> 次に<style type="text/css>～～</style>内に以下を追加 #id { border-left:1px solid #c0c0c0; border-right:1px solid #c0c0c0; } これで帯の縦線だけ表示されます メニューのある部分の上下の線は消さないというのであれば上のに加えてその部分の<td>にclass名をつけます <td bgcolor="#ffffff" colspan="2" valign="top" align="left" class="class"><br> /←この部分 <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> 次に<style>～～</style>内に以下を追加 .class { border-top:1px solid #c0c0c0; border-bottom:1px solid #c0c0c0; } もし真ん中のテーブルのことだったら上記を参考にやってみてください
お礼
回答ありがとうございます。 非常にわかりやすいです♪感謝します（T＿T） まず、私のやりたいことを説明します（ちょっとわかりにくいと思ったので）。 一番外側のテーブルの上下の線だけを消したいんです。 これを実際にやってみて、見た目は一応そのとおりになったのですが メニューのある（一番外側のテーブルじゃなく、その内側のテーブル）部分の上下の線の左右が途切れているように見えるんです（いっている意味伝わるかなあ・・）。 これをつなげることはできますでしょうか？ もし、再度回答もらえるとうれしいです。
- Oh-Orange
- ベストアンサー率63% (854/1345)
★すごく綺麗なデザインですね。 ・私も TABLE でレイアウトをしていますのでやりたい事がわかります。 一番外側のレイアウトに使っている<TABLE>タグの『bgcolor="#c0c0c0"』の部分を削除して下さい。 分かりますか？→<BODY>タグの直ぐ下にある<TABLE>タグ行ですよ。 つまり、 <table height="100%" cellspacing="1" cellpadding="1" width="730" align="center" bgcolor="#c0c0c0" border="0"> ↓ ↓ ↓ ↓ ↓ <table height="100%" cellspacing="1" cellpadding="1" width="730" align="center" border="0"> に編集してみて下さい。 これで外側の枠が消えました。 おまけ: A.menu{ DISPLAY: block; HEIGHT: 40px; PADDING: 12px 15px 5px 15px; TEXT-DECORATION: none } A.menu:link, A.menu:visited { BORDER: #666666 1px solid; BACKGROUND-COLOR: pink; COLOR: #ffffff; } A.menu:hover, A.menu:active { BORDER: #ffffff 1px ridge; BACKGROUND-COLOR: #ffffff; COLOR: gray; } 最後に: ・あとスタイルシートも手直ししたくなったので載せます。→上記の『おまけ』です。 ・以上。おわり。→参考に！
お礼
回答ありがとうございます。 非常にわかりやすく回答くださり、感謝します（T＿T） 外枠の線を全て消すのではなく、一番外側のテーブルの上下の線だけを消したいんです。。 すみません、私の説明が下手くそでわかりにくいですよね（＾＾；） もし、その点を踏まえて回答くださるとうれしいです。 あ、スタイルシートの手直しありがとうございます♪
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
> しかし、ＨＰ作成初心者なもので回答が難しくて理解できなくて・・・。 初心者云々言わずにまずはやってみましょう！指示に従って作業を行い、トラブルが出たら何が分からなかった、どういう問題が出たかを追加質問。 初心者だから分からない云々で止まられると答える側はどうしようもないのですTT 逆に果敢にチャレンジしてくだされば答える側はそれをバックアップすることが出来ます^^ だから実際にチャレンジして何処が分からなかったかとかどういう問題が出たかを具体的に書いてくださいな。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは <table bgcolor="c0c0c0" border="0">としてbgcolor指定してるからですね（＾＾） 枠線が必要ないところは普通に<table>だけでいいです <table border="0">としておけば確実ですけど で横線が必要なテーブルにid名、もしくはclass名をつけてやってスタイルシートで横線だけ描くようにしてやればいいです 色指定はどちらでもできますので両方のやり方を書いています id名、class名は何でもいいですので（＾＾） <style type="text/css"> <!-- #id { border-left:2px solid #0000FF; border-right:2px solid blue; } /--> </style> <table id="id"> <tr><td> IDの場合(青線） </td></tr> </table> <style type="text/css"> <!-- .class { border-left:2px solid #FF0000; border-right:2px solid red; } /--> </style> <table class="class"> <tr><td> classの場合（赤線） </td></tr> </table>
お礼
回答ありがとうございます。 すごく丁寧に回答してくださって大変感謝しています。 しかし、ＨＰ作成初心者なもので回答が難しくて理解できなくて・・・。 最初に書いておけばよかったのですが。スミマセン。。
- torayoshi
- ベストアンサー率62% (910/1449)
#1です。 ↓つまり、こうなれば良いわけでしょ？ http://www16.plala.or.jp/zaq_501/3.html 違うのかな？
お礼
回答ありがとうございます。 ？？？ これだと上下のセルが抜けていませんか？ それに上下の線も消えていませんし。。。
- golive001
- ベストアンサー率54% (20/37)
そもそもテーブルでレイアウトしようとしているのが間違い。 テーブルは表組するためのもので、レイアウトに使うものではない。 <html> <head> <title>上下ライン無し 左右ライン有のサンプル</title> <style type="text/css"> #wrap{ width:400px; height:600px; border-top:0; border-bottom:0; border-left:1px solid #ccc; border-right:1px solid #ccc; } </style> </head> <body> <div id="wrap"></div> </body> </html> ↑これコピペして表示してみてください。 あとはご自分で工夫してみてください。
お礼
回答ありがとうございます。 私は初心者なのでWYSIWYでＨＰ作成しています。 ですのでコピペしてWYSIWYでテーブルを分割しようとするとこれではできません。。
- yambejp
- ベストアンサー率51% (3827/7415)
外側のテーブルは線をbgcolorでひいているので、 一部分だけ書いたり消したりはできません。 border-collapseをつかうとできそうですが 大幅に書きかえる必要がありそうですね。
お礼
回答ありがとうございます。 上下の線を消そうとしたらかなり時間はかかりますか？
- torayoshi
- ベストアンサー率62% (910/1449)
親テーブルの上下のセルを削除すればいいと思います。 <tr> <td bgcolor="#ffffff" colspan="2"> </td> </tr> と <tr> <td bgcolor="#ffffff" colspan="2"><br> </td> </tr> を削除。
お礼
回答ありがとうございます。 すみません。ＨＰ作成初心者でして、どこのことかわからなくて（＾＾；
補足
すみません。お礼の分は間違いです。 このとおり削除したのですが消えませんでした。。
お礼
ありがとうございます！ やっとこさできました（；＿； 本当にみなさん、ありがとうございました。