【HTML＆CSS】テーブルの正しい作り方

質問

はじめまして。
Webページで、テーブルを作成する際の正しい手順について迷ってしまっているので、ご助力いただければ幸いです。

現在、XHTML1.0TとCSSでページを作成しています。
テーブルの作成は以前からしていましたが、CSSが絡むようになってから、どの方法がベストなのかがわかりません。

作成はDreamweaverとテキストエディタでの手書きと両方行っています。

疑問を抱いているのは、以下の点です。

☆　HTMLの<table>に対するborder属性、width属性、cellspacing属性、cellpadding属性は使用するべきなのか？

今現在は、<table><tr><th><td>のみで骨格を作成し、属性指定は行っておりません。するとすればthのscope属性くらいです。
ボーダーの指定には、table th tdそれぞれにCSSで上下左右のボーダー指定を行い、border-collapseプロパティで、セル間の隙間をなくしています。横幅もCSSのwidthプロパティを使用しています。

セル内の余白については、thやtdに対してpaddingプロパティで指定をしております。
この方法で特に問題なくできてはいるのですが、実際にwidth border cellpadding cellspacingの属性がいまだに非推奨になっていないようですし、ちょっと不安です。

みなさんはどのように作成しているのでしょうか？

Dreamweaverの参考書などでは、tableに対して上と左のボーダー、tdに対して、右と下のボーダーを指定して、border-collapseで隙間をつぶす方法が紹介されていたりもしました。
ただ、自分は、tdの上下左右のボーダーを指定してborder-collapseで隙間をなくしていますが、結果は同じ表記になります。
tableに上と左のボーダー、tdに右と下のボーダーと指定すること自体にはどのような意味があるのでしょうか？

混乱しているため、少々文章がおかしくなっているかもしれません。

意味が分かりづらい部分がありましたら、補足させていただいたいと思っています。

どうぞよろしくお願いいたします。

回答No.1

神崎 渉瑠（@taloo） · ベストアンサー

> 実際にwidth border cellpadding cellspacingの属性がいまだに非推奨になっていないようですし、ちょっと不安です。
borderやwidthは必要、または有る方が良いと思います。
レイアウトテーブルではなく、本来のテーブルの使い方、たとえば点数表などを、
スタイルシートを使わずに、borderなしで書いてみてください。
cellpaddingとcellspacingも必要だと判断されたからでしょう。

> ☆　HTMLの<table>に対するborder属性、width属性、cellspacing属性、cellpadding属性は使用するべきなのか？
スタイルシート未対応ブラウザ、または未使用設定で見る時（があるのかどうか知りませんが）を考えれば、必要だと思います。

> tableに上と左のボーダー、tdに右と下のボーダーと指定すること自体にはどのような意味があるのでしょうか？
テーブルの一番外の線だけ別の色やスタイルにしているとか、そういうことはないでしょうか？

*{margin:0;padding:0}
table{
border:1px solid blue;
border-collapse:collapse;
border-spacing:0;
}
td{
border: 1px solid red;
}

<table>
<tbody>
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td>2-1</td><td>2-2</td></tr>
</tbody>
</table>

たぶん、<table>のborderの上に<td>のborderが重なってしまうと思います。

とはいえ、おなじデザインでも、書き方は作り手によって様々な方法があるので、
自分が作りやすい作り方をすればいいと思います。

table{
border:1px solid blue;
}
td{
border-top:1px solid red;
border-left:1px solid red;
}
tr:first-child td{
border-top:0 none;
}
td:first-child{
border-left:0 none;
}
だったかな？(^^;
こういう方法もあります。（:first-child対応ブラウザのみ）

お礼

ありがとうございます。

上記のコードでは、IE6だと外枠が青、FF2だと外枠が赤になりました。
このあたりもブラウザの解釈の問題なんでしょうか。
いつもその辺に悩まされます。

＞スタイルシート未対応ブラウザ、または未使用設定で見る時（があるのかどうか知りませんが）を考えれば、必要だと思います。
なるほど、そうですよね。
どうもCSSを勉強していると、HTMLでの装飾が悪いことみたいに思えてくる変な錯覚に陥ります。

かなりすっきりしました。

ありがとうございました。