JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのDOMを使ってテーブルにキャプションを追加する方法

HTMLテーブルにキャプション（表題）を追加したい場合、JavaScriptのDOMが提供する createCaption() メソッドを使うと簡単に実現できます。このメソッドは、指定したテーブル要素に対して <caption> 要素を動的に生成し、その内容を自由に設定できます。

基本的な使い方

まず、対象となるテーブルのIDを取得し、そこに対して createCaption() を呼び出します。戻り値として生成された caption 要素が返されるため、innerHTML プロパティで任意のテキストを設定しましょう。

サンプルコード

以下のコードでは、ボタンをクリックするとテーブルの上部に「Demo Caption」というキャプションが表示されます。実際にブラウザで実行して、動作を確認してみてください。

<!DOCTYPE html>
<html>
   <head>
      <script>
         function captionFunc(x) {
            document.getElementById(x).createCaption().innerHTML = "Demo Caption";
         }
      </script>
   </head>
   <body>
      <table style="border:2px solid black" id="newtable">
         <tr>
            <td>One</td>
            <td>Two</td>
         </tr>
         <tr>
            <td>Three</td>
            <td>Four</td>
         </tr>
         <tr>
            <td>Five</td>
            <td>Six</td>
         </tr>
      </table>
      <p>
         <input type="button" onclick="captionFunc('newtable')" value="Display Table Caption">
      </p>
   </body>
</html>

コードの解説

・captionFunc(x)：引数 x にはテーブルのIDを受け取ります。
・document.getElementById(x)：IDを元に対象のテーブル要素を取得します。
・createCaption()：テーブルに <caption> 要素を作成します。すでに存在する場合は既存のものを返します。
・innerHTML：作成されたキャプションに表示するテキストを設定します。

補足ポイント

createCaption() は同一のテーブルに対して複数回呼び出しても、新しいキャプションが重複して追加されることはありません。既存のキャプションがある場合はそれが返されるため、安全に利用できます。また、キャプションはデフォルトでテーブルの上部中央に表示されますが、CSSの caption-side プロパティを使えば下部などへの配置変更も可能です。

  1. CSSでレスポンシブテーブルを作成する方法をわかりやすく解説

    CSSでレスポンシブ対応のテーブルを作成するには、テーブル全体を<div>要素で囲み、その親要素に overflow-x: auto; を指定するのが最もシンプルで確実な方法です。これにより、画面幅が狭い環境（スマートフォンやタブレットなど）でも、テーブルが横にはみ出すことなく、水平スクロールバーが自動的に表示されるようになります。レスポンシブテーブルのポイントレスポンシブテーブルを実現するうえで重要なCSSプロパティは以下のとおりです。overflow-x: auto; … コンテナからはみ出した内容に対して、必要な場合のみ横スクロールバーを表示します。width: 100%;

  2. HTMLでキャプション（表題）付きのテーブルを作成する方法

    HTMLでキャプション（表題）付きのテーブルを作成するには、<caption>タグを使用します。キャプションはテーブルの内部に配置され、<table>タグの直後に記述するのが決まりです。 <caption>タグで指定したテキストは、デフォルトではテーブルの上部中央に表示されます。表示位置を変更したい場合は、CSSの「caption-side」プロパティ（top・bottom・left・rightなど）を使って調整することも可能です。 コード例 以下のコードを実行すると、キャプション付きのテーブルがどのように表示されるかを確認できます。 <!DOCTY