ベストアンサー

テーブルの線について

2007/04/08 10:18

下記のようなＨＰをつくっています。一番大きなテーブルの上下の線を消すにはどこをどのようにすればいいのでしょうか？ご回答いただけると嬉しいです。 <!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">  </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）
専門家の回答

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

ベストアンサー

yambejp
ベストアンサー率51% (3827/7415)

2007/04/09 09:36 回答No.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">  </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>

質問者

お礼 2007/04/09 11:08

ありがとうございます！やっとこさできました（；＿；本当にみなさん、ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (9)

yambejp
ベストアンサー率51% (3827/7415)

2007/04/09 01:10 回答No.9

#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">  </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>

質問者

お礼 2007/04/09 08:54

回答ありがとうございます。非常にわかりやすくて感謝します（T＿T）このソースをコピペしてブラウザで表示させたのですが、これだと上下のセルが消えただけになりませんか？たぶん、私の説明が下手で伝わっていなかったと思うのですが上記の質問のソースの状態で、一番外側のテーブルの"上下の線だけ"を消したいのです。もし、それを踏まえて再度回答いただけると嬉しいです。

ログインすると、全ての回答が全文表示されます。

leap_day
ベストアンサー率60% (338/561)

2007/04/08 22:32 回答No.8

こんにちは＞ＨＰ作成初心者なもので回答が難しくて理解できなくて・・・。ふむふむ上下の線を消すというのは横線を全部消すということですかね？それでしたら一番初めの<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; } もし真ん中のテーブルのことだったら上記を参考にやってみてください

質問者

お礼 2007/04/09 08:51

回答ありがとうございます。非常にわかりやすいです♪感謝します（T＿T）まず、私のやりたいことを説明します（ちょっとわかりにくいと思ったので）。一番外側のテーブルの上下の線だけを消したいんです。これを実際にやってみて、見た目は一応そのとおりになったのですがメニューのある（一番外側のテーブルじゃなく、その内側のテーブル）部分の上下の線の左右が途切れているように見えるんです（いっている意味伝わるかなあ・・）。これをつなげることはできますでしょうか？もし、再度回答もらえるとうれしいです。

ログインすると、全ての回答が全文表示されます。

Oh-Orange
ベストアンサー率63% (854/1345)

2007/04/08 19:23 回答No.7

★すごく綺麗なデザインですね。・私も 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; } 最後に: ・あとスタイルシートも手直ししたくなったので載せます。→上記の『おまけ』です。・以上。おわり。→参考に！

質問者

お礼 2007/04/09 08:46

回答ありがとうございます。非常にわかりやすく回答くださり、感謝します（T＿T）外枠の線を全て消すのではなく、一番外側のテーブルの上下の線だけを消したいんです。。すみません、私の説明が下手くそでわかりにくいですよね（＾＾；）もし、その点を踏まえて回答くださるとうれしいです。あ、スタイルシートの手直しありがとうございます♪

ログインすると、全ての回答が全文表示されます。

MAN_MA_RUI
ベストアンサー率41% (426/1024)

2007/04/08 16:05 回答No.6

> しかし、ＨＰ作成初心者なもので回答が難しくて理解できなくて・・・。初心者云々言わずにまずはやってみましょう！指示に従って作業を行い、トラブルが出たら何が分からなかった、どういう問題が出たかを追加質問。初心者だから分からない云々で止まられると答える側はどうしようもないのですTT 逆に果敢にチャレンジしてくだされば答える側はそれをバックアップすることが出来ます^^ だから実際にチャレンジして何処が分からなかったかとかどういう問題が出たかを具体的に書いてくださいな。

ログインすると、全ての回答が全文表示されます。

leap_day
ベストアンサー率60% (338/561)

2007/04/08 15:20 回答No.5

こんにちは <table bgcolor="c0c0c0" border="0">としてbgcolor指定してるからですね（＾＾）枠線が必要ないところは普通に<table>だけでいいです <table border="0">としておけば確実ですけどで横線が必要なテーブルにid名、もしくはclass名をつけてやってスタイルシートで横線だけ描くようにしてやればいいです色指定はどちらでもできますので両方のやり方を書いています id名、class名は何でもいいですので（＾＾） <style type="text/css">  </style> <table id="id"> <tr><td> IDの場合(青線） </td></tr> </table> <style type="text/css">  </style> <table class="class"> <tr><td> classの場合（赤線） </td></tr> </table>

質問者

お礼 2007/04/08 15:52

回答ありがとうございます。すごく丁寧に回答してくださって大変感謝しています。しかし、ＨＰ作成初心者なもので回答が難しくて理解できなくて・・・。最初に書いておけばよかったのですが。スミマセン。。

ログインすると、全ての回答が全文表示されます。

torayoshi
ベストアンサー率62% (910/1449)

2007/04/08 15:07 回答No.4

#1です。 ↓つまり、こうなれば良いわけでしょ？ http://www16.plala.or.jp/zaq_501/3.html 違うのかな？

質問者

お礼 2007/04/08 15:47

回答ありがとうございます。？？？これだと上下のセルが抜けていませんか？それに上下の線も消えていませんし。。。

ログインすると、全ての回答が全文表示されます。

golive001
ベストアンサー率54% (20/37)

2007/04/08 14:08 回答No.3

そもそもテーブルでレイアウトしようとしているのが間違い。テーブルは表組するためのもので、レイアウトに使うものではない。 <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> ↑これコピペして表示してみてください。あとはご自分で工夫してみてください。

質問者