概要へ移動

※ Edgeは対応してない。

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

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

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

CSS : デフォルトCSS
pre {

    font-size:          1.2em;  /*  文字の大きさ */

}



span {

    background-color:  orange;  /*  背景色 */

}

tab-sizeの概要

タブの幅を指定する。

指定する値は数値（＋ 単位）。デフォルト値は「８」。

Firefoxがtab-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;セル１&lt;/td&gt;

<span>&#9;&#9;</span>&lt;td&gt;セル２&lt;/td&gt;

<span>&#9;</span>&lt;/tr&gt;

&lt;/table&gt;

</pre>
実行結果
<table>
	<tr>
		<td>セル１</td>
		<td>セル２</td>
	</tr>
</table>

tab-sizeを設定する。

CSS : tab-size: 8
.sample  {

    -moz-tab-size:  8;

    tab-size:       8;

}
実行結果
<table>
	<tr>
		<td>セル１</td>
		<td>セル２</td>
	</tr>
</table>
CSS : tab-size: 4
.sample  {

    -moz-tab-size:  4;

    tab-size:       4;

}
実行結果
<table>
	<tr>
		<td>セル１</td>
		<td>セル２</td>
	</tr>
</table>
CSS : tab-size: 2
.sample  {

    -moz-tab-size:  2;

    tab-size:       2;

}
実行結果
<table>
	<tr>
		<td>セル１</td>
		<td>セル２</td>
	</tr>
</table>