【html/CSS】table,th,tdに背景色をつける方法

タイトル1	タイトル2
セル1	セル2
セル3	セル4

「tableに色をつけて目立たせたい！」

「thとtdを色分けしたい！」

table,th,tdに背景色をつける方法を解説します。

【html】bgcolor属性

table、th、tdにbgcolor属性でカラーコードを指定すると背景色をつけることができます。

ただし、bgcolor属性は廃止されています。できるだけ後述するCSSを使いましょう。

【すべて同じ色】tableにbgcolor属性

セルの隙間も含めてすべて同じ色でいいならtableにbgcolor属性を指定しましょう。

各セルにbgcolor属性を指定する手間が省けます。

タイトル1	タイトル2
セル1	セル2
セル3	セル4

<table border="1" bgcolor="#fff8dc">
    <tr>
        <th>タイトル1</th><th>タイトル2</th>
    </tr>
    <tr>
        <td>セル1</td><td>セル2</td>
    </tr>
    <tr>
        <td>セル3</td><td>セル4</td>
    </tr>
</table>

【セルごと】th,tdにbgcolor属性

セルの隙間に色をつけたくない、それぞれのセルの色を変えたい場合はth,tdにbgcolor属性を指定しましょう。

ただし、すべてのセルに指定するため大変です。

タイトル1	タイトル2
セル1	セル2
セル3	セル4

<table border="1">
    <tr>
        <th bgcolor="#b7efb7">タイトル1</th><th bgcolor="#b7efb7">タイトル2</th>
    </tr>
    <tr>
        <td bgcolor="#fff8dc">セル1</td><td bgcolor="#fff8dc">セル2</td>
    </tr>
    <tr>
        <td bgcolor="#fff8dc">セル3</td><td bgcolor="#fff8dc">セル4</td>
    </tr>
</table>

【1pxの線】tableとth,tdにbgcolor属性

tableに色を付けてさらにth,tdに色をつけた場合、th,tdのほうが上に重なっているためth,tdの色が優先されます。セルの隙間はtableの色がつきます。

これを応用してセルの隙間（cellspacing）を1pxにして、tableに黒を指定することでhtmlだけで1pxの線の表を作ることができます。

タイトル1	タイトル2
セル1	セル2
セル3	セル4

<table bgcolor="#333" cellspacing="1">
    <tr>
        <th bgcolor="#b7efb7">タイトル1</th><th bgcolor="#b7efb7">タイトル2</th>
    </tr>
    <tr>
        <td bgcolor="#fff8dc">セル1</td><td bgcolor="#fff8dc">セル2</td>
    </tr>
    <tr>
        <td bgcolor="#fff8dc">セル3</td><td bgcolor="#fff8dc">セル4</td>
    </tr>
</table>

【CSS】background

backgroundは要素の背景を指定するCSSです。

【セルごと】th,tdにbackground

backgroundをth,tdに指定するとtableの背景色を指定できます。

タイトル1	タイトル2
セル1	セル2
セル3	セル4

<style>
.example th{
    background: #b7efb7;
}
.example td{
    background: #fff8dc;
}
</style>
<table border="1" class="example">
    <tr>
        <th>タイトル1</th><th>タイトル2</th>
    </tr>
    <tr>
        <td>セル1</td><td>セル2</td>
    </tr>
    <tr>
        <td>セル3</td><td>セル4</td>
    </tr>
</table>

bgcolor属性と比べたメリット

• htmlがすっきり
• セルを増やすたびにbgcolor属性を指定しなくていい
• 色を変えたいときに一括で変えられる

【1pxの線】tableに「border-collapse:collapse」

線を1pxにしたいときは、tableに「border-collapse:collapse」を指定して、th,tdにborderを指定しましょう。

タイトル1	タイトル2
セル1	セル2
セル3	セル4

<style>
.example2{
    border-collapse: collapse;
}
.example2 th{
    background: #b7efb7;
    border: 1px solid #333;
}
.example2 td{
    background: #fff8dc;
    border: 1px solid #333;
}
</style>
<table border="1" class="example2">
    <tr>
        <th>タイトル1</th><th>タイトル2</th>
    </tr>
    <tr>
        <td>セル1</td><td>セル2</td>
    </tr>
    <tr>
        <td>セル3</td><td>セル4</td>
    </tr>
</table>

【1マスだけ】styleで直指定

1マスだけ別の色に指定したいときはstyle属性でbackgroundを指定するといいでしょう。

タイトル1	タイトル2
セル1	セル2
セル3	セル4

※CSSは同じ

<table border="1" class="example2">
    <tr>
        <th>タイトル1</th><th>タイトル2</th>
    </tr>
    <tr>
        <td>セル1</td><td>セル2</td>
    </tr>
    <tr>
        <td style="background: #adf6ff">セル3</td><td>セル4</td>
    </tr>
</table>

【複数マス】classで指定

別の色の指定が複数箇所かつ同じ色ならclassで指定するといいでしょう。

タイトル1	タイトル2
セル1	セル2
セル3	セル4

※他のCSSは同じ

<style>
.example3{
    background: #adf6ff !important;
}
</style>
<table border="1" class="example2">
    <tr>
        <th>タイトル1</th><th class="example3">タイトル2</th>
    </tr>
    <tr>
        <td>セル1</td><td>セル2</td>
    </tr>
    <tr>
        <td class="example3">セル3</td><td>セル4</td>
    </tr>
</table>

上書きするCSSの優先度を高くしましょう。

【行,列ごと】:nth-of-type(n)

1行、1列または偶数奇数行、列を指定するには「:nth-of-type(n)」を使いましょう。

詳しくは下記をご覧ください。

タイトル1	タイトル2
セル1	セル2
セル3	セル4
セル5	セル6
セル7	セル8

<style>
.example4{
    border-collapse: collapse;
}
.example4 th{
    background: #b7efb7;
    border: 1px solid #333;
}
.example4 td{
    background: #fff8dc;
    border: 1px solid #333;
}
.example4 tr:nth-of-type(2n-1) td{
    background: #c0e0fc;
}
</style>
<table border="1" class="nocss example4">
    <tr>
        <th>タイトル1</th><th>タイトル2</th>
    </tr>
    <tr>
        <td>セル1</td><td>セル2</td>
    </tr>
    <tr>
        <td>セル3</td><td>セル4</td>
    </tr>
    <tr>
        <td>セル5</td><td>セル6</td>
    </tr>
    <tr>
        <td>セル7</td><td>セル8</td>
    </tr>
</table>

【まとめ】tableに背景色をつける方法

【CSS】background

• 【セルごと】th,tdにbackground
• 【1pxの線】tableに「border-collapse:collapse」th,tdにborder
• 【1マスだけ】styleで直指定
• 【複数マス】classで指定
• 【行,列ごと】:nth-of-type(n)を使う

【html】bgcolor属性（廃止）

• 【すべて同じ色】tableにbgcolor属性
• 【セルごと】th,tdにbgcolor属性
• 【1pxの線】tableとth,tdにbgcolor属性

以上、table,th,tdに背景色をつける方法でした。