htmlについてです。

質問

yahooのこちらのような表を作りたいのですがなかなか　うまいこといきません・・・

<TABLE width="700" cellspacing="0" cellpadding"0" border="1" bordercolor="7fff7f" align="center">
<TBODY>
<tr><td width="" bgcolor="#f2fff2" valign="top" hspace="10"><B>ギター講座</B></td>
<td width="" bgcolor="#f2fff2" valign="top" hspace="0"><B>ギター講座</B></td>

<td width="" bgcolor="#f2fff2" valign="top"><B>ギター講座</B></td>
</tr>
<td>a</td><td>i</td><td>u</td>

</table>

線幅を１にしているのですが　線同士が重なってちょっと太くなっています。

しかし１以下はないのでまったくわかりません。

あと<TD>同士の間に隙間を開けたいのですがどうしたらいいでしょうか？

幅６００で使うとして
<td width="190">文字</TD><td width="">空白</TD><td width="190">文字</TD><td width="10">空白</TD><td width="190">文字</TD>
と作って　外枠 border="1"を付けると　空白ではなく　□で　出来てしまいます。

片方だけでも結構ですので
どなたかご教授お願いします。

回答No.2

4649panda · ベストアンサー

td同士の隙間と言うのがどのようなパターンか解らなかったので、3通り作ってみました。
2か3だと思うのですが、違っていたらすみません。

CSSでスタイルを指定しました。

2)
CSS側
table#table02 {
width: 600px;
border-collapse: collapse;
border: 1px solid #7fff7f;
}
table#table02 th {
width: 190px;
padding: 5px;
background-color: #f2fff2;
text-align: left;
border: 1px solid #7fff7f;
}
table#table02 th.blank {
width: 15px; /*(600-190x3)/2です*/
background-color: #ffffff;
padding: 0;
border: none;
}
table#table02 td {
width: 190px;
padding: 5px;
border: 1px solid #7fff7f;
}
table#table02 td.blank {
width: 15px;
padding: 0;
border: none;
}

HTML側
<table id="table02">
<tr>
<th>ギター講座</th>
<th class="blank"></th>
<th>ギター講座</th>
<th class="blank"></th>
<th>ギター講座</th>
</tr>
<tr>
<td>文字</td>
<td class="blank"></td>
<td>文字</td>
<td class="blank"></td>
<td>文字</td>
</tr>
</table>

3)
CSS側
table#table03 {
width: 600px;
border-collapse: collapse;
}
table#table03 th {
padding: 5px;
background-color: #f2fff2;
text-align: left;
border: 1px solid #7fff7f;
}
table#table03 td {
width: 190px;
padding: 5px;
border: 1px solid #7fff7f;
}
table#table03 th.blank {
width: 15px;
background-color: #ffffff;
padding: 0;
border: none;
}
table#table03 td.blank {
width: 15px;
padding: 0;
border: none;
}

HTML側
<table id="table03">
中身はtable2と一緒です。
</table>

>線幅を１にしているのですが　線同士が重なってちょっと太くなっています。
しかし１以下はないのでまったくわかりません。

bordertが重なって太くなってしまった場合、私はよく片方のborderを消してやります。

回答No.1

marutone

以下のソースをご参照ください。

まずは1点目。

○変更前
<TABLE width="700" cellspacing="0" cellpadding"0" border="1" bordercolor="7fff7f" align="center">

○変更後
<TABLE width="700" cellspacing="0" cellpadding"0" border="1" bordercolor="7fff7f" align="center" style="border-collapse:collapse;">

そして2点目。

○変更前
<td width="190">文字</TD>

○変更後
<td width="190" style="padding:5px;">文字</TD>

間違っていたら申し訳ないです。