HTMLで表を作成

2019.11

記事やブログを書いているとき、表を使って一覧で見せたいということがあるかと思います。HTMLではtableタグを使用して表を作成します。

tableタグを使用した表のマークアップ例

<table>
  <thead>
    <tr>
      <th>日付</th>
      <th>使った額</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2019/11/01</td>
      <td>￥100</td>
    </tr>
    <tr>
      <td>2019/11/02</td>
      <td>￥200</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>合計</th>
      <th>￥300</th>
    </tr>
  </tfoot>
</table>

日付	使った額
2019/11/01	￥100
2019/11/02	￥200
合計	￥300

このように、tableタグを用いるだけで、自然とエクセルのセルのように横並びになることがわかるかと思います。

table（表）で使用するタグの説明

表が作成できることがわかったと思うので、それぞれのタグについて説明していきます。

table（表）で使用するタグ
<table>	table（表）を作成する
<thead>	table（表）のヘッダ行を定義
<tbody>	table（表）のボディ部分を定義する
<tr>	table（表）の行を定義
<th>	table（表）の見出しとなるセルを作成する
<td>	table（表）のセルを作成する、横に表を伸ばしたいときは複数個記載
<tfoot>	table（表）のフッタ行を定義する
<caption>	table（表）にタイトルを付ける
<col>	table（表）の縦列の属性をまとめて指定するためのタグ
<colgroup>	table（表）の縦列をグループ化する

表が一つの時

表を作成するときに、作成したい表が一つの場合は、省略型の書き方が可能です。

<table>
　 <tr>
      <th>日付</th>
      <th>金額</th>
    </tr>
　 <tr>
      <td>2019/11/01</td>
      <td>￥100</td>
    </tr>
    <tr>
      <td>2019/11/02</td>
      <td>￥200</td>
    </tr>
</table>

日付	金額
2019/11/01	￥100
2019/11/02	￥200

状況に合わせて、最適な書き方をしましょう。

HTML
HTMLで表を作成