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

JavaScriptでテーブルのキャプション位置を設定する方法

HTMLテーブルのキャプション（表題）の位置を設定するには、JavaScriptの captionSide プロパティを使用します。このプロパティに「top」や「bottom」などの値を指定することで、キャプションを表の上部または下部に自由に配置できます。

以下のコードを実行して、テーブルのキャプション位置を変更する方法を確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <table id = "newTable" border = "2">
         <caption id = "newCaption">社員情報</caption>
         <tr>
            <th>社員ID</th>
            <th>氏名</th>
            <th>部署</th>
         </tr>
         
         <tr>
            <td>001</td>
            <td>Amit</td>
            <td>IT</td>
         </tr>
         
         <tr>
            <td>002</td>
            <td>John</td>
            <td>Finance</td>
         </tr>
         
         <tr>
            <td>003</td>
            <td>David</td>
            <td>Marketing</td>
         </tr>
      </table>
      <br>
      
      <button onclick = "display()">クリックしてキャプション位置を変更</button>
      
      <script>
         function display() {
            document.getElementById("newCaption").style.captionSide = "bottom";
         }
      </script>
      
   </body>
</html>

コードの解説

上記の例では、ボタンをクリックすると display() 関数が呼び出され、getElementById() で取得したキャプション要素の style.captionSide に「bottom」が設定されます。その結果、キャプション「社員情報」が表の上部から下部へ移動します。

captionSide プロパティには、主に以下の値を指定できます。

  • top：キャプションを表の上部に配置します（デフォルト値）。
  • bottom：キャプションを表の下部に配置します。

なお、かつては「left」や「right」も利用できましたが、現在の標準仕様では非推奨となっているため、実務では「top」と「bottom」を使用するのが一般的です。

  1. JavaScriptで日付の「日」を設定する方法｜setDate()の使い方を解説

    JavaScriptでは、DateオブジェクトのsetDate()メソッドを使うことで、日付の「日」（1〜31）を設定・変更できます。この記事では、実際のコード例と実行結果をもとに、setDate()の基本的な使い方をわかりやすく解説します。 setDate()メソッドとは setDate()は、Dateオブジェクトの「日」の値だけを変更するためのメソッドです。年や月はそのままに、日にちだけを差し替えたい場合に便利です。引数には1〜31の整数を指定しますが、範囲外の値を渡してもエラーにはならず、自動的に月をまたいだ日付へと調整されます。また、このメソッドは元のDateオブジェクト自体を書き換え

  2. HTMLテーブルに水平ヘッダーを設定する方法

    HTMLのテーブルには、水平（横方向）ヘッダーと垂直（縦方向）ヘッダーの両方を設定することができます。水平ヘッダーを作成するには、すべての<th>要素を単一の<tr>タグ（つまり1行）の中に記述し、その行をテーブルの最上部に配置します。これにより、各列の見出しがテーブルの上端に横一列で表示されます。 サンプルコード 以下のコードを実行して、テーブルに水平ヘッダーを設定する方法を実際に確認してみましょう。従業員の名前・年齢・担当技術という3つの列見出しを持つテーブルの例です。 <!DOCTYPE html> <html>   &nbs