HTML - CSS - table cellspacing="5" frame="box" の代わりに

1.　概要

2.　書き換え

1.　概要

　以前の、「html」では


<table border="1" bordercolor="black" cellspacing="5" frame="box">


　てな書き方が許されていたんですがね。
　これは、テーブル内のセルにの間に空白を持たせて、枠線を引くってなもんですが。
　現在では、そもそも「border="1"」てな書き方をするのは、やめておいた方がいいし、「cellspacing」や「frame」もできれば、「.css」で置き換えたいところです。

　本ページは、下記のサイトを参考にさせていただきました。

「cellspacingやcellpaddingをCSSで指定するには？tableタグをCSSでデザインする方法」
「HTMLタグ/テーブルタグ/外枠の表示方法を指定する - TAG index」


2.　書き換え

　試しに昔風に


<table border="1" bordercolor="black" cellspacing="5" frame="box">
<tr><th>表題１</th>	<th>表題２</th>	<th>表題３</th>	</tr>
<tr><td>項目１</td>	<td>項目２</td>	<td>項目３</td>	</tr>
</table>


　と書きましたらば

　「border」の個所が、「Visual Studio Code」では、赤色で表示されて「やめときなはれ」と言っております。
　これ、あなたのブラウザでどう見えているかわかりませんが、「Vivaldi 5.3.2679.70」では、以降に示す、「.css」での例とセル間の空白を除いて、同じに見えます。

　「.css」を用いて書くならば、下記のようになります。


<style>
table.sample
{
	border: black solid 1px;
	border-collapse: separate;
	border-spacing: 5;
}

td.sample, th.sample
{
	border: black solid 1px;
}
</style>

<table class="sample">
<tr><th class="sample">表題１</th>	<th class="sample">表題２</th>	<th class="sample">表題３</th>	</tr>
<tr><td class="sample">項目１</td>	<td class="sample">項目２</td>	<td class="sample">項目３</td>	</tr>
</table>


　でまぁ、下記のように表示されます。