ホームへ

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

2022年07月12日

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

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>

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

↑「副業してもう少し稼ぎたい!」というかたのために副業の方法も解説しています。

【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の文字色を変える方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。

CSSやhtmlをマンガで学ぶ