- ベストアンサー
HTML表の枠線揃え方
- HTMLを使って表を作成している際に、枠線の揃え方に問題が発生しています。
- 特に、幅が異なる列の枠線を揃えることが困難です。
- どのようにすればエクセルのように枠線をキレイに揃えることができるでしょうか？
- yukunman29
- お礼率100% (3/3)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
borderおよびcellspacingの幅を考慮していないのが原因かと。 No1様、No2様が幅を調整する例をご提示なので、テーブルを入れ子にしない方法で… （入れ子をはずしてしまうのが、目的にあっているのかどうか不明ですが） CSS指定に修正しています。（枠線に色をつけることも可能） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> table.test { border-collapse:separate; empty-cells:hide; } table.test { border:1px solid #888; border-color:#dee #288 #288 #dee; } table.test td { border:1px solid #888; border-color:#288 #dee #dee #288; } </style> </head> <body> <table class="test"> <tr> <th style="width:50px;"></th> <th style="width:135px;"></th> <th style="width:65px;"></th> <th style="width:65px;"></th> <th style="width:65px;"></th> </tr> <tr> <td>50</td> <td colspan="2">200</td> <td colspan="2">130 </tr> <tr> <td>50</td> <td colspan="2">200</td> <td colspan="2">130 </tr> <tr><td></td></tr> <tr> <td rowspan="2">50</td> <td rowspan="2">135</td> <td rowspan="2">65</td> <td colspan="2">130</td> </tr> <tr> <td>65</td> <td>65</td> </tr> <tr><td></td></tr> <tr> <td>50</td> <td>135</td> <td>65</td> <td>65</td> <td>65</td> </tr> <tr> <td colspan="3">250</td> <td colspan="2">130</td> </tr> </table> </body> </html>
その他の回答 (2)
- yyr446
- ベストアンサー率65% (870/1330)
枠線とマージン分を考慮してないからですね。 もっと、おりこうな方法もあるはずですが、とりあえず、 見ながら調整すればああ これで ぴったし（ＩＥ8） <TABLE border=1> <TR> <TH width="50">a</TH> <TH width="135">b</TH> <TH width="65">c</th> <TH width="65">d</th> <TH width="65">e</th> </TR> <TR> <TD colspan="5"> <TABLE border=1> <TR> <TD width="47">50</TD> <TD width="211">200</TD> <TD width="135">130</TD> </TR> <TR> <TD width="47">50</TD> <TD width="211">200</TD> <TD width="135">130</TD> </TR> </TABLE> </TD> </TR> <TR> <TD colspan="5"> <TABLE border=1> <TR> <TD width=50 rowSpan=2>50</TD> <TD width=135 rowSpan=2>135</TD> <TD width=65 rowSpan=2>65</TD> <TD width=130 colSpan=2>130</TD> </TR> <TR> <TD width=65>65</TD> <TD width=65>65</TD> </TR> <TR> <TD width=50>50</TD> <TD width=135>135</TD> <TD width=65>65</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR> <TR> <TD width=250 colSpan=3>250</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR> </TABLE> </TD> </TR> <TR> <TD colspan="5"> <TABLE border=1> <TR> <TD width=262>250</TD> <TD width=135>130</TD> </TR> </TABLE> </TD> </TR> </TABLE>
お礼
回答ありがとうございます。 こつこつ合わせる必要があるのですね。 参考になりました。
- rurino
- ベストアンサー率55% (38/68)
<TABLE border=1 cellpadding="0" cellspacing="0"> <TR> <TH width="50"></TH> <TH width="135"></TH> <TH width="65"></th> <TH width="65"></th> <TH width="65"></th> </TR> <TR> <TD colspan="5"> <TABLE border=1 cellpadding="0" cellspacing="0"> <TR> <TD width=50>50</TD> <TD width=202>200</TD> <TD width=132>130</TD> </TR> <TR> <TD width=50>50</TD> <TD width=200>200</TD> <TD width=132>130</TD> </TR> </TABLE> </TD> </TR> <TR> <TD colspan="5"> <TABLE border=1 cellpadding="0" cellspacing="0"> <TR> <TD width=50 rowSpan=2>50</TD> <TD width=135 rowSpan=2>135</TD> <TD width=65 rowSpan=2>65</TD> <TD width=131 colSpan=2>130</TD> </TR> <TR> <TD width=65>65</TD> <TD width=65>65</TD> </TR> <TR> <TD width=50>50</TD> <TD width=135>135</TD> <TD width=65>65</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR> <TR> <TD width=250 colSpan=3>250</TD> <TD width=65>65</TD> <TD width=65>65</TD> </TR> </TABLE> </TD> </TR> <TR> <TD colspan="5"> <TABLE border=1 cellpadding="0" cellspacing="0"> <TR> <TD width=254>250</TD> <TD width=132>130</TD> </TR> </TABLE> </TD> </TR> </TABLE> cellpaddingとcellspacingの初期化と borderの分をセルの長さに加算する必要があります。 border=0ならセルの長さへの加算はいらないのですが…
お礼
回答ありがとうございます。 cellpaddingとcellspacingの初期化と borderの分をセルの長さに加算する必要があるんですね。 参考になりました。
お礼
回答ありがとうございます。 テーブルを入れ子にしない方法がスッキリして良いですね。 参考になりました。