• 締切済み

colspan セルの結合について

テーブルタグで作ったセルを結合させようとcolspan タグを使用したのですが 縦線が消えてしまいます。何故なのか調べてもわからず困っています。 ソースを載せるのでよければお知恵を貸してください。お願いします。 <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> </td> </tr> </table> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> </body> </html>

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

みんなの回答

  • hiyokko7
  • ベストアンサー率52% (9/17)
回答No.2

■ポイントその1 ----------------------------------------------------------- <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td>ccc</td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> ----------------------------------------------------------- ↑よくみると、なにか1つ抜けているものがあります。  抜けているものは何でしょう? ------------------------------------------------------ ■ポイントその2 ------------------------------------------------------ <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <br> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> …中略 </td> </tr> </table> ------------------------------------------------------ ↑テーブルの○○タグは2つあるのに、××タグは1つしかありませんね。。 ------------------------------------------------------ ■ポイントその3 ------------------------------------------------------ <table border=0 cellspacing=1 cellpadding=3> <tr bgcolor="#000000"><td colspan="9">aaa</td></tr> <tr bgcolor="#000000"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="6">mmm</td></tr> </table> ------------------------------------------------------ ↑上のセルは9つ結合させていますよね。  下のセルはどうなっているでしょうか…? ------------------------------------------------------ ■ポイントその4 ------------------------------------------------------ <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> ------------------------------------------------------ ↑なにかがおかしい… ------------------------------------------------------

kotikaze6
質問者

補足

(1)yyyの前の<td> (2)</table> (3)下のセルは3,4,2と結合させたいのです。(元は9) (4)これは、わかりません。コピペしたのを使ってるもので…

  • auty
  • ベストアンサー率58% (284/486)
回答No.1

間違いが多くなっていて、意図が良く分かりませんが、 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head></head> <body bgcolor="blue"> <table border=0 bgcolor="#ffffff" cellspacing=0 cellpadding=0> <tr> <td> <table border=1 cellspacing=1 cellpadding=3> <tr bgcolor="#eeeeee"><td colspan="9">aaa</td></tr> <tr bgcolor="#eeeeee"><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td><td>ccc</td><td>yyy</td><td>aaa</td></tr> </table> </td> </tr> </table> <hr /> <table border=1 cellspacing=1 cellpadding=3> <tr bgcolor="#aaaaaa"><td colspan="9">aaa</td></tr> <tr bgcolor="#aaaaaa"><td colspan="3">ccc</td><td colspan="3">kkk</td><td colspan="3">mmm</td></tr> </table> </body> </html>

kotikaze6
質問者

補足

レスが遅れました。申し訳ございません、ありがとうございました。 私がしたかったことは、細い罫線で線が二重にならず、かつ 上が3セル、下が7セルあるようなテーブルを作りたかったのです。 しかし、colspanを使った際、縦罫線が消えてしまい困ったわけです。 用意してくれたソースも実行してみましたが、colspanを使ったところ やはり罫線が消えてしまいました。  テーブルで座標指定できるのか、今はそれも考えています。

関連するQ&A

  • このフレームを直してもらいたいのですが

    わかりにくいかとは思いますが、 下のようなフレームを作っています。 ―――――――――――――――――― |           | |           |   ここがない→ |________ |__________ |                          | |                          | |___________________| まず「田」のテーブルを作って、下段を結合して一つにすると、 以上のようになってしまいます。なぜでしょうか? ソースを書いておきますので、直してもらえませんでしょうか。 -------------------------------------------------- <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <P> <TABLE cellSpacing=0 cellPadding=0 bgColor=#000000 border=0> <TBODY> <TR> <TD bgColor=#000000> <TABLE cellSpacing=1 cellPadding=7 border=0> <TBODY> <TR> <TD bgColor=#ffffff colSpan=5> <P>aaaaa</P></TD> <TD bgColor=#ffffff>ここが消える→</TD></TR> <TR> <TD bgColor=#ffffff colSpan=6> <P>aaaaa</P></TD></TR></TBODY></TABLE> </TD></TR></TR></TBODY></TABLE></P> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • テーブルの作り方をご教示ください

    図のようなテーブルを作りたいのですがどうすればいいのかわかりません。 図はエクセルで書きました。 ----------------------------------------------- <table border=0 cellspacing=0 cellpadding=0> <tr> <td> <table border=0 bgcolor="#000000" cellspacing=1 cellpadding=1 width="230"> <tr bgcolor="#FFFFFF"> <td> 1 </td> </tr> <tr bgcolor="#FFFFFF"> <td> 2 </td> <tr bgcolor="#FFFFFF"> <td> 3 </td> </table> </td> </tr> </table> ----------------------------------------------- まではわかったのですが、 3と4を区切る方法がわかりません。 ご回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブル内のテーブルの高さを揃えたい。

    CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?

    • ベストアンサー
    • HTML
  • スタイルシートの書き方

    HPの中に以下のようなテーブルを並べて作っているのですが、後からまとめて編集しやすいようにCSSファイルを別に作ろうと思います。 自分であれこれ試してはいるのですが、スマートな(?)スタイルシートの書き方がいまいちわかりません。 どのように指定すればいいでしょうか? 因みに下のタグもかなり自己流な部分があるのではないかと思うので、おかしいところがあれば指摘してください。 よろしくお願いします。 ------------------------------------------------------ <table border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="1" cellpadding="2" width="500"> <tr><td bgcolor="#ffffff" width="150">AAA</td><td>BBB</td></tr> </table> </td> </tr> </table>

    • ベストアンサー
    • CSS
  • 【CSS】表に線を入れる

    <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#999999"> <TBODY> <TR> <TD bgcolor="#ffffff"></TD> <TD bgcolor="#ffffff"></TD> </TR> <TR> <TD bgcolor="#ffffff"></TD> <TD bgcolor="#ffffff"></TD> </TR> </TBODY> </TABLE> これと同じ事をスタイルシートで表現したいのですが、どのようにしたら良いでしょうか? いろいろと試したのですが、外側だけ線が引かれたり中だけ引かれたりと、うまく出来ません。

    • ベストアンサー
    • HTML
  • セルを透明に・・・

    以下のような表があります。 <TABLE cellpadding="3" cellspacing="1" bgcolor="#666666"> <TBODY> <TR> <TD bgcolor="#ffffff">項目1</TD> <TD bgcolor="#ffffff">内容1</TD> </TR> <TR> <TD bgcolor="#ffffff">項目2</TD> <TD bgcolor="#ffffff">内容2</TD> </TR> <TR> <TD bgcolor="#ffffff">項目3</TD> <TD bgcolor="#ffffff">内容3</TD> </TR> </TBODY> </TABLE> この状態で、壁紙を設定すると表の中は白でつぶれてしまいますよね。 これを表の中にも背景が出るようにすることは可能ですか? style="filter:alpha(opacity=0)"をいろいろなところに当てはめてみたのですが、うまく出来ませんでした。 何か方法はありますか?よろしくお願いします。

    • ベストアンサー
    • 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
  • tableをcssで表記したい

    下記のhtmlのスタイル部分をcssで表記したいのですが、 どのようにすればよいのでしょうか? tableの種類が一つの場合はできるのですが・・・ <table width="100" border="1" cellpadding="1" cellspacing="1" bgcolor="#AAAAAA"> <tr> <td width="30" bgcolor="#FFFFFF">a</td> <td ">b</td> </tr> </table> <br> <table width="50" border="2" cellpadding="2" cellspacing="2" bgcolor="#BBBBBB"> <tr> <td width="25" bgcolor="#CCCCCC">c</td> <td>d</td> </tr> </table>

  • 入れ子にしたテーブルをheight100%にする

    お世話になります。 以下のソースで、table2の高さを100%にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか?? ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • 楽天ブログ・日記の下に表示のおすすめアイテムって・・・。

    ブログ初心者です。 いつかはアフェリエイトまでできると良いな~と思っていますが、まだその前の段階ですでにつまづいております・・・(汗) メインの日記の下に、おすすめアイテムを載せられるように設定したのですが、こちらの画像は私自身で気にいった商品を載せられるのですよね・・・。 (もしかして、楽天の広告ページ??) 【Recommend Item】ってタイトルに出ています。 今まで、自動的にブログの内容に合うようなアイテムが表示されているような気がしますが、好きな雑貨などを載せたいのですが・・・。 もし自分で出来るならどのように画像を載せればいいのでしょうか?? たとえばですが、アフェリエイトのやり方のページで出ていたこの商品を載せたい場合、この部分をどこに載せるとブログのおすすめアイテムに載せられるのか教えてください。 すみません・・・。 パソコンが苦手で、↓これも間違っているのかな?と思っています。 <a href="http://***" target="_blank"> .:*:.*.:*:.2本ベルトのフォーマルシューズ .:*:.*.:*:. </a>        ************** さらに、画像の載せ方が分からないのですが、こちらのテンプレートを製作した方は全然ブログをされていないようなので、もし、分かる方でいらっしゃったら教えてください! コチラは、トップやアフェリエイト部分のテンプレートらしいのですが 。 <center><table cellspacing="3" cellpadding="0" width="560"><tr><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像1</td></tr></table></td></tr></table></td><td width="34%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像大2</td></tr></table></td></tr></table></td><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像3</td></tr></table></td></tr></table></td></tr><tr><td colspan="3" align="right"><font style="font-size:10px"> </a></font></td></tr></table></center> 画像1・2・3の部分に、何を入れるとショップの商品とリンクするのでしょうか?? どうぞ、よろしくお願いいたします。