- ベストアンサー
特定列だけ行数が多い表の作り方
HTMLでborder="1"で表を作る際に、例えば合計欄のような、特定の列だけ行数が多い表を作るには、どのようにして作ればいいのでしょうか？ ┌─┬─┬─┐ ├─┼─┼─┤ └─┴─┼─┤ └─┘←このような部分 ２行目までと３行目とを別のテーブルで作ってみたのですが、空間が空いてしまったり、線が太くなってしまいうまくいきませんでした。 いい方法があれば教えてください。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
＃３です。 ＞ご回答ありがとうございます。 ＞せっかくご回答いただいたのに、申し訳ないのですが、外枠の見た目をborder="1"と同じ見た目で作ることは可能でしょうか？ かな～り複雑になるでしょうが、可能な気がします。 「モドキ枠線」でやっている事は、以下のような事です。 ・すべてのテーブルを枠線無しで作る ・背景が黒いセルを作る ・そのセルの内側に、隙間を１ピクセル空けて、背景が白いセルを作り、その中に文字を書く この他にも、以下の方法で「線」を書けます。 「幅が１ピクセルで背景が黒いセルを作る」 「高さが１ピクセルで背景が黒いセルを作る」 これらを組み合わせれば、全体を ┌────┐ │ │ └──┐ │ └─┘ のような枠で囲えると思います。
その他の回答 (6)
<style type="text/css"> <!-- td.c { border-top-width: 2px; border-right-width: 0px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: ridge; border-right-style: none; border-bottom-style: ridge; border-left-style: ridge; border-top-color: #999999; border-bottom-color: #999999; border-left-color: #999999; } td.o { border: 2px ridge #999999; } td.l { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: none; border-right-style: none; border-bottom-style: ridge; border-left-style: ridge; border-bottom-color: #999999; border-left-color: #999999; } td.u { border-top-width: 0px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: none; border-right-style: ridge; border-bottom-style: ridge; border-left-style: ridge; border-right-color: #999999; border-bottom-color: #999999; border-left-color: #999999; } --> </style> </head> <body> <table width="300" border="0" cellspacing="0" cellpadding="5"> <tr> <td class="c">aaa</td> <td class="c">bbb</td> <td class="o">ccc</td> </tr> <tr> <td class="l">ddd</td> <td class="l">eee</td> <td class="u">fff</td> </tr> <tr> <td> </td> <td> </td> <td class="u">ggg</td> </tr> </table> WinのIE、NN７確認済み、NN4.7不可です。 Mac確認していませんがおそらくダメ
お礼
作成していただきありがとうございます。 CSSの知識はほとんどないのですが、これから 色々試してみて、border="1"と同じ見た目に できるかどうか試してみたいと思います。
- the845t
- ベストアンサー率33% (246/743)
#4です。 ごめんなさい。黒背景で試していたので、 線の色を白にしてました。 #fffの個所を#000や#f00など適当な色に変更してください。
補足
ありがとうございます。 線は表示されましたが、やはりborder="1"と全く同じ表示するには、不可能なんでしょうかね？
- the845t
- ベストアンサー率33% (246/743)
スタイルシートを使って、 <head></head>間に、 <style type="text/css"> <!-- .Table1 { border-width:0 1px 0 0; border-style:solid; } .Table1 td { border-width:1px 0 0 1px; border-style:solid; border-color:#fff; margin:0;padding:2px; } --> </style> とし、 <table border="0" class="Table1" cellspacing="0" cellpadding="0"> <tr> <td>あ</td><td>い</td><td>う</td> </tr> <tr> <td><br /></td><td><br /></td><td><br /></td> </tr> <tr> <td colspan="2" style="border-width:1px 0 0 0;"><br /></td> <td style="border-bottom-width:1px;"><br /></td> </tr> </table> もすこし簡単に書けるような気もしますがとりあえず。
補足
ご回答ありがとうございます。 いただいたソースコードで、試してみたところ、枠が見えないのですが、どこか間違ったところでもあるのでしょうか？
- chie65536
- ベストアンサー率41% (2512/6032)
＃２です。 他の方法で無理矢理に枠線(モドキ)を表示する事で、枠線を細くする事が出来ました。 枠線は「モドキ」なので、すべての<tabel>タグは「枠線無し(border=0)」になっています。 また、編集ミスで<td>タグに余計な属性が付いていたので削りました。 <table border=0 cellpadding=0 cellspacing=1> <tr> <td> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=0> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=#ffffff align=center width=50>りんご</td></tr> </table></td></tr></table> </td> <td> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=0> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=#ffffff align=center width=30>５個</td></tr> </table></td></tr></table> </td> <td> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=0> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=#ffffff align=center width=50>２５０円</td></tr> </table></td></tr></table> </td> </tr> <tr> <td> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=0> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=#ffffff align=center width=50>みかん</td></tr> </table></td></tr></table> </td> <td> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=0> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=#ffffff align=center width=30>３個</td></tr> </table></td></tr></table> </td> <td> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=0> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=#ffffff align=center width=50>１８０円</td></tr> </table></td></tr></table> </td> </tr> <tr> <td> </td> <td> </td> <td> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=0> <table border=0 cellpadding=1 cellspacing=0> <tr><td bgcolor=#ffffff align=center width=50>４３０円</td></tr> </table></td></tr></table> </td> </tr> </table>
補足
ご回答ありがとうございます。 せっかくご回答いただいたのに、申し訳ないのですが、外枠の見た目をborder="1"と同じ見た目で作ることは可能でしょうか？ また、Exellで表を作ってhtmlで保存すると、CSSを利用して表を作っているようですが、CSSを利用して見た目がborder="1"のような表を作ることは可能でしょうか？
- chie65536
- ベストアンサー率41% (2512/6032)
<table border=0 cellpadding=0 cellspacing=1> <tr> <td> <table border=1 cellpadding=1 cellspacing=0> <tr><td align=center width=50 border=1>りんご</td></tr> </table> </td> <td> <table border=1 cellpadding=1 cellspacing=0> <tr><td align=center width=30 border=1>５個</td></tr> </table> </td> <td> <table border=1 cellpadding=1 cellspacing=0> <tr><td align=center width=50 border=1>２５０円</td></tr> </table> </td> </tr> <tr> <td> <table border=1 cellpadding=1 cellspacing=0> <tr><td align=center width=50 border=1>みかん</td></tr> </table> </td> <td> <table border=1 cellpadding=1 cellspacing=0> <tr><td align=center width=30 border=1>３個</td></tr> </table> </td> <td> <table border=1 cellpadding=1 cellspacing=0> <tr><td align=center width=50 border=1>１８０円</td></tr> </table> </td> </tr> <tr> <td> </td> <td> </td> <td> <table border=1 cellpadding=1 cellspacing=0> <tr><td align=center width=50 border=1>４３０円</td></tr> </table> </td> </tr> </table> なお、枠線が２ピクセルと太いですが、これ以上は細くなりません。 枠線は、内側のテーブルタグで表示しているので、最低でも、テーブルの外枠線とセルの枠線の各１ピクセル、合計で２ピクセルの太さになってしまいます。
- mnabe
- ベストアンサー率33% (427/1283)
<table border='1'> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td colspan='2' /> <td>合計</td> </tr> </table>
補足
ご回答ありがとうございます。 上記の方法だと、３行１列の左と下、３行２列の下に線が入ってしまいますので、線が入らない方法をご存知でしたらよろしくお願いします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_3_thumbnail_img_sm.png)
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
border="1"の線って、色はグレーで、よく見ると、右側と下側にしか線がなくて、立体的に見せてるんで、これをもどきで実現できるのかどうかわからないですけど、実現できるとしてもかなりの労力がかかりそうですね。 色々ご親切にありがとうございました。