テーブルの基礎を知ろう | SkillhubAI（スキルハブエーアイ）

テーブルの基礎を知ろう

吉田先生（通常）
吉田先生

情報を整理するために、リストタグと共によく使われる「テーブル」の作り方を学びましょう。

 

テーブルとは

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

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

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

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

https://share.timescar.jp/fare/use.html file

テーブルタグの基本構成

テーブルを作るために最低限必要なタグは<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関連の属性やプロパティを調べて、下図のようなテーブルを作成してみましょう。padding幅や色はお好きに変更しても構いません。

ちょっと難しいですが、これが出来れば、大抵のテーブルデザインはコーディングできますよ。

file

なお、デモコーディングを素材欄にアップロードしています。 確認にご利用ください。

まとめ

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

前のレッスン 次のレッスン
レッスン一覧へ