CSSで表の枠線を指定する(border="1"を使わない)

表に直接、枠線border="1"を指定する方法は簡単で使いやすいのでよく使ってきました。HTML5ではborder属性は空文字か1だけの使用が認められています。他はCSSで記述することとなっています。そこで表の枠線(罫線)もCSSで簡単に表示できるようにしてみました。

表の枠線(罫線)の指定(border="1")

HTMLで表(テーブル、table)に枠線(罫線)を指定するには、一般的に次のようにテーブルタグにborder="1"を記述します。

<table border="1">
<tr>
<th>品番</th><th>数量</th>
</tr>
<tr>
<td>A-1234</td><td>1,200</td>
</tr>
<tr>
<td>B-5678</td><td>2,500</td>
</tr>
</table>

このようにすると、枠線(罫線)が2重に描かれます。この方法はHTMLの記述が簡単で表示も特に大きな問題はありません。

HTML5では表のborder="1"以外は非推奨です

HTML5では、表のborder属性の指定は空文字か「1」の指定だけが使用を認められています。それ以外はスタイルシートCSSで記述することとされています。

しかし、HTML5で使用できるはずのborder="1"をテーブルに指定すると、文法チェッカーではW3Cの警告(Warning)が表示されます。

私は、これが嫌で、表の枠線(罫線)についてもCSSで、できるだけ簡単に指定することにしました。

CSSで表の枠線を指定する

スタイルシート楽天 CSSで表の枠線(罫線)を指定するには色々な方法がありますが、私は簡単に設定できる方法を模索してみました。

下記のようにtableとtdとthタグに「border-collapse: collapse; border: 1px solid」と指定して、枠線(罫線)を1本にして1ピクセル幅にしました。

.tbl_bdr,.tbl_bdr td,.tbl_bdr th {border-collapse: collapse; border: 1px solid #333}

「border-collapse: collapse」は枠線(罫線)を1本にまとめるものです。枠線の色は黒に近い灰色を指定しました。

表の枠線(罫線)をclassで指定した実際のHTML

HTMLのテーブルタグに直接「class="tbl_bdr"」と指定します。「border="1"」よりは長くなりますが、特に面倒なことはありません。

<table class="tbl_bdr">
<tr>
<th>品番</th><th>数量</th>
</tr>
<tr>
<td>A-1234</td><td>1,200</td>
</tr>
<tr>
<td>B-5678</td><td>2,500</td>
</tr>
</table>

上記のHTMLはブラウザで表示させると左記のようになります。