HTML・CSS：テーブルを作成するtable・行を追加するtrタグ、列を追加するtdタグ、見出し列にするthタグ、表にキャプションを付けるcaptionタグ、表のヘッダー要素をグループ化するtheadタグ、表の本体部分をグループ化するtbodyタグ、表のフッター要素をグループ化するtfootタグ、列をグループ化するcolgroupタグ、列を作成するcolタグ

<table>タグとは

<table>タグとは表自体を表します。
<table>と</table>で囲った部分を表にしますよ～というタグになります。行や列を挿入するのはまた別のタグとなり、それらは<table>タグの内側に書きます。その行や列をひとつのテーブルですよ～とまとめるためのものです。

<tr>タグとは

<tr>タグは行を表すタグになります。必ず<table>タグ内に記入します。
また、この<tr>タグと</tr>タグの内側には、列を表す<td>タグを書きます。

<td>タグとは

<td>タグとは列を表すタグになります。必ず<table>タグ内に記入します。

<th>タグとは

<th>タグとは見出し列にするタグになります。見出しタグはこのようなものです。

こうすると見出し列（この場合、ここにthの部分）となりCSSがなくても文字が太くなって中央ぞろえになり目立つようになるのと同時にSEO対策的にも効果があります。

<caption>タグとは

<caption>タグはテーブルにキャプションを付けることが出来るタグです。キャプションというのは、補足のようなものです。1つの表に使えるcaptionタグの数は1つまでです。
このタグは必ず<table>タグの直下に書く必要があります。ただそうすると、テーブルの行や列の上に表示されてしまいちょっとおかしなことになるので、表示される位置を変更するのにＣＳＳを使いましょう。

 caption {
      caption-side:bottom;
    }

<thead>タグ・<tbody>タグ・<tfoot>タグとは

<thead>タグ・<tbody>タグ・<tfoot>タグとは、各要素をグループ化するためのタグです。グループ化することによってその部分のデザインが一括で変更出来たりします。

<thead>タグ・<tbody>タグ・<tfoot>タグの使い方

<table>
<thead><tr><th>教科</th><th>点数</th></tr></thead>
<tbody><tr><td>数学</td><td>50点</td></tr></tbody>
<tfoot><tr><td>平均点</td><td>50点</td></tr></tfoot>
</table>

<table><tr><td><th><caption>タグの使い方

<table>
<caption>ここにキャプションをかきます。</caption>
<tr><th>項目１</th><th>項目２</th><th>項目３</th></tr>
<tr><td>項目４</td><td>項目５</td><td>項目６</td></tr>
</table>

このように、まずは<table>タグで表の内容を括るための大枠を作り、中に必要な行と列を足していく感じです。この場合はこのような表に仕上がります。

２行で３列の表が出来上がりました。
見出しに設定している項目１、２、３はCSSを設定していないにも関わらず勝手に中央ぞろえになり、さらに太字になっています。

<table>
<tr><th>項目１</th><th>項目２</th><th>項目３</th></tr>
<tr><td>項目４</td><td>項目５</td><td>項目６</td></tr>
</table>

まずは<table>タグで表の大枠を作り、<tr>で行を作成。その行の中に<th>タグを使って見出しの列を３つ作成し、その下にまた新たな行を追加して項目を追加しています。

<colgroup>タグ・<col>タグとは

<colgroup>タグとは、列をグループ化するタグです。必ず<col>タグとセットで使用します。
列に対してCSSで装飾を加えることが可能です。

<table>
  <caption>
    顧客リスト
  </caption>
  <colgroup>
    <col span="2" class="name" />
    <col span="2" class="zyuusyo" />
  </colgroup>
  <tr>
    <th scope="col">苗字</th>
    <th scope="col">名前</th>
    <th scope="col">住所１</th>
    <th scope="col">住所２</th>
  </tr>
  <tr>
    <td>田中</td>
    <td>タロウ</td>
    <td>東京都</td>
    <td>葛飾区</td>
  </tr>
</table>

.name {
  background-color: #d7d9f2;
}
.zyuusyo {
  background-color: #ffe8d4;
}

このように、列に装飾を付けるために使うことが可能です。

scope属性とは

上の例でつけている<th>タグのscope属性ですが、これはその見出しがどの方向に効いているのかを指定する属性になります。