- ベストアンサー
複雑な表は作れるのでしょうか？
****************** *^^^^^^^^^* ^^^^^^^ * ********** ^^^^^^^ * * ^^^^^^^^*^^^^^^^^^* **********^^^^^^^^ * *^^^^^^^^^^^^^^^^^^ * * ^^^^^^^^^^^^^^^^^^* ******************* ↑このような表を作るのは無理でしょうか？ もしできないとしたら、ジャバスクリプト、ＣＳＳだとしたらできるのでしょうか？ 参考サイトあったら教えてください。
- drago_cyber
- お礼率32% (30/92)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
例えばこんな感じでしょうか↓ <html> <head> <style type="text/css"> <!-- .line2 { border: 2px solid gray;} .linetl { border-top: 0px solid gray; border-left: 0px solid gray; border-right: 2px solid gray; border-bottom: 2px solid gray; } --> </style> </head> <body> <table class="line2" cellspacing=0 cellpadding=0> <tr> <td> <table cellspacing=0 cellpadding=0> <tr><td class="linetl">ああ</td><td class="linetl">いい</td></tr> <tr><td class="linetl">うう</td><td class="linetl">ええ</td></tr> <tr><td class="linetl">おお</td><td class="linetl">かか</td></tr> </table> </td> <td>きき</td> </tr> <tr> <td colspan="2">くく</td> </tr> <tr> <td colspan="2">けけ</td> </tr> </table> </body> </html> 参考サイト↓ http://www.tohoho-web.com/how2/table.htm#thin
その他の回答 (3)
- partita
- ベストアンサー率29% (125/427)
ちょっと長いけど、CSS使用しました。 <html> <head> <style type="text/css"> <!-- div.box { width:300px; height:300px; border:1px solid gray; } table.inline { display:inline; border-collapse:collapse; border-top-width:0; border-left-width:0; border-bottom:1px solid gray; border-right:1px solid gray; float:left; } table.inline td { padding:3px; border-right:1px solid gray; border-bottom:1px solid gray; border-top-width:0; border-left-width:0; } div.read { padding:5px; } --> </style> </head> <body> <div class="box"> <table class="inline"> <tr><td>かかかかか</td></tr> <tr><td>さささささ</td></tr></table> <div class="read"> あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお </div> </div> </body> </html> 外枠はdivで作りましたが、tableでも可能。 「あいうえおあいうえお…」のテキストを長くしてもご要望にこたえることが出来ると思います。 ボーダー設定や横幅は適当に数値を変えてください。
お礼
ありがとうございます 大変参考になりました。 なかなか、いい感じです。」
- cyokokichi
- ベストアンサー率21% (32/152)
こんなのはいかがでしょうか？ <table border="1"> <tr> <td colspan="20">*</td> </tr> <tr> <td>*</td><td colspan="9">^</td><td>* </td><td colspan="8">^</td><td>*</td> </tr> <tr> <td colspan="12">*</td><td colspan="7">^</td><td>*</td> </tr> <tr> <td>*</td><td colspan="8">^</td><td>*</td><td colspan="9">^</td><td>*</td> </tr> <tr> <td colspan="11">*</td><td colspan="8">^</td><td>*</td> </tr> <tr> <td>*</td><td colspan="18">^</td><td>*</td> </tr> <tr> <td>*</td><td colspan="18">^</td><td>*</td> </tr> <tr> <td colspan="20">*</td> </tr> </table> 上下の結合も同じ感覚でできますよ。 参考までに、 表ならエクセルで元を作ってスタイルシートでデザインするとカンタンです。
お礼
ありがとうございます。
- shy00
- ベストアンサー率34% (2081/5977)
表・・・テーブルでいいのですよね？ colspanというもの知っていますか？ これで、セルの結合をするだけではだめなのでしょうか？ colspanについては http://www.tagindex.com/html_tag/table/td_span.html など参考にしてください
お礼
早速ありがとうございます colspanは最近知りましたが、これですと行だけ、または列だけの結合です、上の表だけではわかりにくいですが列と行が交差するところが結合する方法をお願いします。
お礼
ありがとうございます 大変参考になりました。