【CSS/html】table,th,tdの文字色を変える方法

「このマスを目立たせるために文字色を変えたい」

tableの文字色(フォントカラー)を変える方法を解説します。

【全部】tableにcolor

colorは文字色を指定するCSSです。

これをtableに指定すると、表すべての文字色を統一して全部変えられます。

ヘッダー	ヘッダー	ヘッダー
ヘッダー	セル	セル
ヘッダー	セル	セル

<style>
.example{
    color: red;
}
</style>
<table border="1" class="example">
    <tr>
        <th>ヘッダー</th>
        <th>ヘッダー</th>
        <th>ヘッダー</th>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

【thだけ】thにcolor

thだけ文字色を変えたいときは、thにcolorを指定します。

同様にtdだけのときは、tdにcolorを指定します。

ヘッダー	ヘッダー	ヘッダー
ヘッダー	セル	セル
ヘッダー	セル	セル

<style>
.example2 th{
    color: red;
}
</style>
<table border="1" class="example2">
    <tr>
        <th>ヘッダー</th>
        <th>ヘッダー</th>
        <th>ヘッダー</th>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

【特定のマス】特定のtdにcolor

特定のマスだけ文字色を変えたいときはそのマス(th,td)にクラスをつけ、そのクラスにcolorを指定します。

ヘッダー	ヘッダー	ヘッダー
ヘッダー	セル	セル
ヘッダー	セル	セル

<style>
.example{
    color: red;
}
</style>
<table border="1">
    <tr>
        <th>ヘッダー</th>
        <th>ヘッダー</th>
        <th>ヘッダー</th>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td class="example">セル</td>
    </tr>
    <tr>
        <th class="example">ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

特定の行や列を指定したい場合はこちらを参考に指定しましょう。

【一部分】spanで囲ってcolor

マス内の一部分の文字だけ色を変えたいときは、その範囲をspanタグで囲い、そのspanにクラスをつけ、そのクラスにcolorを指定します。

ヘッダー	ヘッダー	ヘッダー
ヘッダー	セル	セルspanで囲うセル
ヘッダー	セル	セル

<style>
.example{
    color: red;
}
</style>
<table border="1">
    <tr>
        <th>ヘッダー</th>
        <th>ヘッダー</th>
        <th>ヘッダー</th>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル<span class="example">spanで囲う</span>セル</td>
    </tr>
    <tr>
        <th>ヘッダー</th>
        <td>セル</td>
        <td>セル</td>
    </tr>
</table>

【まとめ】tableの文字色を変える方法

• 【全部】tableにcolor
• 【thだけ】thにcolor
• 【特定のマス】特定のtdにcolor
• 【一部分】spanで囲ってcolor

以上、tableの文字色を変える方法でした。