※ Edgeは対応してない。

このページで解説するコードの実行結果。

tab-size: 2;
<table>
	<tr>
		<td>セル1</td>
		<td>セル2</td>
	</tr>
</table>
tab-size: 4;
<table>
	<tr>
		<td>セル1</td>
		<td>セル2</td>
	</tr>
</table>
tab-size: 8;
<table>
	<tr>
		<td>セル1</td>
		<td>セル2</td>
	</tr>
</table>

なお、見た目のため、このページの実行結果には「下のCSSコードも」適用している。

CSS : デフォルトCSS
pre {
    font-size:          1.2em;  /*  文字の大きさ */
}
span {
    background-color:  orange;  /*  背景色 */
}

tab-sizeの概要

タブの幅を指定する。

指定する値は数値(+ 単位)。デフォルト値は「8」。

Firefoxtab-sizeに対応していないので、「-moz-tab-size」も指定する必要がある。

なお、タブ(&#9;)はHTMLコード中ではスペースとして扱われる。
よって、<pre>要素やwhite-space: pre;/white-space: pre-wrap;を設定された要素に囲まれた要素の中のみで有効。

tab-sizeが未設定の場合。

HTML : 適用するHTML
<pre class="sample">
&lt;table&gt;
<span>&#9;</span>&lt;tr&gt;
<span>&#9;&#9;</span>&lt;td&gt;セル1&lt;/td&gt;
<span>&#9;&#9;</span>&lt;td&gt;セル2&lt;/td&gt;
<span>&#9;</span>&lt;/tr&gt;
&lt;/table&gt;
</pre>
実行結果
<table>
	<tr>
		<td>セル1</td>
		<td>セル2</td>
	</tr>
</table>

tab-sizeを設定する。

CSS : tab-size: 8
.sample  {
    -moz-tab-size:  8;
    tab-size:       8;
}
実行結果
<table>
	<tr>
		<td>セル1</td>
		<td>セル2</td>
	</tr>
</table>
CSS : tab-size: 4
.sample  {
    -moz-tab-size:  4;
    tab-size:       4;
}
実行結果
<table>
	<tr>
		<td>セル1</td>
		<td>セル2</td>
	</tr>
</table>
CSS : tab-size: 2
.sample  {
    -moz-tab-size:  2;
    tab-size:       2;
}
実行結果
<table>
	<tr>
		<td>セル1</td>
		<td>セル2</td>
	</tr>
</table>