解説09-1：テーブル(表)の基礎知識 | SkillhubAI（スキルハブエーアイ）

次の範囲である「料金プラン」セクションでは、<table>タグを使った表が入ります。
下記部分を作成する前に、テーブルの基本構成を学びましょう。
file

※本レッスンはプロコーダー講座と同じ内容となっております。
でに受講済の方はスキップして、料金プランの作成に進んでください。

テーブルとは

HTMLコーディングで「テーブル」と言われた場合、tableタグを使用して作った“表組”のことを指します。
エクセルの表をWebページで表現するようなイメージです。

一覧表や料金表、会社概要など、情報を整理して分かりやすく見せた場合にテーブルがよく使われます。

SKILLHUBの料金表もテーブルを使っています。
file

エクセルで表に色を付けたり、セルを結合させることが出来るように、HTMLのtableもCSSと組み合わせることで色々な表現が可能です。
下記サイトではセルの結合状態になっていますね。

画像元：https://share.timescar.jp/fare/use.html

テーブルタグの基本構成

テーブルを作るために最低限必要なタグは<table> <tr> <td> の３つです。

<table>
  <tr>
    <td>山田さん</td>
    <td>女性</td>
    <td>東京都</td>
  </tr>
  <tr>
    <td>伊藤さん</td>
    <td>女性</td>
    <td>千葉県</td>
  </tr>
  <tr>
    <td>高橋さん</td>
    <td>男性</td>
    <td>東京都</td>
  </tr>
</table>

これだけ書いて、ブラウザで表示すると下図のように表示されます。
file

タグと見合わせると、構造がなんとなくわかってきたのではないでしょうか。

table : このタグ内をテーブル(表)として扱う
tr : 行の始まりから終わりまでを示す
td : tdタグで囲った部分をセルとして扱う

file

また<th>というタグもよく使用されます。
thは見出しの役割があるセルであることを意味します。

<table>
  <tr>
    <th>お名前</th>
    <th>性別</th>
    <th>お住まい</th>
  </tr>
  <tr>
    <td>山田さん</td>
    <td>女性</td>
    <td>東京都</td>
  </tr>
  <tr>
    <td>山田さん</td>
    <td>女性</td>
    <td>東京都</td>
  </tr>
  <tr>
    <td>伊藤さん</td>
    <td>女性</td>
    <td>千葉県</td>
  </tr>
  <tr>
    <td>高橋さん</td>
    <td>男性</td>
    <td>東京都</td>
  </tr>
</table>

file

見出しセルthは縦でも横でも使えます。

<table>
  <tr>
    <th>お名前</th>
    <td>山田さん</td>
    <td>伊藤さん</td>
    <td>高橋さん</td>
  </tr>
  <tr>
    <th>性別</th>
    <td>女性</td>    
    <td>女性</td>
    <td>男性</td>
  </tr>
  <tr>
    <th>お住まい</th>
    <td>東京都</td>
    <td>千葉県</td>
    <td>東京都</td>
  </tr>
</table>

file

テーブルのグレードアップ

テーブルは上記の基本タグ以外にも、タグや属性が用意されています。
知っておきたいタグと属性を紹介します。

thead,tbody,tfoot

テーブルの内部は<thead> <tbody> <tfoot>のタグを使って、行の区切りを明確化することもできます。
大抵の場合、<thead>と<tfoot>は1行ずつです。

thead：テーブルのヘッダーセル。主に見出しを入れる
tbody：テーブルで見せたい情報を入れる
tfoot：テーブルのフッターセル。bodyの補足情報などを入れる

<thead> <tbody> <tfoot>は省略しても問題有りません。
<thead>と<tbody> を使うなど、必要なタグのみ使っても良いです。

<table>
  <thead>
    <tr>
      <th>お名前</th>
      <th>性別</th>
      <th>お住まい</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田さん</td>
      <td>女性</td>
      <td>東京都</td>
    </tr>
    <tr>
      <td>山田さん</td>
      <td>女性</td>
      <td>東京都</td>
    </tr>
    <tr>
      <td>伊藤さん</td>
      <td>女性</td>
      <td>千葉県</td>
    </tr>
    <tr>
      <td>高橋さん</td>
      <td>男性</td>
      <td>東京都</td>
    </tr>
  </tbody>
</table>

file
見た目は変わりませんが、HTMLのソースコード上では分かりやすくなっています。

セルの結合を行う

テーブルを作っていると、セルをまとめたい部分を出てきます。
そんな時には colspan属性、 rowspan属性を使用します。

colspan：セルを横（右）に伸ばす
rowspan：セルを縦（下）に伸ばす

CSSで装飾する

テーブルのスタイルシートは、要素に対してidやclassを付ける、要素をセレクタにするなどの方法で設定できます。divなどと同じですね。

<style>
  .sample1{
    width: 600px;
    background-color: #ccc;
  }

  .sample1 thead{
    background-color: #000;
    color: #FFF;
  }

  .pink{
    background-color: pink;
  }
</style>

<table class="sample1">
  <thead>
    <tr>
      <th class="pink">お名前</th>
      <th>性別</th>
      <th>お住まい</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>山田さん</td>
      <td>女性</td>
      <td>東京都</td>
    </tr>
    <tr>
      <td>山田さん</td>
      <td>女性</td>
      <td>東京都</td>
    </tr>
    <tr>
      <td>伊藤さん</td>
      <td>女性</td>
      <td>千葉県</td>
    </tr>
    <tr>
      <td>高橋さん</td>
      <td>男性</td>
      <td>東京都</td>
    </tr>
  </tbody>
</table>

file

まとめ

テーブルは<table> <tr> <td>の３つのタグで作成することができます。
それに加えて、見出しやグルーピングの設定、セルの結合、CSSを設定することで、様々なデザインの表をWEBページ上で表示できるようになります。