Web開発 - HTML：テーブル

初めに

　本記事は、HTMLにおけるテーブルの作り方を学びます。罫線やセルの結合、列のグループ化などについても触れます。

Index

テーブルの基本

　HTMLのテーブルは複数の要素を使って構成されます。

<table>
  <caption>映画一覧</caption>
  <thead>
    <tr>
      <th>タイトル</th>
      <th>監督</th>
      <th>公開年</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>インセプション</td>
      <td>クリストファー・ノーラン</td>
      <td>2010</td>
    </tr>
    <tr>
      <td>ラ・ラ・ランド</td>
      <td>デミアン・チャゼル</td>
      <td>2016</td>
    </tr>
    <tr>
      <td>ハリー・ポッターと賢者の石</td>
      <td>クリス・コロンバス</td>
      <td>2001</td>
    </tr>
  </tbody>
</table>

（表示結果）

　ブラウザによっては、罫線が引かれている場合もあります。

要素	説明
<table>	テーブルを作成
<caption>	テーブルのタイトル
<thead>	テーブルの見出し（ヘッダー）
<tbody>	テーブルの本体
<tr>	行の定義
<th>	ヘッダーセルの定義
<td>	セルの作成

フッター

　<tfoot>要素を使ってフッターを作ることができます。

<table border="1">
  <thead>
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>太郎</td>
      <td>25</td>
    </tr>
    <tr>
      <td>花子</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>人数合計</td>
      <td>2人</td>
    </tr>
    <tr>
      <td>年齢合計</td>
      <td>55</td>
    </tr>
  </tfoot>
</table>

罫線

　<table>要素に border 属性をつけることで、テーブルの罫線を制御できます。属性は整数値で罫線の太さ（ピクセル）を指定します。

<table border="1">
  <tr>
    <td>セル1</td>
    <td>セル2</td>
  </tr>
  <tr>
    <td>セル3</td>
    <td>セル4</td>
  </tr>
</table>

　罫線を二重ではなく、１本線にするには、style 属性を使う必要があります。

　本当は style 属性を使わず、CSSを使って指定することが望ましいです。

セルの結合

　セルの結合を行うには、colspan 属性（列の結合）と rowspan 属性（行の結合）を使用します。指定されている整数値の個数のセルを結合します。

<table border="1">
  <tr>
    <td>セル1</td>
    <td colspan="2">列の結合がされたセル</td>
    <td>セル2</td>
  </tr>
  <tr>
    <td rowspan="2">行の結合が<br>されたセル</td>
    <td>セル3</td>
    <td>セル4</td>
    <td>セル5</td>
  </tr>
  <tr>
    <td>セル6</td>
    <td>セル7</td>
    <td>セル8</td>
  </tr>
</table>

列のグループ化

　<colgroup>要素は、HTMLのテーブルで列のグループ化を行うための要素です。通常、<colgroup>要素は<table>要素の直後に配置され、その中に<col>要素を使用して列の幅やスタイルを設定します。

<table border="1">
  <colgroup>
    <col style="background-color: lightblue;">
    <col span="2" style="background-color: lightgreen;">
  </colgroup>
  <tr>
    <td>列1</td>
    <td>列2</td>
    <td>列3</td>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
  </tr>
</table>

<table border="0">
  <colgroup>
    <col style="background-color: lightblue;">
    <col style="background-color: lightgreen;">
    <col style="background-color: lightcoral;">
    <col style="background-color: lightsalmon;">
    <col style="background-color: lightseagreen;">
  </colgroup>
  <tr>
    <td>列1</td>
    <td>列2</td>
    <td>列3</td>
    <td>列4</td>
    <td>列5</td>
  </tr>
  <tr>
    <td>データ1</td>
    <td>データ2</td>
    <td>データ3</td>
    <td>データ4</td>
    <td>データ5</td>
  </tr>
</table>

参考

developer.mozilla.org