• ベストアンサー

テーブルタグ の枠

ホームページを運営、管理をしている初心者です。 FrontPageで制作して、FFFTPで転送しています。 htmlを少しづつ、勉強をしています。 まず、テーブルタグとは、htmlの表の事ですね。 この表に枠線を入れようとしています。 下記のように入力していますが、 枠の最初の1行が、height="1"に成りません。  <tr> <td bgcolor="#666666" width="1" height="1"> </td> <td bgcolor="#666666" width="539" height="1"> </td> <td bgcolor="#666666" width="1" height="1"> </td> </tr> 両脇と下段は、枠線になりました。 FrontPageでもhpで見ても、上段は、height="20"位の幅になります。 何か他の条件が、邪魔をしているのでしょうか?

  • HTML
  • 回答数2
  • ありがとう数3

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

  • ベストアンサー
  • coooop
  • ベストアンサー率100% (1/1)
回答No.1

よく分からないんですが高さを1にしたいんですよね? height="1"> </td>の間の空白無くしたら1にはなりますけど・・ 枠線はborderですよ。 width="1" height="1" border="100"> にすればかなり太い枠線が!

Purple_cat
質問者

お礼

ありがとうございます。 出来ました。 スペースが関係しているとは、知りませんでした。 独学で、tryをしながら学習をしています。 FrontPageで枠線を作ると太い枠線になってしまったので、表の回りに塗りつぶしたセルを置きました。 次は、枠線:border を研究してみます。 ありがとうございました。

その他の回答 (1)

  • abril
  • ベストアンサー率69% (388/560)
回答No.2

枠線の指定はborderを、というお答えが既に出ていますので、補足のみ。 > スペースが関係しているとは、知りませんでした。 tdの中に全角スペースが入っていれば、それは「あ」とか「表」とかいう2バイト文字が入っているのと同じ扱いになりますから、当然セル(td)の高さは「文字サイズ分の高さ」維持します。tdのheight属性は、実際にtdに入っている内容が、その高さを超える場合は、(いくらheightを小さく指定してあったとしても)そのデータが入り切るまで自動的に伸びます。それがtableという「表」の持つ特徴です。 > 表の回りに塗りつぶしたセルを置きました。 せっかく(今の時代から)独学で今から学ばれるのであれば、上記の様な考え方からは離れた方が宜しいかと…表のセルは、スタイルを整える為のものではなく、あくまでデータを入れる為のものですから。 HTMLは論理構造のみ、スタイルはCSSへ、と今から切り分けて学ばれる事をお奨めします。

Purple_cat
質問者

お礼

助言を、ありがとうございます。 実は、5年前にプロの方が作ったHPを、少しHTMLが判って来たので変更に挑戦しています。 CSSの言葉を知らなかったので、調べました。 イメージは判りましたが、どこから手を付けて良いかまったく判りません。 少しづつ勉強していきます。 ありがとうございました。

関連する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>

  • テーブルタグについてなんですけど・・・

    下記のテーブルタグを使うと <Table Border> <Tr BgColor=#d5eaff> <Td>あ</Td><Td>い</Td> </Tr> <Tr BgColor=#ffffd5> <Td>う<Td><Td>え</Td> </Tr> </Table> これをHPに編集して反映させてみると上にテーブルと同じ色の棒線みたいなものが現れるんです。 http://heo.jp/tag/table/bgcolor.html  ここから、テーブルタグを頂きました。 どなたか、わかる方がいましたら回答お願いします。

  • HTMLタグでテーブル枠を曲線で記述したい

    添付画像は「オークションプレートメーカー2」のテンプレートで、少しアレンジしようと思っています。 最上部の角が丸くなっていますが、下記のどの部分にあたるのでしょうか? すみませんが教えてください。 <br><center> <table cellspacing=0 border=0 cellpadding=0 width=550> <tr> <td width=1></td> <td width=1></td> <td width=1></td> <td width=2></td> <td width=2></td> <td width=536></td> <td width=2></td> <td width=2></td> <td width=1></td> <td width=1></td> <td width=1></td> </tr> <tr> <td height=1 colspan=4></td> <td height=1 bgcolor=#FF6666></td> <td rowspan=5 bgcolor=#FF6666 align=center> <font color=#FFFFFF size=5><b> </b></font> </td> <td height=1 bgcolor=#FF6666></td> <td height=1 colspan=4></td> </tr> <tr> <td height=1 colspan=3></td> <td height=1 colspan=2 bgcolor=#FF6666></td> <td height=1 colspan=2 bgcolor=#FF6666></td> <td height=1 colspan=3></td> </tr> <tr> <td height=1 colspan=2></td> <td height=1 colspan=3 bgcolor=#FF6666></td> <td height=1 colspan=3 bgcolor=#FF6666></td> <td height=1 colspan=2></td> </tr> <tr> <td height=2></td> <td height=1 colspan=4 bgcolor=#FF6666></td> <td height=1 colspan=4 bgcolor=#FF6666></td> <td height=2></td> </tr> <tr> <td colspan=5 bgcolor=#FF6666><br><br></td> <td colspan=5 bgcolor=#FF6666><br><br></td> </tr> <tr> <td colspan=5 bgcolor=#FF6666></td> <td> <table width=100% cellspacing=5 border=0 cellpadding=10 bgcolor=#FFCC66> <tr> <td align=left bgcolor=#FFF0F0> <font color=#993333 size=3> </font> </td> </tr> </table> </td> <td colspan=5 bgcolor=#FF6666></td> </tr> <tr> <td height=7 colspan=11 bgcolor=#FF6666></td> </tr> <tr> <td height=2 colspan=11></td> </tr> <tr> <td height=2 colspan=11 bgcolor=#FF6666></td> </tr> </table> <br> <font color="#999999" size=1>+ + + この商品説明は</font> <a href="http://www.auclinks.com/" target="_blank"><font color="#666666" size=1>オークションプレートメーカー2</font></a> <font color="#999999" size=1>で作成しました  + + +</font><font color="#FFFFFF" size=1><br>No.113.002.002</font><br> </center>

    • ベストアンサー
    • HTML
  • このテーブルタグの中の色を白にするには

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .border{ font-size : 1pt; } --> </STYLE> </HEAD> <BODY> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_1.gif" width="20" height="20" border="0"></TD> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> <TD colspan="2" rowspan="2"><IMG src="images/001_base_2.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="18"></TD> </TR> <TR> <TD width="2" bgcolor="#000000"><BR> </TD> <TD width="18"></TD> <TD>ここに内容を書きます(画像<A href="images/001_base_1.gif">1</A>・<A href="images/001_base_2.gif">2</A>・<A href="images/001_base_3.gif">3</A>・<A href="images/001_base_4.gif">4</A>)</TD> <TD width="18"></TD> <TD width="2" bgcolor="#000000"><BR> </TD> </TR> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_4.gif" width="20" height="20" border="0"></TD> <TD height="18"></TD> <TD rowspan="2" colspan="2"><IMG src="images/001_base_3.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 現在はテーブルの内側の色が透明色(背景の色)になっています。 これを透明でなく白にする方法をおしえてください!

  • 表の幅・高さ100%表示が、ブラウザによっては見え方が違う事ついて

    初めまして。お世話になります。 現在、ホームページを作成していますが、 分からない事がありますので、質問させて頂きました。 ホームページビルダーで、表(tableタグ)を使ったレイアウトを作成中です。 表の幅(width)と高さ(height)を共に100%で指定し、 表の中をセル(td)で細かく仕切り、その中に画像やテキストを配置し、 レイアウトしたいと思っています。 表のサンプルソースはこんな感じです。細かくてすみません…。 <TABLE border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <TR> <TD height="20" colspan="5"></TD> </TR> <TR> <TD height="1" bgcolor="#cccccc" colspan="5"></TD> </TR> <TR> <TD height="30" colspan="5"></TD> </TR> <TR> <TD height="1" bgcolor="#cccccc" colspan="5"></TD> </TR> <TR> <TD colspan="5" height="5"></TD> </TR> <TR> <TD rowspan="3"></TD> <TD rowspan="3" bgcolor="#0000ff" width="1"></TD> <TD height="1" width="700" bgcolor="#0000ff"></TD> <TD rowspan="3" bgcolor="#0000ff" width="1"></TD> <TD rowspan="3"></TD> </TR> <TR> <TD width="700"></TD> </TR> <TR> <TD width="700" height="1" bgcolor="#0000ff"></TD> </TR> </TABLE> 上記のソースでは表の中に、幅700pxの青色の四角いスペースを作っています。 しかし、ブラウザで見え方を確認しますと。 InternetExplorer、Opera、Sleipnirではうまく表示できますが、 Firefox、Lunascapeではうまく表示できません。 高さは大丈夫なのですが、 <TD height="1" width="700" bgcolor="#0000ff"></TD> <TD width="700"></TD> <TD width="700" height="1" bgcolor="#0000ff"></TD>等の、 width="700"が無視され、青色の四角いスペースまでもが、100%表示になってしまいます。 どのようなタグを書けば、どのブラウザでも正しく表示できるようになるのでしょうか? また、Firefox、Lunascapeのバージョンが古いのですが、 これらの影響もあるのでしょうか? Firefoxがバージョン1.5.0.2で、Lunascapeがバージョン3.5.4です。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • Mac IEのバグなのでしょうか?

    TMEspionです。 <table border="0" cellpadding="5" cellspacing="5"><tr><td width="100" align="left" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="center" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="right" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td></tr><tr><td align="left" bgcolor="#999999">左</td><td align="center" bgcolor="#999999">中</td><td align="right" bgcolor="#999999">右</td></tr></table> --------------------------------- 上記のソースの様に、テーブルを縦2段、横2列にセルを作り、上段はテーブルタグ、下段はテキストでそれぞれalign属性をleft、center,rightと設定しています。 ところがInternet Explorer 5.2 for Macで見ると、 上段右のテーブルタグは「align="right"」の効果が出ていません。 この質問を呼んでいる回答者様には、ブラウザでどう表示されるんでしょうか? どう表示されたかという結果とブラウザ名を教えて下さい。

    • ベストアンサー
    • HTML
  • 1ページにテーブルを複数設定・一括変更の方法について

    一つのページに複数(十数個)を設置する場合 まとめて設置する方法はあるのでしょうか? また、サイズ等を変更したい場合も 一括して変更する方法はあるのでしょうか? 例えば、以下の物を数十個設置する場合 設置自体は簡単なのですが、変更が・・、 どうにか簡単にできる方法があればご教授下さい。 <center> <table border="0" width="600" cellspacing="1" bgcolor="#0fb1ff" height="200"> <tbody> <tr> <td colspan="2" width="600" bgcolor="#ffffff" height="20" align="center"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="100" align="center"></td> <td width="400" bgcolor="#ffffff" height="100"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="20" align="center"></td> <td width="400" bgcolor="#ffffff" height="20"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="20" align="center"></td> <td width="400" bgcolor="#ffffff" height="20"></td> </tr> <tr> <td width="200" height="20" bgcolor="#ffffff" align="center"></td> <td width="400" height="20" bgcolor="#ffffff"></td> </tr> <tr> <td width="200" bgcolor="#ffffff" height="20" align="center"></td> <td width="400" bgcolor="#ffffff" height="20"></td> </tr> </tbody> </table> </center> 宜しくお願いします。

    • ベストアンサー
    • HTML
  • テーブルタグについて

    楽天ブログの日記用テーブルを、最初は人から借りていましたが 自分でオリジナルなものを作りたくなって、いろんな人のテーブルタグを見ようみまねでHTMLタグを勉強しながら、どうにか簡単なものはできるようになってきました。 欲が出てきて、テーブルの中に 例えば右上・左下もしくは左上・右下に画像(イラスト等)を配置した テーブル作りに挑戦しているのですが、うまくいきません。 正しい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> これだと余計な線が入ってしまいます。 ひとつのテーブルにしたいのです。 よろしくお願いします。

  • tableがずれる理由がわかりません

    上のテーブルはずれないのですが 同じレイアウトの下のテーブルはずれます。 widthの指定がききません。 なぜでしょう?? 前からこの現象はしていたのですが理由が知りたいです。 <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="10"><img src="../../img/spacer.gif" width="10" height="10"></td> </tr> </table> <br /> <br /> <table border="1" cellpadding="0" cellspacing="1"> <tr height="10" bgcolor="#cccccc"> <td width="50" bgcolor="#ffffff" colspan="5"><img src="../../img/spacer.gif" width="50" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="30" bgcolor="#ffffff" colspan="3"><img src="../../img/spacer.gif" width="30" height="10"></td> <td width="20" colspan="2"><img src="../../img/spacer.gif" width="20" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> <tr height="10" bgcolor="#cccccc"> <td width="10" bgcolor="#ffffff"><img src="../../img/spacer.gif" width="10" height="10"></td> <td width="40" colspan="4"><img src="../../img/spacer.gif" width="40" height="10"></td> </tr> </table>

  • Javascriptでテーブルタグの座標が知りたい(但し、マウスでなく)

    <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>JavaScriptテスト</title> <script type="text/javascript"> <!-- document.onmousedown = msDown //----------------------------------------------------------------------------- // マウスで座標を取得する //----------------------------------------------------------------------------- function msDown(){ var x = event.x; var y = event.y; alert('x=[' + x + '] y=[' + y + ']'); } // --> </script> </head> <body> テーブルタグの<TD>で左上側の画面上の位置の座標位置を取得したいです。 offsetLeftやoffsetTopでは、例えばテーブルタグの上側に<p>がある場合と無い場合でも同じ値でした。 正しく取得する方法はありますか? <hr> <table cellspacing="0" cellpadding="2" border="1" bgcolor="black"> <tbody> <tr> <td><img src="" width="100" height="100"></td> <td bgcolor="red">この赤のエリアの左上の座標が知りたい(マウスイベントで調べられるが、それを使わずに調べたい) </td> </tr> <tr> <td>456</td> <td><img src="" width="50" hright="50"></td> </tr> </tbody> </table> </body> </html>

専門家に質問してみよう