tableタグとは？

tableタグは、データを表形式に表示できるものです。 データの見通しがよく、ＷＥＢクライアントのＵＩ（ユーザーインターフェース）部品としても、非常に便利です。

例：

日付 項目 個数
2026/05/01 りんご 1
2026/05/02 ばなな 2
2026/05/03 みかん 3
合計 6

HTML

<table>
  <thead>
    <tr>
      <th>日付</th>
      <th>項目</th>
      <th>個数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2026/05/01</td>
      <td>りんご</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2026/05/02</td>
      <td>ばなな</td>
      <td>2</td>
    </tr>
    <tr>
      <td>2026/05/03</td>
      <td>みかん</td>
      <td>3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan=2>合計</td>
      <td>6</td>
    </tr>
  </tfoot>
</table>

CSS

table {
  border: 1px solid black;
  border-collapse: collapse;
}
td {
  border: 1px solid black;
}
th {
  border: 1px solid black;
  background-color: skyblue;
}

なぜ、拡張が必要か？

tableタグは、あくまで静的なHTML文書用タグです。 WEBクライアントアプリでUI（ユーザーインターフェース）部品として、使用しようとするとJavaScript等による書き換えが必要となります。 例えば、データを追加したいとなると、都度、DOM操作が必要となります。

このような処理を行ってくれるライブラリとしては、下記のようなものがオープンソースとして公開されています。

これらのライブラリの機能は非常に強力で、様々な便利な機能が利用できます。

本格的なＷＥＢクライアントプログラムを開発したい場合には、非常に心強いライブラリです。

ただ、シンプルなマスターメンテナンスの様なＵＩ部品を考えた場合、ここまでの機能がなくとも簡易的なものが自作可能です。特に、本サイトで使用するテストプログラム等では、HTML, CSS, JavaScript だけで十分のものが作成できます。

そこで、ここでは、Web Components として、「拡張tableタグ」を作成していきたいと思います。

どの様な機能を追加するか

以下のような機能を付加します。

  • Web Components として独自タグで定義できるようにする。
  • tableの項目は、タグ定義時に指定できるようにする。
  • ヘッダー部、ボディ部、フッター部は個別のメソッドで出力できるようにする。
  • ボディ部への行出力はメソッド呼び出しで渡されたデータを1行ごと、追加可能とする
  • ヘッダー部の出力要求時、テーブルを初期化する。
  • ヘッダー部とフッター部は位置を固定化する。
  • 複数行の受け渡しで、テーブル全体を再描画するようにする。

「拡張tableタグ」の動作イメージの確認

作成方法を説明していく前に、実際の動きを確認していただこうと思います。

下記のボタンを押下することで、「拡張tableタグ」を使用したテストプログラムの起動が可能です。

テストプログラムを通じて、完成した「拡張tableタグ」の動作が確認できます。

👉 本記事のテストプログラムを動かすことで、Web Components が体感できます。

テストプログラムの概要（かんたん説明）

本テストプログラムは、過去投稿「データ保存技術/IndexedDBの動作確認③」で使用したものをWeb Componentsに合わせ、カスタマイズしています。

また、データの保存先として IndexedDB を利用しています。

※　IndexedDB について詳しく知りたい方は、過去投稿「データ保存技術/IndexedDBとは」を参照してください。

以下に、このテストプログラムの説明と使い方を再掲します。

このプログラムが保存するデータは、売り上げのオブジェクトです。

例:

{
  id: 1,
  hizuke: 2026/05/01,　←　実際には、date オブジェクト
  hinmoku: "えんぴつ",
  kingaku: 1000
}

表示画面には、大きく分けて3つのエリアが存在します。

  • テーブルエリア
  • 検索項目エリア
  • 検索条件エリア

テーブルエリア

IndexedDBに格納されているデータが一覧で表示されます。（最大10件）

検索項目エリア

検索対象とする項目を選択するものです。

検索条件エリア

値を入力することにより、一致検索、前方一致検索、下限検索、上限検索、範囲検索が可能です。検索されたデータは、テーブルエリアに反映されます。

全検索ボタン押下により、全件表示に戻ります。

構造はいたってシンプルです。

操作手順

手順①：本頁の「テストプログラム起動」を押す

テストプログラム起動 👉 起動時に、現在登録されているデータがテーブルエリアに表示されます。

手順②：一致検索

検索項目エリアにて、検索対象の項目を選択 検索条件エリアの1つ目の入力欄に値を入力し、「一致検索」ボタン押下 👉 入力欄への入力後、「一致検索」ボタンが押せるようになります。

手順③：前方一致検索

検索項目エリアにて、検索対象の項目を選択 検索条件エリアの１つ目の入力欄に値を入力し、「前方一致検索」ボタン押下 👉 入力欄への入力後、「前方一致検索」ボタンが押せるようになります。ただし、検索対象項目が文字列の場合のみ使用可能となります。

手順④：下限検索

検索項目エリアにて、検索対象の項目を選択 検索条件エリアの２つ目の入力欄に値を入力し、「下限検索」ボタン押下 👉 入力欄への入力後、「下限検索」ボタンが押せるようになります。 👉 「閾値含む」のチェックを外すことで、入力した値を含まない検索が可能です。

手順⑤：上限検索

検索項目エリアにて、検索対象の項目を選択 検索条件エリアの３つ目の入力欄に値を入力し、「上限検索」ボタン押下 👉 入力欄への入力後、「上限検索」ボタンが押せるようになります。 👉 「閾値含む」のチェックを外すことで、入力した値を含まない検索が可能です。

手順⑥：範囲検索

検索項目エリアにて、検索対象の項目を選択 検索条件エリアの２つ目と３つ目の入力欄の両方に値を入力し、「範囲検索」ボタン押下 👉 両方の入力欄への入力後、「範囲検索」ボタンが押せるようになります。 👉 「閾値含む」のチェックを外すことで、入力した値を含まない検索が可能です。

手順⑦：全検索

「全検索」ボタン押下 👉 登録されている全てのデータが読み込まれます。

(つづく)