[ HTMLタグ <table> <tr> <th> <td> ]  表の作成

① テーブルのスタイルを何も指定しないと罫線が見えない

スタイルを指定しないと、サンプルのように、罫線が表示されません。

サンプルHTMLコード（サンプルの表示）

② 罫線を見えるようにしてみる

サンプルの通り、tableは外枠、見出しセル(th)はセル単位、データセル(td)もセル単位で罫線の設定が反映されます。行(tr)に設定した罫線は表示されません。

また、それぞれの罫線に隙間が生じます。

サンプルHTMLコード（サンプルの表示）

③ 各罫線の隙間をなくす

table{border-collapse: collapse;}を設定することで、隣接する罫線が重なり、隙間が無くなります。また、罫線のスタイルは、各セルで設定したものが全面に表示されます。

table{border-collapse: separate;}は、初期値なので、②と同じ結果になります。

サンプルHTMLコード（サンプルの表示）

④ セルの結合（左右のセル）

<td colspan="n">は、設定したセルを含めて、右側のセルn個を結合します。

結合により、次の<td>は、<td colspan="n">からn列右のセルとなります。

サンプルでは、”セル2-1”,”セル2-2”,”セル2-3”の３セルを結合し一つのセル”セル2-1”となったため、その右には”セル2-4”が並びます。

サンプルHTMLコード（サンプルの表示）

⑤ セルの結合（上下のセル）

<td rowspan="n">は、設定したセルを含めて、下側のセルn個を結合します。

結合により、<td rowspan="n">から下のn-1番目の行(<tr>)までの<td>のセルは無くなり左詰される。

サンプルでは、”セル1-2”,”セル2-2”,”セル3-2”の３セルを結合し一つのセル”セル1-2”となったため、その下２行の”セル2-2”,”セル3-2”が無くなり、左詰される。

サンプルHTMLコード（サンプルの表示）