tableタグで表を作ることはできますが、そのままでは罫線がついていません。それぞれの要素が一定の間隔で点在しているだけでは見づらいので、罫線を付けて見やすくしましょう。

表に罫線をつける

表に罫線をつけるには、<table>タグにborder属性を指定します。たとえば、<table border=”1″>という形です。
これで、表のセルを1つずつ区切る罫線をまとめてつけることができます。
枠線がないと読みづらいので、表を作るときにはborder属性もセットで指定しましょう。
ただし、border属性で作成できる罫線は立体的なものです。Excelの表のようなものを想像すると、驚かれるかもしれません。
border属性にさらにいくつかの指定をすることで、境界線の太さや色などを一括で指定できます。

罫線の太さを指定するには

標準の太さの罫線を引くには、上の例のように<table border=”1″>と指定します。これで幅1ピクセルの罫線が引けます。
border属性で指定する数を増やすと、幅の太い罫線を引くことができます。
<table border=”0″>と指定すると、罫線の幅は0ピクセル、つまり罫線なしの表になります。
また、border属性を指定しないと<table border=”0″>と同じと解釈され、罫線なしの表になります。

罫線の色を指定

border属性で数を1以上に指定し、罫線を表示できる状態なら、罫線の色を指定することができます。
罫線の色は、<table>タグでbordercolor属性を指定することで指定します。色は16進数か色名で指定します。
たとえば<table border=”1″ bordercolor=”red”>または<table border=”1″ bordercolor=”#ff0000″>と指定すると、罫線の外側が赤になります。
通常の立体的な罫線なので、外側部分のみ赤になり、内側は白のままになります。
border属性を指定しない、または<table border=”0″>に指定すると罫線なしの表になるので、罫線の色も指定できません。bordercolor属性を指定しなければ、通常は外側がグレイ、内側は白の立体的な線になります。

罫線の種類を指定

罫線の種類を自由に指定するには、スタイルシートを使います。
スタイルシートで罫線に鉛筆で引いたような細い線にしたり、立体的でない線を引いたり、点線や破線にしたりすることもできます。4方向すべて違う種類の線を引くこともできます。

普通の罫線の表

HTML上の表示

<html>
  <head>
    <title>表のサンプル</title>
  </head>
  <body>
<table border="1">
	<caption>普通の罫線の表</caption>
	<tr>
		<th>種類</th>
		<th>サイズ</th>
		<th>価格(円)</th>
	</tr>
	<tr>
		<td>コーヒー</td>
		<td>S,M</td>
		<td>150,200</td>
	</tr>
	<tr>
		<td>紅茶</td>
		<td>Sサイズのみ</td>
		<td>170</td>
	</tr>
	<tr>
		<td>コーラ</td>
		<td>検討中</td>
		<td>検討中</td>
	</tr>
</table>
   </body>
</html>

太くて赤い罫線の表

HTML上の表示

<table border="3" bordercolor="#ff0000">
	<caption>太くて赤い罫線の表</caption>
	<tr>
		<th>種類</th>
		<th>サイズ</th>
		<th>価格(円)</th>
	</tr>
	<tr>
		<td>コーヒー</td>
		<td>S,M</td>
		<td>150,200</td>
	</tr>
	<tr>
		<td>紅茶</td>
		<td>Sサイズのみ</td>
		<td>170</td>
	</tr>
	<tr>
		<td>コーラ</td>
		<td>検討中</td>
		<td>検討中</td>
	</tr>
</table>
</body>
</html>