- ベストアンサー
テーブルタグ
ame-sancの回答
- ame-sanc
- ベストアンサー率32% (152/467)
<table height="30" width="100" style="border-right:2px dashed #dd0044;border-bottom:2px dashed #dd0044;"> <tr> <td> </td> </tr></table> 厳密には一緒ではないですが、だいたい一緒でよければ td 指定を table 指定に移す。
関連するQ&A
- テーブルタグの余白
テーブルタグを使ってHPのレイアウトを整えようと思っているのですが、セルの中に画像をいれるとどうしても下に余白ができてしまい困っています。対策方を教えて下さい。セルの大きさも画像の大きさにあわせています！！ <Table Border="0" CELLPADDING="0" WIDTH="146" HEIGHT="166" > <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> <Tr> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> <Td WIDTH="108" HEIGHT="128"> aiueo </Td> <Td WIDTH="19" HEIGHT="128"> <img src="画像"> </Td> </Tr> <Tr> <Td ColSpan="3" WIDTH="146" HEIGHT="19"> <img src="画像"> </Td> </Tr> </Table>
- ベストアンサー
- Windows 95・98
- tableにtable。table同士の間隔を拡大
スクロールバーを付けるためにtable内にtableを入れました。 中のtableとtableの間隔を開けたいです。 言葉が少ないですが、その分画像で頑張って説明します。 お願いいたします。 <style type="text/css"> #test0{ cellpadding: 2; width: 518px; background-color : #fff; border:1px solid #333; border-spacing:0; } #start{ width: 495px; height: 230; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; } td.test1{ background-color: #000000; color: #333333; } td.test2 img{ margin: 10px; } .test3{ font-size: 12px; padding: 5px; } td.test4{ text-align: center; } </style> <table id="test0"> <tbody> <tr> <td> <DIV style="height:400px; overflow:auto;"> <table id="start"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table class="center"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table id="end"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> </div> </td> </tr> </tbody> </table>
- ベストアンサー
- HTML
- 中枠の太さを1pxにしたい
以下の HTML を書いたのですが、外枠の太さは1pxになっていますが、中枠が2pxになってしまいます。中枠も1pxで表示するにはどう修正すればいいでしょうか？ ご教授よろしくお願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> </head> <body> <table border="0" width="100%" cellspacing="0" cellpadding="0" id="table2"> <tr> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Icon</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Name</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;">Effect</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 111111</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 444444</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 222222</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 555555</div></div></td> </tr> <tr> <td width="33"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px;"> <img border="0" src="test.gif" width="35" height="32"></div></div></td> <td align="left"><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 333333</div></div></td> <td><div style="border:1px solid #999999"> <div style="BORDER-TOP: 1px solid;BORDER-RIGHT: 1px solid;BORDER-BOTTOM: 1px solid;BORDER-LEFT: 1px solid;padding:3px; height:40"> 666666</div></div></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブルタグについて質問
テーブルを横に二つ並べたのですが 赤い線と中のセルに間に隙間があいてしまいます 上にぴったりつけたいので、TD valign="top"を使いましたが上手くいかず 困っています。 以下、自己流ソースです <TABLE border="3" bordercolor="red" height="60%" cellpadding="0"> <TR> <TD valign="top"> <TABLE border="1" width="100%" cellpadding="0"> <TR> <TD><img src="image/＊＊＊＊.jpg"></TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="1" cellpadding="0"> <TR><TD width="30%" align="right"><B>＊＊＊＊</TD><TD>＊＊＊＊</B></TD> </TR> <TR><TD>＊＊＊＊</TD><TD>＊＊＊＊</TD></TR> <TR> <TD>＊＊＊＊</TD><TD>＊＊＊＊</TD></TR> <TR> <TD>＊＊＊＊</TD><TD>＊＊＊＊</TD></TR> <TR> <TD>＊＊＊＊</TD><TD>＊＊＊＊</TD></TR> <TR> <TD>＊＊＊＊</TD><TD>＊＊＊＊</TD></TR> <TR> <TD>＊＊＊＊</TD><TD>＊＊＊＊</TD></TR></TABLE> </TD> </TR> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- ラインはtableタグを使って書くのでしょうか？
<table border="0" width="100%" style="bordr-left:0px;border-right:0px;border-top:thick ridge;border-bottom:0px"> <tr><td width =100%></td></tr></table> ｈｔｍｌを勉強中でソースをのぞいてみるのですが、テーブルのデーターなしで幅が０とか？？でわかりません。なぜラインになるのでしょうか？＜ｈｒ＞とかとはちがうのでしょうか？？おおしえください
- 締切済み
- その他（インターネット・Webサービス）
- テーブルの隙間をなくす
テーブルの中に作ったテーブルを一番上に配置したいのですが、どうすれば良いでしょうか？テーブルの下で改行すると上に行くのですが、それだとしたがあまります。 ＨＴＭＬはこれです。よろしくお願いします。 <table width="800" border="0" cellspacing="0" cellpadding="0" height="600"> <tr> <td> <TABLE width="100%"> <TBODY> <TR> <TD width="241" height="2"> </TD> <TD width="511" align="right" valign="bottom" style="font-size : 8pt;" height="2"> </TD> </TR> </TBODY> </TABLE> </td> </tr> </table>
- ベストアンサー
- HTML
- テーブルタグについて
楽天ブログの日記用テーブルを、最初は人から借りていましたが 自分でオリジナルなものを作りたくなって、いろんな人のテーブルタグを見ようみまねでＨＴＭＬタグを勉強しながら、どうにか簡単なものはできるようになってきました。 欲が出てきて、テーブルの中に 例えば右上・左下もしくは左上・右下に画像（イラスト等）を配置した テーブル作りに挑戦しているのですが、うまくいきません。 正しいＨＴＭＬタグを教えてください。 試してみたソースです ↓ <table cellpadding="30" cellspacing="1" border="0" style=" width: 100%; background-color: #AB8F74; "><tr><td bgcolor="#ffffff" background="左上の画像アドレス" style="background-repeat: no-repeat; background-position: left top;" valign="top" height="266" align="center"><td bgcolor="#ffffff" background="右下の画像アドレス" style="background-repeat: no-repeat; background-position: right bottom;" valign="top" height="266" align="center"> ■ここに日記内容■ </td></tr></td></tr></table> これだと余計な線が入ってしまいます。 ひとつのテーブルにしたいのです。 よろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
- ＣＳＳで作成した複数のＢＯＸ間の境目は消えますか？（初心者）
分かりにくいタイトルでしたらすみません（汗）。。 実は複数のボックスをＣＳＳで作成したのですが本当に 「少しだけなんですがＢＯＸ間に隙間があるのです」（本当に１，２ＰＸ程です） 僕自身としてはなんとかしてこの気になるスペースを消したいんですが なんとかならないでしょうか。。。。 ↓ソースはこれで上からうさぎ、猿、うんこと３個のＢＯＸが縦から並んでいて どうしてもちょいとだけ、スペースが生まれてしまうのです、で、課題の〆切 が近づいておりすみませんが急いでいるんです。 助けて頂けると大変嬉しいです。 <style type="text/css"> <!-- .param1 {border-style: solid; border-width: 0 0 0 0 ; background-color: #ffcccc; width: 210px; height: 60px;} .param2 {border-style: solid; border-width: 10 0 10 20 ; background-color: #ffcccc; border-top-color: #666699; border-bottom-color: #666699; border-left-color: #666699; width: 210px; height: 60px;} --> </style> </head> <body marginwidth="0" marginheight="0" leftmargin="0" bgcolor=#999999> <table border="0" align="right" cellspacing="0" cellpadding="0"> <table border="0"> <tr> <td class="param1">うさぎ</td> </tr> <tr> <td class="param2">猿</td> </tr> <tr> <td class="param2" height=60>うんこ</td> </tr>
- ベストアンサー
- HTML
- imgタグについて
imgタグについて http://okwave.jp/qa/q5970749.html この件で質問させていただいてましたが、気になる事がありましたのでアドバイスください。 最初のタグーーーーーーーー img{border: 0; vertical-align:bottom;} ーーーーーーーーーーーーー <img src="/img/space.gif" width="100%" height="10px"/> IE8でimgタグのvertical-align:top;が反応して1px×1pxの透明の画像が縦に10px以上伸びてしまっていました。 ↓そこで、このように分ければいいとアドバイスいただきましたが、 .img1{border: 0;} .img2{border: 0; vertical-align:bottom;} imgタグは他のページでも使用しているため img{border: 0; vertical-align:bottom;}は変更出来ませんでした。 そこで、img2{border : 0;} とcssに書き込み <img2 src="http://www.itumonavi.jp/img/space.gif" width="100%" height="10px" /> にするとバグは解消されました。 ですが、html的に<img2～ というタグは見た事無いのですが、これは使っておいても問題ないのでしょうか？ もし他に方法がございましたら教えてください。 【css】-------------------------- img { border: 0; vertical-align:top; } .img1 { border: 0; } 【html】-------------------------- <table width="635" height="31" border="0" cellspacing="0" cellpadding="0" bgcolor="#999999"> <tr> <td width="635">タイトル</td> </tr> </table> <table width="635" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="3"><img src="/img/space.gif" width="100%" height="10px" class="img1"/><!-- スペース --></td> </tr> <tr> <td width="170" rowspan="2"><img src="img/sample.gif" width="170" height="170" alt="test" /></td> <td width="20" rowspan="2"><img src="img/space.gif" width="20" height="170" class="img1" /><!-- スペース --></td> <td width="445" style="vertical-align:text-top"><img src="img/space.gif" width="100%" height="5" class="img1" /><!-- スペース -->コピー<div class="guide-line"></div><!-- ライン --> </td> </tr> </table>
- ベストアンサー
- HTML
- IE セル間に隙間が・・・
HTML初心者です。 テーブルでHPをレイアウトしたいのですが、--1と--3のセル間に微妙な隙間ができてしまいます。NNでは問題なく表示されます。通常どの様なことが原因するのでしょうか？よろしくお願いいたします。 <td width="396" height="234"valign="top"><table width="100%" height="234" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="180" rowspan="2" valign="bottom" >1 <img src="../image/***" width="180" height="180" align="bottom"></td> ------1 <td width="216" height="98" valign="bottom">***</td> </tr> <tr> <td height="136" valign="bottom" ><img src="../image/*** width="91" height="61" border="1"><br>></td> </tr> </table></td> <td width="10" rowspan="3" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="262"></td> ------３ <td valign="top" >*** <br> </td>
- ベストアンサー
- HTML
お礼
ある1箇所のセルのみの線を指定したいので、 残念ながらtable自体に指定はできません。 ご回答ありがとうございました。