HOME > 開発者向けBLOG > Webデザイン >  テーブルセルの内側に1pxの線

Technology Note 開発者向けBLOG

Webデザイン

テーブルセルの内側に1pxの線

こんにちは、ゼノフィ渡部です。

テーブルセルの内側に1pxの線を表示する方法をご紹介いたします。

まず、1行目の「table.data」クラスの「border-spacing: 1px;」ではテーブルの間に隙間をいれています。4行目の「background: #999;」でテーブルのボーダー線を表示します。

12行目の「table.data th」の「border: 1px solid #FFF;」で見出し内の内側に線を表示させます。15行目の「background: #EEF1F4;」は4行目の「background: #999;」の背景色(黒系統)を青系統の背景色で上書きします。thで背景色を指定しない場合は、「table.data」で指定した色がそのまま表示されます。tdにもthと同じ理由で背景色を指定します。18行目の「table.data td」の「background: #FFF;」の白で背景色を上書きしています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

table.data {
  width: 600px;
  border-spacing: 1px; /* セル間の隙間(モダンブラウザ用) */
  background: #999;    /* テーブルとth、tdの線 */
}
 
table.data th,
table.data td {
  padding: 5px;
}
 
table.data th {
  width: 20%;
  border: 1px solid #FFF; /* 見出し(th)の内側に1pxの線 */
  background: #EEF1F4;    /*「table.data」の背景色を上書き */
}
 
table.data td {
  width: 80%;
  background: #FFF; /*「table.data」の背景色を上書き */
}

下記HTMLソースでは1行目のテーブルに「cellspacing=”1″」を指定します。これはCSSソースの3行目の「border-spacing: 1px;」がＩＥ6、IE7では効果がないので直接テーブルタグに記述しています。「cellspacing=”1″」を記述しない場合は、テーブル、th、tdの線が太く表示されます。

補足ですが、「cellspacing=”1″」はHTML5では廃止されていますので、HTML5でHTMLをコーディングしている場合は、W3Cの「Markup Validation Service」で確認をした場合、エラーになってしまいます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<table cellspacing="1" class="data">
    <tr>
        <th>
            見出し1
        </th>
        <td>
            データ1
        </td>
    </tr>
    <tr>
        <th>
            見出し2
        </th>
        <td>
            データ2
        </td>
    </tr>
</table>

確認しずらいかもしれませんが、見出しセル(th)の内側の上下左右に、1pxの白い線が表示されていることがわかります。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

table.data {
  width: 600px;
  border-spacing: 1px; /* セル間の隙間(モダンブラウザ用) */
  background: #999;    /* テーブルとth、tdの線 */
}
 
table.data th,
table.data td {
  padding: 5px;
}
 
table.data th {
  width: 20%;
  border: 1px solid #FFF; /* 見出し(th)の内側に1pxの線 */
  background: #EEF1F4;    /*「table.data」の背景色を上書き */
}
 
table.data td {
  width: 80%;
  background: #FFF; /*「table.data」の背景色を上書き */
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<table cellspacing="1" class="data">
    <tr>
        <th>
            見出し1
        </th>
        <td>
            データ1
        </td>
    </tr>
    <tr>
        <th>
            見出し2
        </th>
        <td>
            データ2
        </td>
    </tr>
</table>

<

>

PAGETOP