HTML <table> について（表の作成）

最近、HTML でtableを使ったので、備忘録として書いておきます。

element

table ... テーブル
theader ... テーブルヘッダー（無くても、成立する）
tbody ... テーブルボディ（無くても、成立する）
tr ... 行ごとの括り
td ... セル

例

以下が、コードと生成されるテーブルです。

See the Pen Untitled by J N (@J-N-the-flexboxer) on CodePen.

style (css)

elementに直書きする方法もありますが、cssの設定で上書きされる場合があるため、基本的にはcssで書く方が望ましいです。

ボーダー（線）

td,trに対して、borderで設定することで表示される様になります。
solidを付け忘れると、線が表示されないため、注意が必要です。
border-collapseでcollapseを設定した場合は、セル同士のボーダーが一体化した状態での表示になりますが、separateで設定すると、セルごとにボーダーが独立した状態で表示されます。

td {
  /* 線の太さ、色、線の種類 */
  border: 3px #000000 solid;
}

table {
    /* 線をくっつける場合の設定 */
    border-collapse: collapse;

    /* 線を離す */
    border-collapse: separate;
}