• ベストアンサー

テーブルタグについて?

sesameの回答

  • ベストアンサー
  • sesame
  • ベストアンサー率49% (1127/2292)
回答No.1

colspanはセルを横にいくつぶん占有するかを指定する属性です。 colspan=3とすると、他の段では3セルある幅を1つだけのセルが占めることになります。 同様にrowspanはセルを縦に占有する数を指定します。 下のサンプルを切り取って表示してみてください。 <TABLE border=1><TBODY> <TR><TD rowSpan=3>縦に3つ分</TD><TD>1つ分</TD><TD>1つ分</TD></TR> <TR><TD colSpan=2>横に2つ分</TD></TR> <TR><TD>1つ分</TD><TD>1つ分</TD></TR> </TBODY></TABLE>

mitsy
質問者

お礼

大変よくわかりした。有難う御座いました。

関連するQ&A

  • このテーブルタグの中の色を白にするには

    <!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> 現在はテーブルの内側の色が透明色(背景の色)になっています。 これを透明でなく白にする方法をおしえてください!

  • テーブルタグの余白

    テーブルタグを使って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がずれる理由がわかりません

    上のテーブルはずれないのですが 同じレイアウトの下のテーブルはずれます。 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>

  • ビルダー9 表の枠(罫線?空白?)を完全になくすには?

    会社のHPを作っています。 下記のタグを見て頂くとわかると思うのですが、 一番大きい画像と、その右の画像の間に細い線が入ってしまっています。 (ファイル名は消してあります) 最初は上下にも入っていたのですが、それはどうにか消すことができました。 (どうやったか覚えてないですけど) この線をないものとすることはできますか? 周りに詳しい人がいなくて、ほんっっとうに困ってます!助けてください(T_T) <TABLE width="785" cellspacing="0" cellpadding="0"> <TBODY> <TR align="left" bgcolor="#ffffff"> <TD colspan="4" rowspan="3" width="691" height="73"><IMG src="" width="691" height="76" border="0"></TD> <TD colspan="2" width="77"><IMG src="" width="94" height="19" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="20" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="2" width="77"><IMG src="" width="94" height="37" border="0" hspace="0" vspace="0"></TD> </TR> <TR> <TD colspan="6" height="18"><IMG src="" width="84" height="21" border="0"><IMG src="" width="130" height="21" border="0"><IMG src="" width="156" height="21" border="0"><IMG src="" width="126" height="21" border="0"><IMG src="" width="114" height="21" border="0"><IMG src="" width="175" height="21" border="0"></TD> </TR> </TBODY> </TABLE>

  • テーブルを作ったんですが…

    はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>

  • スタイルシートについて

    <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD><IMG src="i1.gif" width="64" height="64" border="0"></TD> <TD><IMG src="i2.gif" width="64" height="64" border="0"></TD> </TR> <TR> <TD><IMG src="m1.gif" width="32" height="32" border="0"></TD> <TD><IMG src="m2.gif" width="32" height="32" border="0"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> こういったTableを使った表がある場合、スタイルシートで示すことは出来ますか?もし出来るならそのソースを教えてください。 また、こういったTableのホームページを一括でスタイルシートに変換できるソフトが存在していたら教えてください。 それと、この行数がかなり大きくなると、Tableよりも軽く表示がされると聞いたのですが本当でしょうか? ご返答、何卒、よろしくお願い致します。

    • ベストアンサー
    • HTML
  • ハーボットのフレーム。

    某サイトでハーボットのフレームの枠を配っていたので つけようと思ってやっていましたが、 枠は出来たのですがその中にハーボット本体を入れることが どうしても出来ないんですけどどうやっていれるのでしょうか? 因みにhtmlは。 <TABLE width="142" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD rowspan="3" width="14" height="245"><IMG src="***/habwaku02.gif" width="9" height="247" border="0"></TD> <TD width="125"><IMG src="***/habwaku01.gif" width="127" height="37" border="0"></TD> <TD rowspan="3" width="6" height="245"><IMG src="***/habwaku03.gif" width="9" height="247" border="0"></TD> </TR> <TR> <TD width="125" align="center"><IMG src="***/hw1.gif" width="125" height="199" border="0"></TD> </TR> <TR> <TD width="125"><IMG src="***/habwaku04.gif" width="127" height="9" border="0"></TD> </TR> </TBODY> </TABLE> で=***/habwaku0*.gifの部分は全てうまく画像が出来ました。 あとはここに画像URLを入れるだけとなっていましたが 入れ方を教えてください。

  • 助けてください><IE上で1pxのズレ

    こんにちわ。 組んだテーブルに謎の1pxがはいってしまいます。 ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。 どなたか分かる方いらっしゃたらお願いします>< <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>

  • 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
  • オブジェクトを指定してください、のエラーについて

    HTML作業中、下記のようなエラーメッセージが表示されます。 エラー:オブジェクトを指定してください。 文字:3 コード:0 恐らく↓この辺りでエラーが起きているのだとは思うのですが… どなたか分かる方はいらっしゃいますでしょうか?それと、 ライン:200 ↑この数値は、ソースを表示させたときの行数でいいのでしょうか? メモ帳で開くと「行へ移動」ができなかったもので… 他にエラー場所を知る方法があれば教えてください。 <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td colspan="2" align="right"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','img/click2.gif',1)"><img src="img/click1.gif" alt="クリック!" name="Image46" width="64" height="49" border="0"></a></td> <td colspan="2" align="right"><img src="img/suga-3.gif"></td> </tr> </table> <table width="179" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="12" colspan="4"><img src="img/ue.gif" width="179" height="12"></td> </tr> <tr> <td width="14" height="124" background="img/hidari.gif"><img src="img/hidari.gif" width="14" height="7"></td> <td width="146" background="img/back.gif"><table width="145" height="110" border="0" cellpadding="0" cellspacing="0"> <tr> <td><img src="img/main1.gif" width="70" height="102" hspace="2"></td> <td valign="top" class="text12">画像</td> </tr> </table> <img src="img/botan.gif" width="146" height="17"></td> <td width="19" background="img/migi.gif">&nbsp;</td> </tr> <tr> <td height="12" colspan="4"><img src="img/sita.gif"></td> </tr></table>