HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。

解決済

質問者：yukunman29
質問日時：2010/09/02 16:27
回答数：3件

HTMLを使って表を作成しているのですが、枠線がキレイに揃いません。
下のソースで５０と１３０のとこをきちんとエクセルのように枠線揃えたいのですが、
どのようにしたら良いのでしょうか？
よろしくお願いします。

<HTML>
<BODY>
<TABLE border=1><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><TR>
<TD width=50>50</TD>
<TD width=200>200</TD>
<TD width=130>130</TD>
</TR><TR>
<TD width=50>50</TD>
<TD width=200>200</TD>
<TD width=130>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=250>250</TD>
<TD width=130>130</TD>
</TR></TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： fujillin
回答日時：2010/09/02 17:52

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>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

テーブルを入れ子にしない方法がスッキリして良いですね。

参考になりました。

通報する

お礼日時：2010/09/06 16:25

No.2

回答者： yyr446
回答日時：2010/09/02 17:31

枠線とマージン分を考慮してないからですね。

もっと、おりこうな方法もあるはずですが、とりあえず、
見ながら調整すればああ
これで　ぴったし（ＩＥ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>

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

こつこつ合わせる必要があるのですね。

参考になりました。

通報する

お礼日時：2010/09/06 16:22

No.1

回答者： rurino
回答日時：2010/09/02 17:30

<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ならセルの長さへの加算はいらないのですが…