CSSでテーブルタグ用のスタイルを作成する

まずは、CSSでテーブルタグ用のスタイルを作成します。
基本は以下の3つでOK(おおよそ、以下の3つで事足りると思います)。

CSS(パターン1)

/* table幅の指定・隣接するセルのボーダーを重ねて表示 */
#contents table.style {
        width: 500px;
        border-collapse: collapse;
}

/* thの指定 */
#contents table.style th {
        font-weight: normal;
        background-color: #F0F0F0;
        border:1px solid #BFBFBF;
        text-align: center;
        padding: 12px;
}

/* tr tdの指定 */
#contents table.style tr td {
        width: 385px;
        background-color: #FFFFFF;
        border:1px solid #BFBFBF;
        text-align: left;
        padding: 12px;
}

補足

フォントの種類・サイズ・行間・カラー等はbodyタグに指定してください。
また、上記の例では、テーブルタグを適応する要素を”#contents”としていますが、こちらはサイト構成に合わせて変更してください。

●table幅の指定・隣接するセルのボーダーを重ねて表示
table幅を指定し、プロパティ”border-collapse”の値に”collapse(隣接するセルのボーダーを重ねて表示)”を指定します。
“border-collapse: collapse;”は、Firefox・Chrome・Safariといった主要モダンブラウザにも対応していますし、Internet Explorer7～9にも対応していますので、CSSでテーブルタグに指定する場合、とても扱いやすいプロパティと値だといえます。

また、プロパティ”border-collapse”の値には、”separate(隣接するセルのボーダーを間隔をあけて表示)”もありますが、セルのボーダーの間隔を指定するプロパティ”border-spacing”を有効にする際に使いますので、IE7以前には対応していないプロパティである”border-spacing”を使うことはないと思いますので、値”separate”は使う必要はないでしょう。

●thの指定
thは、フォントが太字で表示されますので、”font-weight”で通常表示を指定します。
次に、”background-color”で背景色、”border”でボーダーの太さ・種類・色、”text-align”でテキスト揃え、”padding”で余白を指定します。

●tr tdの指定
tr tdの幅を指定します(※幅を指定する場合、テーブル構成に合わせてtdもしくはthで調整してください)。
次に、背景色、ボーダーの太さ・種類・色、テキスト揃え、余白を指定します。

テーブルタグにCSSのスタイルを適応する

次は、HTML側の記述例です。

HTML

<div id="contents">
<table class="style">
<tr>
<th colspan="2">会社概要</th>
</tr>
<tr>
<th>社名</th>
<td>株式会社○○○○○</td>
</tr>
<tr>
<th>住所</th>
<td>〒○○○-○○○○<br />東京都渋谷区○○○町○番○号 ○○○○○ビル 10F</td>
</tr>
<tr>
<th>連絡先</th>
<td>Tel：○○-○○○○-○○○○<br />E-Mail：○○○○○@○○○○○.co.jp</td>
</tr>
<tr>
<th>事業内容</th>
<td>○○○○○○○○○○○○○○。<br />○○○○○○○○○○○○○○。<br />○○○○○○○○○○○○○○。<br />○○○○○○○○○○○○○○。<br />○○○○○○○○○○○○○○。</td>
</tr>
</table>
</div>

補足

tableタグにclass=”style”を適応するだけでとても簡単です。
以下のリンクよりデモページをご覧いただけます。

⇒ デモページ：CSS(パターン1)

CSSでテーブルタグ用の別スタイルを作成する

thの背景を立体的にする
thのカラーに背景画像を使うと、立体的な感じにすることもできます。

CSS(パターン2)

/* table幅の指定・隣接するセルのボーダーを重ねて表示 */
#contents table.style {
        width: 500px;
        border-collapse: collapse;
}

/* thの指定 */
#contents table.style th {
        font-weight: normal;
        background-image: url(../image/back.gif);
        background-repeat: repeat-x;
        background-color: #F0F0F0;
        border:1px solid #BFBFBF;
        text-align: center;
        padding: 12px;
}

/* tr tdの指定 */
#contents table.style tr td {
        width: 385px;
        background-color: #FFFFFF;
        border:1px solid #BFBFBF;
        text-align: left;
        padding: 12px;
}

補足

パターン1との違いは、反転表示されている10～11行目の箇所。

以下のような背景画像をX軸方向にのみリピートさせます。
すると、テーブルを立体的にみせることができます。

▼上部が2px程の白のライン、下部がグレーの背景画像を用意
※白のライン部分が分りにくいので、画像の周りにグレーの境界線を引いています。


⇒ デモページ：CSS(パターン2)

thの背景をグラデーションにする
thのカラーにCSS3のグラデーションを使ってもよいですね。
CSS3 PIEを使うと、CSS3のグラデーションに対応していないInternet Explorerのバージョン7～9でもグラデーションを使うことができるようになります。
CSS3 PIEに関しては、以前の記事で紹介していますので、そちらをご覧ください。
⇒ Internet Explorer9以前でもCSS3を使う

CSS(パターン3)

/* table幅の指定・隣接するセルのボーダーを重ねて表示 */
#contents table.style {
        width: 500px;
        border-collapse: collapse;
}

/* thの指定 */
#contents table.style th {
        font-weight: normal;
        background: linear-gradient(#F0F0F0,#FAFAFA);
        background: gradient(linear,0 0,0 bottom,from(#F0F0F0),to(#FAFAFA));
        background: -webkit-gradient(linear,0 0,0 bottom,from(#F0F0F0),to(#FAFAFA));
        /* CSS3 PIE独自プレフィックス */
        -pie-background: linear-gradient(#F0F0F0,#FAFAFA);
        /* behaviorスクリプトPIE.htcのパス */
        behavior: url(/demo/demo008/PIE.htc);
        border:1px solid #BFBFBF;
        text-align: center;
        padding: 12px;
}

/* tr tdの指定 */
#contents table.style tr td {
        width: 385px;
        background-color: #FFFFFF;
        border:1px solid #BFBFBF;
        text-align: left;
        padding: 12px;
}

補足

パターン1との違いは、反転表示されている10～16行目の箇所(※改行部分が分りにくい場合、ソースが表示されているSyntaxHighlighter上にカーソルを合わせると右上にアイコンが表示されますので、一番左のアイコン”ソースを表示”で開く画面よりご確認ください)。

“linear-gradient~”はmozilla系ブラウザの記述で、グラデーションのトップカラー、ボトムカラーの順番に記述していきます。 “gradient(linear~”はwebkit系ブラウザの記述で、開始位置(left topでもOK)、終了位置(left bottomでもOK)、グラデーションのトップカラー、ボトムカラーの順番に記述していきます。

”ベンダープレフィックスを自動で追加してくれるPrefix free”を使用すると、上記のようにベンダープレフィックスを省略できます。
ベンダープレフィックスとPrefix freeに関しては、以前の記事で紹介していますので、そちらをご覧ください。
⇒ CSS3のベンダープレフィックス

一つ注意点としては、iPhoneやAndroid端末のブラウザでもCSS3のグラデーションを反映させたい場合、”gradient(linear~”の前にベンダープレフィックス(-webkit-)を追記する必要があります。Prefix freeが対応しているブラウザのバージョンとスマートフォンのMobile SafariやAndroid Browserで対応状況が異なるためです(※上記でいうと12行目の箇所ですね)。Opera Mobileにも対応させたい場合、ベンダープレフィックス”-o-”も追記した方がよいかもしれません。

[2012.9.18追記]
Prefix freeの2012.9.18時点の最新バージョン1.0.7では、スマートフォンの以下のブラウザも対応されるようになりました。
Mobile Safari・Android Browser・Chrome Mobile・Opera Mobile。
ですが、一部のシミュレーターでは対応していないようです(※実機・シミュレーター共に反映させたい場合、ベンダープレフィックスを付ければ両方共に反映されます)。

次に、CSS3 PIE用の独自プレフィックス、behaviorスクリプトPIE.htcのパスを追記します(これで、CSS3のグラデーションに対応していないInternet Explorerのバージョン7～9でもグラデーションを使うことができます)。

⇒ デモページ：CSS(パターン3)

CSS3で柔軟な指定をする
CSS3を使用すると、さらに柔軟な指定が可能となります。
Internet Explorer9未満には対応していないCSS3も、IE9.jsを使用すると一部のセレクタやプロパティがInternet Explorerの5.5～8で使用できるようになります。
IE9.jsに関しては、以前の記事で紹介していますので、そちらをご覧ください。
⇒ HTML5.jsとIE9.js

今回は、CSS3の擬似クラスを使用します。
要素の位置を算定する”:nth-child(n)”を使います。

CSS(パターン4)

/* table幅の指定・隣接するセルのボーダーを重ねて表示 */
#contents table.style {
        width: 500px;
        border-collapse: collapse;
}

/* thの指定 */
#contents table.style th {
        color:#FFFFFF ;
        font-weight: normal;
        background-color: #508CBE;
        border:1px solid #BFBFBF;
        text-align: center;
        padding: 12px;
}

/* 奇数番目のtrの指定(=2n+1) */
#contents table.style tr:nth-child(odd) {
        background-color: #F5FAFF;
}

/* 偶数番目のtrの指定(=2n) */
#contents table.style tr:nth-child(even) {
        background-color: #FFFFFF;
}

/* 奇数番目のtdの指定(=2n+1) */
#contents table.style td:nth-child(odd) {
        border:1px solid #BFBFBF;
        text-align: center;
        padding: 12px;
}

/* 偶数番目のtdの指定(=2n) */
#contents table.style td:nth-child(even) {
        width: 385px;
        border:1px solid #BFBFBF;
        text-align: left;
        padding: 12px;
}

補足

パターン1との違いは、反転表示されている9・11行目の箇所(※thのフォントカラーと背景色を指定しています)、17～40行目の箇所(※CSS3の擬似クラス”:nth-child(n)”を使用し、行ごとにtrの背景色と列ごとのtdのテキスト揃えを指定しています)。

●thの指定
9・11行目でフォントカラーと背景色を指定しています。

●奇数番目のtrの指定(=2n+1)
“:nth-child(odd)”で奇数行目のtrの背景色を指定しています。
“odd”が奇数番号を指定しており、”2n+1″でも構いません(※この場合、住所と事業内容の行の背景色ですね。1行目の会社概要は、thとすることで別の背景色を指定しています。11行目ですね)。

●偶数番目のtrの指定(=2n)
“:nth-child(even)”で偶数行目のtrの背景色を指定しています。
“even”が偶数番号を指定しており、”2n”でも構いません(※この場合、社名と連絡先の行の背景色ですね)。

●奇数番目のtdの指定(=2n+1)
“:nth-child(odd)”で奇数列目のtdのボーダー・テキスト揃え・余白を指定しています(※この場合、1列目の社名と住所と連絡先と事業内容のボーダー・テキスト揃え・余白ですね)。

●偶数番目のtdの指定(=2n)
“:nth-child(even)”で偶数列目のtdのボーダー・テキスト揃え・余白を指定しています(※この場合、2列目の社名と住所と連絡先と事業内容の詳細箇所のところですね)。

HTMLも以下のように一部変更します。

HTML

<!--headタグ内に追記-->
<!--IE9未満-->
<!--[if lt IE 9]><script src="js/ie9.js" type="text/javascript"></script><![endif]-->

<!--bodyタグ内の記述-->
<div id="contents">
<table class="style4">
<tr>
<th colspan="2">会社概要</th>
</tr>
<tr>
<td>社名</td>
<td>株式会社○○○○○</td>
</tr>
<tr>
<td>住所</td>
<td>〒○○○-○○○○<br />東京都渋谷区○○○町○番○号 ○○○○○ビル 10F</td>
</tr>
<tr>
<td>連絡先</td>
<td>Tel：○○-○○○○-○○○○<br />E-Mail：○○○○○@○○○○○.co.jp</td>
</tr>
<tr>
<td>事業内容</td>
<td>○○○○○○○○○○。<br />○○○○○○○○○○。<br />○○○○○○○○○○。<br />○○○○○○○○○○。<br />○○○○○○○○○○。</td>
</tr>
</table>
</div>

補足

●headタグ内に追記
Internet Explorer9未満には対応していないCSS3の一部のセレクタやプロパティをInternet Explorerの5.5～8で使用できるようにします。
ie9.jsは、以下よりダウンロードしてください。
⇒ IE9.JS

※以下のようにGoogle Codeから読み込んでも構いません。
<!–[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]–>

●bodyタグ内の記述
thを会社概要の箇所のみに変更します。

⇒ デモページ：CSS(パターン4)

要素の位置を算定する”:nth-child(n)”は、指定された要素が親から見てn番目の子である要素を指定することができるとても便利な擬似クラスです。
複数行のテーブルを扱う際、以下のように使うとさらに便利ですね。

/* trの子として1番目のtdに適応 */
tr td:nth-child(1){
    プロパティ: 値;
}
/* trの子として7番目のtdに適応 */
tr td:nth-child(7){
    プロパティ: 値;
}

“複数行ある中の1列目と7列目”なんて指定ができます。
カレンダー作成等に便利ですね。

Dreamweaverでコーディングする方は覚えておきましょう

Dreamweaverでコーディングする場合、デザインビューでは”border-collapse: collapse;(隣接するセルのボーダーを重ねて表示)”は認識されません。
ブラウザで表示確認するか、比較的新しいバージョンを使用している方は、ライブビューで表示確認するようにしましょう。

▼Dreamweaverでのデザインビュー・ライブビュー