【CSS/html】table内のテキストの行間を指定する方法

「table内のテキストは他のテキストより行間を狭くしたいんだよなぁ」

table内のテキストの行間を指定する方法を解説します。

【結論】tableにline-heightを指定する

line-heightは行間を指定するCSSです。これをtableまたはtdおよびthに指定するとtable内のテキストの行間を指定できます。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<style>
table{
    line-height: 1.2;
}
</style>
<table border>
    <tr>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
    </tr>
</table>

line-heightの数値

line-heightで指定した数値が大きいほど行間が開き、小さいほど詰まります。

指定した数値の文字数分 高さが確保され、その上下中央に文字が置かれます。

よって1行の上下の隙間は次のような式になります。

ややこしいですが、指定した数値が1.5なら0.25文字ずつ、2なら0.5文字ずつ、3なら1文字ずつ上下に行間ができます。

2行以上になったとき、上と下分の隙間となるため、2なら0.5文字+0.5文字で1文字分開くことになります。

line-heightの値に単位をつけてもいいですが、つけない場合文字サイズを基準としたサイズになります。

tdとテキストの空間はpadding

line-heightでは文字同士の行間をあけられますが、文字とtdの線の隙間は（あまり）あきません。

tdとテキストの空間をあけたいときはtdおよびthにpaddingを使いましょう。

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

<style>
table{
    line-height: 1.2;
}
td{
    padding: 1em 1.1em;
}
</style>
<table border>
    <tr>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
        <td>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</td>
    </tr>
</table>

paddingの数値

line-heightは文字の上下に隙間をつくります。

「line-height: 1.2」と指定した場合、1行目の上と最終行の下にはそれぞれ0.1文字分の隙間ができます。

よってpaddingを指定するときはこれを考慮するときれいな空間を作れます。

「padding: 1em」だけ指定すると上下がline-heightの0.1文字分だけ大きいです。

よってその分縦を縮めるか横を広げるときれいになります。

ここでは横を広げて「padding: 1em 1.1em」と指定しています。

0.1文字分ではさして違いはありませんが、0.5文字分あくと明らかに違ってきますので、値に応じて使ってみましょう。

【まとめ】table内の行間を指定する方法

line-heightをtableまたはtdおよびthに指定する。

tdとテキストの空間をあけるにはtdおよびthにpaddingを指定する。

以上、table内のテキストの行間を指定する方法でした。