borderが1のテーブル

質問

ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか？
私が書いたのはこんなかんじです。

<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1">
<tr bgcolor="#999999">
<th><div align="center"><font size="2">名称</font></div></th>
<th><div align="center"><font size="2">模型材質</font></div></th>
<th><div align="center"><font size="2">生産材質</font></div></th>
</tr>
<tr bgcolor="#FFFFFF">
<td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td>
<td><div align="center"><font size="2">発泡塩ビ板</font></div></td>
<td><div align="center"><font size="2">プラスチック</font></div></td>
</tr>
</table></td>
</tr>
</table>

CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。
よろしくおねがいします。

回答No.2

BlueRay · ベストアンサー

簡単に言うと、質問で記述されているHTMLで表示される表と同じ物をテーブルを２つ使わずに１つでやりたいと言うことでいいのでしょうか？
※解釈が間違っていたらすいません。

スタイルシートを使ってもいいのでしょうか？
いいのであれば、以下の様にしてみては如何でしょうか。
もっといい方法が他にもあるかもしれませんが参考にどうぞ。

<style>
table {
border-width:1px 1px 1px 1px;
border-style: solid solid solid solid;
border-color:#000000 #000000 #000000 #000000;
}
th.type_01 {
border-right:solid 1px #000000;
}
td.type_01 {
border-top:solid 1px #000000;
border-right:solid 1px #000000;
}
td.type_02 {
border-top:solid 1px #000000;
}
</style>
<table class="waku2" width="400" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#999999">
<th class="type_01"><div align="center"><font size="2">名称</font></div></th>
<th class="type_01"><div align="center"><font size="2">模型材質</font></div></th>
<th><div align="center"><font size="2">生産材質</font></div></th>
</tr>
<tr bgcolor="#FFFFFF">
<td class="type_01" bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td>
<td class="type_01"><div align="center"><font size="2">発泡塩ビ板</font></div></td>
<td class="type_02"><div align="center"><font size="2">プラスチック</font></div></td>
</tr>
</table>

お礼

BlueRayさんが書いてくださったものを、貼り付けてブラウザで確認してみました！コレです！これがやりたかったんです！こうやって記述するんですね！スタイルシートは奥が深いです。的確なご回答、ありがとうございました！！

回答No.1

BlueRay

どんな感じの表になるのかいまいちイメージが掴めないので
簡単にでも、図とかで補足してもらえますか？

補足

私がやっているやり方は、tableでbgcolorが#000000の四角をひとつ作り、その中にまたtableの入れ子をしています。中に入っている方のtableのcellspacingを1にして、以下の表を、borderを1にしています。

-----------------------------
｜ 名称 | 模型材質 |　生産材質　　|
-----------------------------
｜ 本体 | 発泡塩ビ板 |　プラスチック|
-----------------------------
↑ずれてたらすいません。
普通にtableのborder=1で表現しようとすると、なんだかボコっとした立体的な表のラインになりますよね？それがイヤなので、先ほど述べたようなtableの入れ子をしているのですが、もっと効率的なやり方はありますでしょうか？説明が下手ですいません。