ホームへ

【CSS/html】tableのフォントサイズを指定する方法

「tableは幅が狭いから、周りより一回り文字サイズを小さくしたい!」

tableのフォントサイズを指定する方法を解説します。

【結論】tableにfont-sizeを指定

tableのフォントサイズを指定するには、tableにfont-sizeを指定します。

font-sizeは文字サイズを指定するCSSです。

下記はtableにfont-sizeを指定した例です。「上の文字」と「下の文字」は文字サイズが変わっていません。

上の文字

セル セル
セル セル

下の文字

<style>
.example{
    font-size: 75%;
}
</style>
<p>上の文字</p>
<table border class="example">
    <tr>
      <td>セル</td>
      <td>セル</td>
    </tr>
    <tr>
      <td class="example2">セル</td>
      <td>セル</td>
    </tr>
</table>
<p>下の文字</p>

font-sizeは子孫要素に継承するため、tableに指定するとtableの中身すべての文字サイズがかわります。

font-sizeの単位はpx、%、emなどがあります。%やemで指定するのがおすすめで、この場合親要素の文字サイズに対して相対的な文字サイズになります。

px指定するとカンタンにイメージ通りのサイズになります。

しかし、ユーザーによっては文字サイズを大きくしたいこともあります。px指定するとユーザー側で文字サイズを変えられない場合があります。%やemなら大丈夫です。

文字サイズの初期値は16pxです。

「font-size: 75%」を指定すると「16px(初期値)×75%=12px」となります。

セルごとに指定したい場合

特定のセルの文字サイズだけ変えたいときはそのセル(td)にclassをつけたうえでfont-sizeを指定しましょう。

上の文字

セル セル
セル セル

下の文字

<style>
.example{
    font-size: 75%;
}
.example2{
    font-size: 150%;
}
</style>
<p>上の文字</p>
<table border class="example">
    <tr>
      <td>セル</td>
      <td>セル</td>
    </tr>
    <tr>
      <td class="example2">セル</td>
      <td>セル</td>
    </tr>
</table>
<p>下の文字</p>

【注意】font-sizeは継承され、かけ算される

font-sizeを%やemで指定した場合、親のfont-sizeを継承し、かけ算されます。

先述したように%やemは親要素の文字サイズに対して相対的な文字サイズになります。

例えば親に「font-size: 75%」を指定して、自身に「font-size: 150%」を指定した場合「16px(初期値)×75%×150%=18px」となります。

目当ての大きさになるように逆算しましょう。

【まとめ】tableのフォントサイズを指定する方法

tableにfont-sizeを指定する。

特定のセルの文字サイズだけ変えたいとき
→そのtdにfont-sizeを指定

ただし、font-sizeは継承され、かけ算されるため、目当ての大きさになるように逆算する。

以上、tableのフォントサイズを指定する方法でした。

マンガで読める関連記事